Three Frames
A skill is not one thing. There are three frames for what a skill does. They are not steps in a row. They are three ways a team can sit, based on where the design system lives and how mature the agent loop around it is.
The same skill can move between frames over time. This page names them and shows where each one shows up in the workshop.
| Frame | One line | Where it's shown |
|---|---|---|
| Adaptation | The skill routes the agent to the real source. | The live run: see Generate. |
| Extraction | The skill is built from the design system. | Extraction. |
| Cultivation | The skill is grown from feedback. | The Audit. |
Adaptation
The skill routes the agent to the live design system source.
The design system already exists and has a home. The job is to make the agent find it and stay honest about it. The skill is thin: a pointer plus enough rules to keep the agent on the real source instead of guessing.
This is the frame you see in the live run. The primer-react skill points the agent at Primer, and the agent builds with it.
What the skill actually buys you
The primer-react skill scaffolds Primer's ThemeProvider. It sets where color mode lives. It documents no toggle: no useTheme, no setColorMode, nothing about a light/dark switch.
Across 10 builds, every model added a real, labelled light/dark toggle anyway. Zero web searches. They read Primer's installed source in node_modules (ThemeProvider.d.ts and .js, useTheme, setColorMode) and used it. The skill did not cause this; the agents reached the installed source on their own. What the skill prevents are two specific footguns: shipping a cosmetic-only toggle that does not flip the theme, and dropping an SSR hydration mismatch on first paint.
The skill's measured value is not "the agent builds the feature." Both arms of the A/B run built it. The skill's value is preventing the two failure modes above and reducing Opus cost by roughly 20%.
That is the bet of Adaptation. You point at the truth so the agent reads the rest from the code that ships, and you scope the skill to the footguns the agent would otherwise hit.
Extraction
The skill is built from the design system.
The rules already exist (in prop names, token files, the accessibility decisions baked into the code) but no one has written them down for an agent to read. Extraction pulls them out into a portable skill the agent can load.
At Vercel, GeistCN lives in the front repo. The skill that drives it was extracted from the design system there. See Extraction for how primer-react was built the same way: Discovery, then Validate, then Persist.
Cultivation
The skill is grown from feedback.
Once a skill is in production, it stops being a one-time deliverable. Every PR comment that says "we don't do it that way" is a missing rule. Cultivation feeds those back in: one rule, one row, per signal.
Vercel's product-copywriting skill is grown this way. It runs against an eval harness and gets sharper from real PR feedback over time. See The Audit for why this matters: a skill you never check will drift.
How the frames overlap
The frames don't compete. They are a vocabulary for naming where each part of your design system sits right now. Different parts can sit in different frames at the same time: one component library might be in Adaptation while a token set is being Extracted and a copy skill is being Cultivated.
See the frames pay off in the Evidence, and what to carry home in Takeaways.
Next: Extraction