Setup

Run these steps as soon as the setup slide goes up. The clone is small, but pnpm install warms node_modules you do not want to wait on once the hands-on timer starts.

Pre-requisites

You need Claude Code access to follow along. If you don't have it yet, set it up now: it takes longer than the workshop itself.

Node 20+: node --version should print v20.x or higher.
pnpm 10+: npm install -g pnpm if missing.
Claude Code: the CLI agent that runs the generation. Install per the Claude Code docs. Verify with claude --version.
Anthropic API key: needed by Claude Code to make calls. Export as ANTHROPIC_API_KEY in your shell, or let claude prompt you on first run.

Claude Code is the default: not the only path, but the one this workshop is written against. Skills live in .claude/skills/, which Claude Code auto-loads when it starts. Other agentic clients can read the same files, but not all auto-load skills (Cursor, for example, doesn't), so the live follow-along assumes Claude Code. Change the skill folder after launching? Restart the client so it re-scans.

You only run UI generation, which costs pennies. The primer-react skill already ships in the starter: nothing expensive runs on stage. An API key topped up for a typical Claude Code afternoon is plenty.

Clone and install

The rule for attendees: clone or fork the starter, work on main, and do not push. Your copy is disposable.

Clone the starter. Copy this command into your terminal: it lands in your current directory. (You can fork first if you prefer.)
git clone https://github.com/vercel-labs/ds-skill-extraction-workshop.git cd ds-skill-extraction-workshop
Install dependencies. Warms node_modules so generation doesn't stall on a cold install.
pnpm install
Confirm the skill is on disk. The starter ships with the skill pre-built: you do not build it here.
ls .claude/skills/
You should see primer-react/ (the skill you'll generate with) and extract-ds-skill/ (the meta-skill that built it: your take-home, to run on your own design system later).
Verify the prompt file is in place.
head -5 prompts/pr-merged-switch-dark-mode.md
You should see the --- frontmatter (role: user, phase: 2) followed by the build instructions.
Launch Claude Code, hands-off. From the repo root, start a fast Opus run that doesn't stop to ask.
Order matters: Steps 1–4 must finish before this. Claude Code scans .claude/skills/ when it starts, so launching before the skill is on disk loads an empty skills directory and /primer-react won't exist for the session.
claude --dangerously-skip-permissions
First run prompts for your Anthropic API key. Paste it and continue.

--dangerously-skip-permissions sounds scary, but it's safe here. Your clone is disposable, the prompt forbids commit, stage, and push, and the task is a benign UI build. So the agent can run the whole thing without you babysitting it.

You are ready when

claude --version prints a version string.
ls .claude/skills/ shows primer-react/ and extract-ds-skill/.
head -5 prompts/pr-merged-switch-dark-mode.md prints the prompt frontmatter.
A claude session is open in your terminal, waiting for input.

Keep that terminal visible alongside this tab. The Generate page assumes you can paste a prompt into a live claude session.

Next: Generate