Vercel Ship
26

Extraction

This is how the primer-react skill was built. You don't run this on stage: the skill already ships in your starter. This page shows you how it was made so you can run it on your own design system later.

The builder is a meta-skill called extract-ds-skill. It takes any design system and turns it into an agent skill: design-system-agnostic in, design-system-specific out. Point it at the docs and a real project, and it writes a skill that makes an LLM build with those components.

Two inputs

You give it two roots. It crawls and resolves the rest itself.

  • Foundation docs: the URL(s) for the design system's docs site.
  • A reference project: a GitHub URL for a real project that already uses the design system in production.

Three phases, three fresh sessions

The work runs in three phases. Each phase runs in its own fresh Claude session, connected only by handoff files on disk.

The extraction flow: Discovery, Validate, PersistThree phases left to right: Discovery, Validate, Persist. Each is connected to the next by a handoff file that ends one session and starts a fresh one. A human gate sits between Discovery and Validate; a machine check sits inside Validate; a final check script sits inside Persist.1 · Discoveryslate · tokens · rulesstops at [VERIFY] gatehandoff2 · Validatetypecheck · grep · citeverify-citations.shhandoff3 · Persistscaffold the skillsaves only if checks passEACH PHASE = A FRESH SESSIONhuman gatemachine checkfinal check script
Scroll →

1 · Discovery

Reads the sources. Proposes the 19-component slate, the tokens, and the headline rules. Then it stops at a [VERIFY] human gate and waits for you to say "go". Nothing is trusted yet: this is a proposal, not a result.

2 · Validate

Proves the proposal before anything ships. It typechecks every prop claim against the installed package, grep-resolves every token and asset, and cites every foundation rule. A Layer-1 machine check, verify-citations.sh, confirms the skill's citations point at real source: it checks the skill, not any generated UI.

3 · Persist

Scaffolds .claude/skills/<slug>/ and runs the final check script. The skill saves only if the checks pass. If a check fails, nothing is written.

Why fresh sessions

This is the context-engineering insight worth taking home. Each phase ends by writing a handoff doc, ending the session, and starting a fresh session for the next phase.

A long session fills up with old reading, dead ends, and noise. The model drifts. By writing what matters to a handoff file and starting clean, each phase begins in the "smart zone": small, focused context, and only the facts it needs.

Run it on your own design system

This is not run live on stage. The produced skill already ships in your starter, so there is nothing to extract during the workshop. Read the full meta-skill in the repo, then run it on your own design system later.

The extract-ds-skill page has the run line and the details.

Where to look next

  • The Audit: the one deep dive: a citation can resolve perfectly and still be false. This is why you audit the skill instead of trusting it.
  • Evidence: the same prompt and skill on Sonnet and Opus. The skill holds the quality floor; the model changes the ceiling.

Next: The Audit