Quickstart
The fastest way to see a chain work is the one that ships with the product. React JS takes a description of a website and returns a running, reviewed Vite + React + TypeScript site with a test plan.
Run it
- Open a workspace for the new site. The chain assumes a mostly empty directory — if the directory is occupied it will scaffold into a subdirectory and say so.
- Start a session.
- Open the agent dropdown in the composer and pick React JS, under HARNESSES.
- Describe the site — audience, product, what it has to do. Detail here is worth more than detail later; the first stage turns it into a spec every later stage inherits.
That's the whole setup. The chain starts at react-architect and runs itself.
What you'll watch happen
react-architect → react-scaffold → implement → test → react-runner → react-qa-brief| Stage | Ends when |
|---|---|
react-architect | DECISIONS.md is written — audience, brand, information architecture, visual system, scope |
react-scaffold | The Vite app, design tokens, layout shell and dependencies exist, and typecheck is clean |
implement | The pages and components are written |
test | Typecheck and tests are green |
react-runner | The site runs, and has been screenshot-reviewed for visual fidelity |
react-qa-brief | TEST-PLAN.md is written and you've been pinged |
Two of those hand backwards. If test fails, it returns to implement rather than continuing; so does react-runner when the rendered page isn't up to standard. Each of those return trips costs a hop from the same budget, which is why this harness allows twelve of them — five for the happy path, the rest for repair.
In the transcript, each handoff appears as an Auto · continued row. You didn't write it; the chain seeded it to start the next stage. Revert is disabled on those rows for that reason.
Stopping
- Stop cancels the whole chain immediately — it's one session, one run-lock. Your next message resumes at the stage it stopped on.
- Pick a plain agent from the same dropdown to clear the harness. Handoff turns off entirely and the session behaves normally again.
Requirements
Node.js and npm available in the workspace, and — for react-runner's visual review — a browser-capable environment. Without one, the run still completes; the visual pass just has less to work with.
What it is and isn't
react-runner smoke-tests and reviews visual fidelity: that the site renders, looks finished above the fold, has responsive structure, and avoids obvious spacing, contrast, overflow, or default-template failures. It is not exhaustive design QA, which is what the test plan in the final stage is for.
Next
- Build a harness — write your own chain.
- Reference — the keys, the halt reasons, the limits.