React Agent Stack

The React template that makes coding agents write production-grade React Native.

npx create-react-agent-stack@latest

Why skills are not enough

A skill only helps on the turns it is loaded, and loading is the agent's call. It matches the turn against a one-line description and guesses, so a correct, well-written skill still misses most of the turns it was written for. Beyond that:

• Once loaded, it stays in context after a compaction, on work it has nothing to do with.
• Two skills on one topic disagree, and the agent picks.
• A skill can be wrong, and nothing checks it.

None of this fails a command, so the code still lands.

Plain React is not the safe part either. Across eight models on the same React tasks, every model introduced new issues, 17 to 67 per 100 trials, 77% of them bugs rather than taste.

Chart by @aidenybai. React Native has far less training data and much less headroom: a phone has a fraction of a laptop's compute power.

How it works

Everything a command can check is a rule. Everything else is a doc.

| | | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | Deterministic | 49 lint rules across 6 oxlint plugins, react-doctor, a React Compiler bailout check, types, tests. A failing rule cannot be skipped. | | Probabilistic | 13 docs behind one router table: which library, which API, where state lives, how data flows. Patterns no command can check. |

bun verify runs seven checks: lint, format, types, tests, Expo config, docs, React Compiler. It also runs at the end of every agent turn, so the agent gets the failure while it still holds the context that caused it. After five red turns it stops and explains the problem in plain words.

Results

The same app, built twice by the same model from the same words. Once here, once in a plain create-expo-app.

| | here, against plain Expo | | -------------------------------- | ------------------------------------ | | React work for one keystroke | 22x fewer re-renders, 35x faster | | clearing a search field | 10x fewer re-renders, 19x faster | | react-doctor score | 71% higher | | blind judge, six questions | 2x the score | | right doc opened before any code | 100% |

Read the eval. Both finished apps, both request texts, the frozen key and every script are committed, so each number can be checked against the code that produced it.

The stack

Bun · Expo · expo-router · React Compiler · TanStack Query · Legend State · LegendList · Unistyles · Nitro Modules · Nitro Fetch · MMKV · Turbo Image · Plain Text · Keyboard Controller · Reanimated · Gesture Handler · oxlint · oxfmt

Each is the faster option on a phone, and most shipped after the training data. Left alone, an agent reaches for useState, fetch and StyleSheet.create, and writes the wrong pattern when it does reach for the right library. So the choice is made here, and each doc carries the recommended patterns for correct, performant and robust code.

Your project

src/app/            expo-router screens
src/components/     themed primitives, the examples the agent copies
docs/               13 topics, routed by docs/index.md
tooling/            6 oxlint plugins, 49 rules
scripts/verify.ts   the gate
AGENTS.md           read by Claude Code, Codex and Cursor

bun ios                # run it
bun verify             # the gate, 7 checks
bun fix                # autofix lint and formatting
bun doctor             # react-doctor
bun compiler:check     # every component the React Compiler bailed on

This repo

template/     what lands in your project
packages/     the create-react-agent-stack CLI
eval/         the eval: key, scripts, both finished apps

Pre-1.0. Issues welcome. MIT.