# rodeo: A free React starter for Claude Code and Codex.

Checks every edit, catches stray comments, and keeps Claude Code  
on track.

`npx degit quinnsprouse/rodeo my-app`

## A better foundation to build on.

Agents copy whatever's already in a codebase. Give them a messy one and you get more mess, just faster. So Rodeo starts with the foundation. The pyramid shows where its effort goes: most into the codebase, less into static analysis and prose, and the least into human review, which scales the worst.

1. Codebase  
Layers, tokens, server-only files.
2. Static analysis  
Every error names its fix.
3. Prose  
Short guides, read when needed.
4. Human review  
Only the exceptions, each marked.

Adapted from [poteto's post on X](https://x.com/poteto/status/2111133080526495985)

## Rodeo has opinions.

In a Rodeo app, agents read the code far more often than people do, and every line they read costs tokens. So Rodeo drops a few habits that suit people but waste an agent's time.

* ### No code comments  
Most comments restate in English what the code already says, and an agent can read the code. So each one costs tokens and adds nothing. Agents also copy what they see, so one comment leads to more.
* ### Browser tests, not unit tests  
Agents often write unit tests like "the header says Welcome." Change the copy and the test fails though nothing broke, so the agent spends tokens rewriting it. A browser test clicks through a real flow. When it fails, a person would have hit the same bug.
* ### Lint rules stay on  
When a lint rule gets in the way, the easy fix for an agent is a disable comment, and the problem hides. Rodeo rejects those comments. Exceptions go in vite.config.ts with a reason, so you can see them all in one file.
* ### Docs stay short  
An agent loads docs into the same context window it needs for the task, so every extra paragraph crowds out the work. Docs also go stale, and an agent believes them anyway. Rodeo ships seven short guides, and an agent opens one only when the task needs it.
* ### One design system  
Left alone, an agent reaches for a new gray or a 13px font whenever it needs one, and each screen drifts a little further. Lint knows the theme's sizes and colors and rejects anything else, so new screens match the old ones without you checking.
* ### Code flows one way  
Routes import components, components import hooks, and hooks import src/lib. Lint blocks any import that points back up. So when an agent edits a component, it knows nothing below can break.

## Mistakes go back to the agent, not to you.

Rodeo checks the agent's work as it goes. When a check fails, the agent gets the error and fixes it before you look.

my-app — Claude Code

Add a pricing page with live prices from Stripe.

* Read AGENTS.md
* Edit src/routes/pricing.tsx
* process.env in browser code. Loaders run in the browser too. Move Stripe to a .server.ts file.
* Move Stripe to prices.server.ts
* Format, lint, and types pass
* Your pricing page is ready.

## Start with the guardrails in place.

Clone it and point Claude Code or Codex at AGENTS.md. Both run the same hooks, and Vite+, TanStack Start, React 19, Tailwind v4, and shadcn/ui come set up.

`npx degit quinnsprouse/rodeo my-app`

[GitHub](https://github.com/quinnsprouse/rodeo) [Read the philosophy](https://userodeo.dev/rationale)