Vercel Labs' DS Skill Extraction Workshop is a starter repository for a workshop that teaches developers to turn a design system into reusable agent skills and use one to generate a Primer React interface. It guides participants through setup, generation, and visual review of the resulting application. The catalogue entries provide the skills and instructions used in the workshop.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/vercel-labs/ds-skill-extraction-workshop/do-worknpx skills add vercel-labs/ds-skill-extraction-workshop --skill do-workgit clone --depth 1 https://github.com/vercel-labs/ds-skill-extraction-workshopWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/vercel-labs/ds-skill-extraction-workshop/do-work)<a href="https://agentmods.dev/skills/vercel-labs/ds-skill-extraction-workshop/do-work"><img src="https://agentmods.dev/badge/skills/vercel-labs/ds-skill-extraction-workshop/do-work.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00077 | $0.00648 |
| Opus 5 | $0.00039 | $0.00324 |
| Sonnet 5 | $0.00015 | $0.00130 |
| Haiku 4.5 | $0.00008 | $0.00065 |
Grade A, and why
do-work scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 83 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Do Work
Execute a complete unit of work: understand it, build it, validate it, commit it.
Workflow
1. Understand the task
Read any referenced plan, PRD, or GitHub issue body in full. Explore the codebase to understand the relevant files, patterns, and conventions.
If the task touches a design system surfaced under .claude/skills/ds/,
that skill's SKILL.md is the source of truth for component selection,
token usage, and wiring rules — read it before writing code.
If the task is ambiguous, ask the user to clarify scope before proceeding. Do not guess at scope.
2. Plan the implementation (optional)
Skip when the task is already fully specified end-to-end (e.g., a locked-down issue body). Plan when scope is open, when you have multiple viable approaches, or when the task spans more than a couple of files.
3. Implement
This is a frontend-only workshop — implement directly. No TDD scaffolding.
Edit code directly. Do not delegate via subagents unless the task genuinely splits into independent parallel pieces.
4. Validate
Run:
pnpm verify
This runs pnpm typecheck && pnpm build. Fix any failures and re-run
until both pass cleanly.
Husky's pre-commit hook also runs pnpm typecheck as a backstop — but
the build check lives here. Do not rely on the hook to catch build
failures, and do not commit without pnpm verify passing.
If a pre-existing failure outside the scope of this task blocks you,
make the minimal fix to unblock and call it out explicitly in the
commit message under a "Pre-existing fix" section. Never bypass the
hook with --no-verify.
5. Commit
Once pnpm verify passes, commit the work in ONE commit. Use the
project's commit message style — read git log --oneline -n 10 if
unsure.
If the task originated from a GitHub issue, close the issue with a one-line outcome:
gh issue close <N> --comment "<one-line outcome of what shipped>"
If the task only partially resolves the issue, comment on it instead of closing:
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 83 lines · 77 tokens per session scan A a8af243d24db
do-work is a skill published in the GitHub repository vercel-labs/ds-skill-extraction-workshop (11 stars, last pushed 2mo ago), licensed MIT. It adds 77 tokens to every session and 648 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
contributing
How to contribute to evlog, covering commit and PR conventions, changesets, the Definition of Done, testing rules, and the authored skills that walk through building a new adapter, enricher, framework integration, or map rule. Load this for any question about contributing, opening a PR, or adding something to the…
git-commit
Creates git commits following Conventional Commits format with type/scope/subject and detailed markdown body. Use when user wants to commit changes, create commit, save work, or stage and commit. Enforces project-specific conventions from CLAUDE.md. Each change type gets its own markdown heading (# emoji + type), with…
commit
Read this skill before making git commits.
et-git
ET git workflow for preparing commits and reviewing changes. Use when checking git status or diff, filtering unrelated files, staging task-scoped changes, writing Chinese commit messages, or synchronizing with remotes using rebase instead of merge.
commit
Smart commit: bump version, find related issues, commit with Co-authored-by, push. Use when the user says 'commit' or wants to finalize changes.
setup-husky-dotnet
Use when configuring Git hooks in .NET projects before team commits occur, to enforce commit message standards and code formatting automatically.