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/port)<a href="https://agentmods.dev/commands/vercel-labs/design-systems-to-agent-skills/port"><img src="https://agentmods.dev/badge/commands/vercel-labs/design-systems-to-agent-skills/port/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/port"><img src="https://agentmods.dev/badge/commands/vercel-labs/design-systems-to-agent-skills/port.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.01071 |
| Opus 5 | $0.00000 | $0.00535 |
| Sonnet 5 | $0.00000 | $0.00214 |
| Haiku 4.5 | $0.00000 | $0.00107 |
Grade A, and why
port 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 12d 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 — 112 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Port: Deploy Skill to Target Codebase
Required Capabilities
- File read/write
- Shell command execution (cp, directory creation)
- User interaction (for import path reconciliation)
Objective
Port a generated skill to a target codebase. This command runs in the target repo and takes the skill source path as an argument.
This is a post-pipeline utility — not a numbered stage. It runs after Stages 1–6 have produced and verified a skill in the pipeline repo, and deploys that skill to a consuming codebase.
Process
Step 1: Discover target conventions
Read the target codebase to understand its conventions. Check for:
-
Skill directory location — which of these exists?
.claude/skills/.agents/skills/.opencode/skills/.opencode/commands/- Other (ask user)
-
Settings file format — check
.claude/settings.jsonfor existingSkill()entries in thepermissions.allowarray. Note the pattern used. -
Frontmatter pattern — read any existing SKILL.md files in the target's skill directory. Note:
- Required YAML fields (
name,description, others?) - Field format (single-line vs multi-line
description) - Any additional metadata fields
- Required YAML fields (
-
Import convention discovery — search the target codebase for existing imports from the design system package:
grep -rn "from ['\"]@{package}" --include="*.tsx" --include="*.ts" | head -20Note whether the target uses:
- Barrel imports (
from '@package') vs deep imports (from '@package/components/button') - Named exports vs default exports
- Any re-export patterns or local wrappers
- Barrel imports (
Report all findings before proceeding.
Step 2: Reconcile differences
Compare the generated skill's conventions with the target's conventions:
- Frontmatter: If the target uses different or additional frontmatter fields, note what needs to change. Adapt the copy (never modify the source).
- Import paths: If the target uses different import patterns than what the skill documents, REPORT the differences and ASK the user. Never auto-replace import paths — they were verified from source code in Stage 2. The target may have a wrapper, a re-export, or a different package version.
- Export styles: If the target uses default exports where the skill documents named exports (or vice versa), report the difference.
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.
- 12d ago First seen · 112 lines · 0 tokens per session scan A 38b80dc4e381
port is a command published in the GitHub repository vercel-labs/design-systems-to-agent-skills (37 stars, last pushed 4mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,071 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
checklist
Generate a custom checklist for the current feature based on user requirements.
clarify
Identify underspecified areas in the current feature spec by asking up to 5 highly targeted clarification questions and encoding answers back into the spec.
specify
Create or update the feature specification from a natural language feature description.
analyze
Perform a non-destructive cross-artifact consistency and quality analysis across spec.md, plan.md, and tasks.md after task generation.
converge
Assess the current codebase against the feature's spec, plan, and tasks, then append any remaining unbuilt work as new tasks to tasks.md so implement can complete it.
implement
Execute the implementation plan by processing and executing all tasks defined in tasks.md.