SEVEN-LAYER FRONTEND AGENT
Seven layers turn every brief into one production-ready React component.
Frontend Agent routes, assembles, generates, validates, renders, critiques, and repairs each request. A frozen, cached prefix supplies 1,037 verified rules, specs, and design fingerprints at every step.
Run the full cycle from your editor
One command installs the agent into a project. There is nothing to sign in to.
npx @frontendag/create --token=<token>Access is invite-only for now. Leave an address and a token follows.
What the command does (install, ask, check).
ONE REQUEST, END TO END
BRIEF
a stock quote card with
a sparkline, market session
and price movement that
does not rely on colour
SEVEN LAYERS
zero-LLM · 3 modes · 33 traitsRuns deterministic alias and token scoring to resolve grounded, composed or open generation mode without spending a model call. Creative intent is resolved on a separate axis, so API grounding and visual latitude cannot overwrite each other.
3,183 cached · 2,500 retrievedVerifies the frozen prefix by SHA-256 and keeps 3,183 tokens stable for cache reuse. Per request, verified specs, triggered guidance from 28 skills and at most three of 58 approved fingerprints fit inside a 2,500-token budget with a shedding order that never drops specs.
1 named export · strict TSX contractA frozen output contract narrows the result to one TSX file with one named export and typed props. The stack is fixed to React, TypeScript, Tailwind v4, verified Base UI APIs, Motion and Lucide.
55 spec rules · project typingsOverlays the component into an in-memory TypeScript program that mirrors the project tsconfig, path aliases and installed packages. Specs are verified against installed Base UI typings before they can enter the knowledge base.
showcase gate · 1280×800 PNGOnly showcase work that already compiles can enter the optional render path. When the browser adapter is available, Chromium mounts the component at 1280×800, waits for it to settle and captures PNG evidence without making delivery depend on render infrastructure.
vision pass · max 4 findingsOnly a successful showcase render is eligible. A separate model reads screenshot pixels, returns a structured verdict with at most four visible findings and cannot overrule accessibility, verified APIs or project conventions.
1 shared pass · rollback safeOne repair budget is shared between compile diagnostics and visual critique, with type errors taking priority. Every revision is rechecked; a visual fix that breaks compilation is discarded and the last valid component is returned.
COMPONENT / STOCK-CARD.TSX
VIEW →THE EXECUTION CYCLE
- 01
Route
intent + mode
- 02
Assemble
specs + guidance
- 03
Generate
one React file
- 04
Validate
project type-check
- 05
Render
showcase only
- 06
Critique
visual review
- 07
Repair
one shared pass
Route and assemble
The agent classifies the request as grounded, composed or open, infers creative intent, then loads the relevant specs, guidance and design anchors.
Generate and validate
It produces one React file from a frozen design-engineering recipe, then type-checks it against the project and installed component APIs.
Render, critique and repair
Showcase work can be rendered and visually critiqued. One shared repair pass fixes either compile errors or critique findings without losing valid code.
Core: route → assemble → generate → validate. Showcase: render → critique. If needed: repair → validate.
WHAT STANDS BEHIND ONE REQUEST
1,037
compiled rules in the knowledge base, selected per request
58
approved design fingerprints, 672 recorded decisions
28
compiled skills, 310 doctrine lines, 6 always on
90%
cheaper input after the first request: 3,183 frozen tokens are cached, not re-sent
Retrieved, not dumped. A request receives only the verified specs it needs: 3 components carrying 55 rules, antipatterns and accessibility requirements, plus the doctrine its intent triggers and a handful of fingerprints. Everything else stays out of the prompt, which is why depth here does not read as cost.
Frozen, hashed, cached. The shared prefix is compiled once, checked against its hash at boot and re-read from cache on every request after the first. Volatile context rides behind it, so the cached bytes never move. No Base UI import or prop is written that a verified spec does not carry.
OUTPUT / RENDERED PREVIEWS
- Notification inboxone brief, four modelsOpus 5Sonnet 4Haiku 4.5Gemini 3.7 Flash
- Profile card with quotaone brief, four modelsSonnet 4Haiku 4.5Grok 4.6Composer 2.5
- Transaction processone brief, two modelsOpus 5Composer 2.5
- Single componentsone request eachShare accessStock cardTicket cardChoice card
Start with a brief. End with validated code.
One execution path from intent to a React file ready for your project.