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 skills add coroboros/agent-skills --skill design-systemgit clone --depth 1 https://github.com/coroboros/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/skills/coroboros/agent-skills/design-system)<a href="https://agentmods.dev/skills/coroboros/agent-skills/design-system"><img src="https://agentmods.dev/badge/skills/coroboros/agent-skills/design-system.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.1 | $0.00061 | $0.04427 |
| Opus 5 | $0.00030 | $0.02214 |
| Sonnet 5 | $0.00012 | $0.00885 |
| Haiku 4.5 | $0.00006 | $0.00443 |
Grade A, and why
design-system 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 today.
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 — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System
Two modes for governing a project's visual identity:
- Auto-activate — when editing UI files (components, pages, layouts, styles,
DESIGN.md,tailwind.config.*) and aDESIGN.mdis present, the skill reads it first and enforces token-only sourcing for colors, typography, spacing, and corner radius. NoDESIGN.md? It stays out of the way — a one-line pointer to/award-designor/frontend-dev, no enforcement, no block on the edit. - Subcommands —
/design-system <verb> [path]exposes the full DESIGN.md lifecycle, built on the canonical@google/design.mdCLI.
Subcommand routing
Parse the first positional invocation argument. If it matches a verb below, load the referenced file and follow its workflow. Otherwise proceed with the token-enforcement workflow at the end of this document.
| First token | Mode | Reference |
|---|---|---|
audit (aliases: check, lint) |
Lint + fix proposals, human-readable report | references/subcommand-audit.md |
diff |
Regression check between versions (git-aware) | references/subcommand-diff.md |
export |
Tokens → Tailwind theme or W3C DTCG tokens.json |
references/subcommand-export.md |
spec |
Emit the canonical spec from the installed CLI | references/subcommand-spec.md |
migrate |
Port legacy Stitch 9-section DESIGN.md → Google standard | references/subcommand-migrate.md |
init |
Scaffold a minimal valid DESIGN.md (fallback from /award-design) |
references/subcommand-init.md |
audit-extensions |
Bidirectional drift check — DESIGN.md extension YAML ↔ prose refs ↔ globals.css @theme |
references/subcommand-audit-extensions.md |
| (none, or a UI file path) | Token enforcement — see the default workflow at the end | (this file) |
Source of truth
When a DESIGN.md exists at the project root, read it before writing any UI code: every color, font, spacing value, corner radius, and component style comes from this file — the YAML frontmatter tokens (normative values) or the prose explaining when and why to apply them.
What ships with it
21 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 7.2 KB
- references/cli-reference.md 9.0 KB
- references/design-md-spec.md 11 KB
- references/example-claude.md 9.9 KB
- references/example-stripe.md 10 KB
- references/extended-tokens.md 11 KB
- references/subcommand-audit-extensions.md 7.8 KB
- references/subcommand-audit.md 14 KB
- references/subcommand-diff.md 4.8 KB
- references/subcommand-export.md 6.0 KB
- references/subcommand-init.md 7.0 KB
- references/subcommand-migrate.md 8.2 KB
- references/subcommand-spec.md 3.4 KB
- scripts/audit_extensions.py 12 KB runs code
- scripts/audit-extensions.sh 840 B runs code
- scripts/audit.sh 2.1 KB runs code
- scripts/designmd-runtime.sh 732 B runs code
- scripts/diff.sh 2.4 KB runs code
- scripts/export.sh 2.5 KB runs code
- scripts/spec.sh 2.4 KB runs code
- scripts/validate-output.py 8.2 KB runs code
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.
- today Changed · -1 lines · -27 tokens per session 81e750731fe5
- 5d ago Changed b7897c1947ff
- 8d ago First seen · 202 lines · 88 tokens per session scan A 564e458debdf
design-system is a skill published in the GitHub repository coroboros/agent-skills (4 stars, last pushed yesterday), licensed MIT. It adds 61 tokens to every session and 4,427 once invoked, about $0.0003 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-31.
Other skills, from other repositories
animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
brand-identity
Voice framework, visual identity standards, color palette management, typography specs, brand consistency.
accessibility-patterns
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization.
component-library-patterns
Design system token management, component API design, Storybook, and visual regression testing patterns.
ux-audit
Walk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss. REQUIRES proof of interaction (typing, clicking, sending, observing) before any verdict — a sweep that didn't interact terminates with verdict 'Incomplete'. Walks threads, exercises every element, runs the…
excalidraw-architecture
Trigger when the user asks for an architecture diagram, says "draw the system", "update the architecture diagram", "give me an excalidraw of this codebase", or "/excalidraw-architecture". Generates or updates an Excalidraw JSON file at docs/architecture.excalidraw by reading the codebase's key entry points.