The Best JavaScript Framework for AI Coding Agents, Scored

When Nolan Lawson pointed a Claude Code agent at twelve JavaScript stacks and had it build the same Pokemon browser game in each, he produced the closest thing we have to a controlled answer on the best JavaScript framework for AI coding agents. The answer is awkward for anyone with a framework allegiance. SvelteKit, consistently among the best-loved frameworks in developer surveys, kept the agent detouring into documentation. Angular, stable for a decade and saturated with tutorials, was the most expensive build of the bunch and failed to finish a working app in two of its five attempts.

The leaderboard is also the least durable part of that finding. The top three finishers sat within the reported margin of error of each other, models keep improving, and training data keeps accumulating. What endures is the mechanism the bakeoff surfaced: human ergonomics and agent ergonomics have diverged, and they diverge along predictable lines. The most instructive contrast is buried mid-table, where Nuxt, an opinionated convention-heavy framework, nearly won while SvelteKit, equally convention-heavy, struggled. Explaining that pair is what turns a fun contest into a decision framework. This piece does exactly that, with a four-criterion rubric you can score any stack against today, worked scores for React, Angular, Vue, Svelte, and Lit, and a mitigation playbook if your current stack comes out low.

What the Pokemon JavaScript Framework Bakeoff Actually Tested

Lawson, a developer at AI security firm Socket, built the benchmark out of a stated frustration that framework choices are vibes-based. The design is refreshingly dull. He wrote one set of instructions for a Claude Code agent to build a basic Pokemon web application on top of the PokeAPI, then ran the identical setup across twelve stacks: Next.js, Nuxt, Qwik, React Router, SolidStart, SvelteKit, Astro, Angular, TanStack Start, Gracile with Lit, Hono with htmx, and vanilla JavaScript with Vite. The Register's coverage walks through the full setup, and a public repository holds the task and scoring methodology for anyone who wants to inspect both.

Each stack got five independent sandbox runs to smooth out variance in model performance. Verification was automated rather than vibes-based: a custom test suite queried the browser's accessibility tree to confirm that interactive elements like buttons and inputs actually existed, because LLMs occasionally fake a working UI. Lighthouse measured transfer size and runtime performance. Where a framework offered official MCP servers, Claude plug-ins, or agent-skill files, those were supplied as resources, though the agent did not always consult them.

The JavaScript Framework Bakeoff Results, Read Carefully

The highlighted results as reported:

Two patterns emerged in the coverage. Server-centric approaches generally beat client-heavy SPA architectures, plausibly because they eliminate a whole class of client-server synchronization work. And the stacks that did best favored convention, API stability, and concision, meaning less code for the agent to write and fewer architectural decisions for it to botch.

Now read it carefully, because the obvious takeaways are incomplete. The top three sat within the margin of error of each other, so treat them as a cluster. And the two named stragglers undermine the simple story that "convention over configuration hurts AI coding agents." Nuxt is aggressively opinionated, with file-based routing and internal data handling, and it nearly won. SvelteKit is built on a framework whose users report some of the highest satisfaction and retention scores in State of JS surveys, and it floundered. Convention count did not separate winners from losers; stability and visibility did, and the next section names both precisely.

Why Framework Magic and Conventions Tax AI Agents

Three mechanisms explain the split, and together they explain why Nuxt and SvelteKit diverged despite their architectural similarity.

Training-data gravity

Code models are strongest inside the densest region of their training distribution. You can proxy this publicly: npm download trends show React's weekly volume sitting far above Vue's and Svelte's, and survey data tells a similar story about relative usage. But gravity is about stability as much as volume. Svelte 5 replaced its previous reactivity model with runes, and the official migration guide makes clear how much syntax changed. That rewrite split Svelte's corpus: pre-runes examples that dominate training data now conflict with current best practice, so the agent paid for the framework's youth every time it second-guessed itself and went back to the docs. Angular shows the opposite boundary condition. A decade of massive, stable training data did not rescue it, which tells you gravity is necessary but nowhere near sufficient.

Invariants the agent cannot see

Convention over configuration and compiled reactivity both move rules out of the source files and into the toolchain. An agent reads files. It cannot read what the compiler does to them. Invisible contracts get violated more often than explicit ones because there is nothing in the visible code that states them. Hono with htmx keeps behavior in HTML attributes right where the agent is editing. Runes-style reactivity puts the actual mechanism in a compiler pass the agent can only reason about indirectly. Explicit boilerplate is self-describing; magic requires a documentation round-trip.

The token economics of indirection

Every doc lookup, failed build, and retry costs tokens and minutes. Nuxt finished at 3.85 million tokens; Angular burned 9.76 million and still failed twice. That asymmetry is the core inversion for anyone choosing a stack for agent labor. Boilerplate costs agents linearly, as output tokens, and they are reliably good at producing it. Abstraction misuse costs nonlinearly, as retries, dead ends, and abandoned runs. Humans bought abstractions to avoid typing. Agents do not mind typing, so the optimal abstraction budget for an agent-driven stack is lower than the one you would pick for a human team.

This also resolves the Nuxt versus SvelteKit puzzle. Conventions that are old, stable, and massively represented in training data get internalized; the agent has effectively seen thousands of Nuxt file-routing examples, so the conventions act like explicit documentation baked into the weights. Conventions that are new, volatile, or compiled away stay external and expensive. The dividing line is stability times visibility, not opinionation.

A Four-Criterion Rubric for Agent-Friendly Stacks

Those mechanisms compress into a framework selection rubric you can apply to any candidate stack in under an hour. Score each criterion 0, 1, or 2, for a maximum of 8.

The scores are judgment calls, which is a feature. Run it as a team exercise and record the disagreements; the arguments surface assumptions about your stack that nobody had written down.

Which Is the Best JavaScript Framework for AI Coding Agents?

One caveat before scoring: the bakeoff tested full meta-frameworks, so the component-library scores below are my extrapolation through the rubric, argued openly so you can push back.

• React. Maximum gravity and mostly plain JavaScript in the files, so agents reproduce its patterns from memory. It loses a point on build complexity when you add a heavy meta-framework layer, and diffuse runtime errors are a known weak spot.
• Vue / Nuxt. The bakeoff's own evidence backs this one: fewest tokens consumed, near the top on cost, with stable conventions the model has thoroughly internalized.
• Lit. Web components are a standards-based target with a near-zero toolchain penalty, and behavior lives in the file. The risk is gravity; its ecosystem is small relative to React, so agents have seen fewer examples.
• Angular. Massive training volume, but the build-complexity and codegen load carried it to the bottom of the bakeoff at $4.97 with two failed runs. Gravity alone could not compensate.
• Svelte. On the Svelte versus React question for AI code generation, React's edge today is gravity and file-level explicitness; Svelte's runes are genuinely elegant for humans and genuinely out-of-distribution for many models right now. Expect this score to climb as post-runes examples accumulate in training data.

What the Bakeoff Does Not Prove

Treat the ranking as directional evidence, not a verdict, for reasons the enthusiasts skipped past.

• One task genre. A small data-display app against a public API. Nothing here tests complex state machines, real-time features, or large refactors.
• Small samples. Five runs per stack, with the top three inside the margin of error. A different day could reorder the podium.
• One model, one moment. Claude Code at one point in time. Other agents, or the same agent after a training refresh, may split the field differently, especially as runes-era Svelte data accumulates.
• Chosen metrics embed judgment. The grading leaned on automated checks, but deciding to compare cost, maintainability, and performance is itself a values statement about what matters.
• Agents are not the only stakeholders. Humans review, debug, and maintain the output. A stack your team cannot confidently review carries its own tax, which several experienced developers raised when the results circulated. Notably, every finished app passed Lighthouse checks; the runtime differences, from Astro's 810 ms Largest Contentful Paint to roughly 2 seconds for the slowest client-heavy builds, mattered less than the build-time economics.

Mitigations for Agent-Unfriendly Frameworks

If your team is committed to a low-scoring stack, do not reach for a rewrite. Every mitigation below is a prosthetic for one of the two failure modes the bakeoff exposed (missing training-data gravity and invisible invariants). Match the fix to the failure.

1. Externalize the conventions into a repo file. SvelteKit's runs kept paying the same toll: the agent returned to the docs for the updated Svelte, run after run, on the way to a $4.28 median cost. A dedicated file covering conventions, commands, and known traps converts that recurring round-trip into a one-time authoring cost. Claude Code best practices recommends exactly this kind of curated in-repo guidance, and it is the cheapest fix available.
2. Ship scaffolds and generators. Nuxt's near-win ran on convention memory baked into training data, thousands of file-routing examples the model had already absorbed. A committed template hands a lower-gravity stack the same advantage by copy instead of by weights, so agents extend a correct skeleton rather than inventing structure from scratch.
3. Make deterministic tests the error surface. Angular's ugliest number was not the 9.76 million tokens, it was that two of five runs died without leaving a legible failure. Fast unit and end-to-end suites substitute your feedback for the toolchain's silence, turning invisible contract violations into errors the agent can read and act on.
4. Turn compiler strictness on and tighten CI. Options like Angular's strict mode push contract violations to build time, where they surface as plain diagnostics instead of runtime mysteries. Speed matters at bakeoff retry volumes: Nuxt finished at 3.85 million tokens and Angular at 9.76 million, and every retry that waits on a slow pipeline compounds that gap.

Be honest about the ceiling. These mitigations move a stack up a point or so on the rubric. They do not turn a 4 into an 8, and pretending otherwise is how teams burn a quarter on tooling fights.

The Stack Selection Checklist for Agent-Driven Teams

How to choose a tech stack for AI-assisted development, as a repeatable procedure:

1. Date-check the stack's last breaking change against roughly where model training cutoffs sit.
2. Estimate training-data gravity with public proxies: download volumes, survey usage, tutorial density.
3. Open a representative file and try to trace data flow without the compiler or the docs.
4. Break the app deliberately and observe where the error lands.
5. Count the tools and stages between saving a file and seeing a pixel.
6. Score the four-criterion rubric as a team and record the disagreements.
7. Fund the mitigations regardless of score: agent docs, scaffolds, deterministic tests, strict modes, fast CI.
8. Re-score annually, because gravity shifts as training data catches up with framework changes.

Keep three open questions on your radar:

• If model vendors tune explicitly for the largest frameworks, the gravity gap widens further.
• If framework churn slows now that AI can do the migrating, the gap narrows on its own.
• If your team cannot confidently review what the agent ships, agent efficiency stops being the deciding input.

Agents read files, and everything else sits a documentation round-trip away. Prefer stacks where the truth is in the files.