DS Skills Pipeline is a command-line workflow that turns a design system's source code into structured skills for coding agents. It extracts verified tokens, components, icons, assets, usage patterns, and import paths, then generates and verifies reference files that agents can use when working with the design system.
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.
git clone --depth 1 https://github.com/vercel-labs/design-systems-to-agent-skillsWrote 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/commands/vercel-labs/design-systems-to-agent-skills/2b-usage-analysis)<a href="https://agentmods.dev/commands/vercel-labs/design-systems-to-agent-skills/2b-usage-analysis"><img src="https://agentmods.dev/badge/commands/vercel-labs/design-systems-to-agent-skills/2b-usage-analysis/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/commands/vercel-labs/design-systems-to-agent-skills/2b-usage-analysis"><img src="https://agentmods.dev/badge/commands/vercel-labs/design-systems-to-agent-skills/2b-usage-analysis.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00000 | $0.02499 |
| Opus 5 | $0.00000 | $0.01249 |
| Sonnet 5 | $0.00000 | $0.00500 |
| Haiku 4.5 | $0.00000 | $0.00250 |
Grade A, and why
2b-usage-analysis 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 11d 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 — 263 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Stage 2b: Usage Analysis (Optional)
Required Capabilities
- File read/write
- Shell command execution (git, file existence checks, grep)
- Sub-agent spawning (recommended for parallelism; can run serially without it)
Objective
Run Stage 2b of the design system skill generation pipeline: usage pattern analysis.
This stage analyzes how developers actually use DS components in a consuming codebase. It detects wrapper components, overridden defaults, workaround comments, and transform utilities — signals that only appear in usage, not in the DS source code.
Stage 2b is optional. It only runs when the user provides a consuming repo path. If no consuming repo is available, skip directly to Stage 3.
Critical: Report only patterns verifiable from the consuming codebase. Do not infer intent or generate from training data. If a pattern is unclear, flag it as [AMBIGUOUS].
Process
Step 1: Load inputs and validate
Read context/{ds}/01-decisions.md where {ds} is determined by scanning the context/ directory for available design systems.
Extract from decisions:
- DS package name (for import detection)
- Source repo path (for same-repo detection)
- In-scope component list
Scan context/{ds}/02-verified-facts/components/ — list component names and read each file's ## Import section to extract import paths. These import paths are used to find DS component usage in the consuming repo.
Validate the consuming repo path (provided as argument):
- The path exists and is readable
- It contains source files (
.tsx,.ts,.jsx,.js) - It has DS package imports (grep for the package name in source files)
If context/{ds}/02-verified-facts/ is missing or empty:
Stage 2 verified facts not found. Run Stage 2 (extract) first.
If zero DS imports found in the consuming repo:
No {package} imports found in {consuming_repo_path}. This codebase does not appear to use {DS name}. Stage 2b requires a codebase that imports the design system.
Report and stop.
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.
- 11d ago First seen · 263 lines · 0 tokens per session scan A 16ef8384a2c0
2b-usage-analysis is a command published in the GitHub repository vercel-labs/design-systems-to-agent-skills (36 stars, last pushed 4mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,499 tokens. 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 commands, from other repositories
profile
Save, load, inspect, update, reset, or delete diagram-design client profiles.
ui-flow-review
Review menus, HUD, navigation, and player flow from a UX perspective.
ppt-image2-editable-rebuild
Rebuild image2 or imagegen reference slides as editable PowerPoint decks.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
team-ui
Orchestrate UI/UX design team.
p3-ux-wireframes
Creates wireframes (ASCII art) for the most important screens with interaction descriptions.