Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/event4u-app/agent-confignpx agentmods add skills/event4u-app/agent-config/design-system-captureWrote 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/event4u-app/agent-config/design-system-capture)<a href="https://agentmods.dev/skills/event4u-app/agent-config/design-system-capture"><img src="https://agentmods.dev/badge/skills/event4u-app/agent-config/design-system-capture.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00034 | $0.03409 |
| Opus 5 | $0.00017 | $0.01705 |
| Sonnet 5 | $0.00007 | $0.00682 |
| Haiku 4.5 | $0.00003 | $0.00341 |
Grade A, and why
design-system-capture 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 5d 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 — 344 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-system-capture
Solves "design amnesia" — the failure mode where every AI design task re-invents visual patterns (radius, shadows, motion, spacing) and interaction patterns (destructive-action handling, optimistic UI, filter persistence) because the agent has no cross-task memory of decisions already made.
Boundary:
brand-to-tokensextracts primitives (colors, font families → DTCG tokens).existing-ui-auditinventories what exists. This skill captures usage decisions: "we use 8px radius for elevated surfaces", "all destructive actions require typed confirmation". They are complementary, not redundant.Gated by
tokens.rich_skillsin.agent-settings.yml(defaulton). Ifoff, skip rich context loading and work from brief alone.
Why this skill is rich
DESIGN.md and PRODUCT.md serve as the project's design memory. To write useful capture documents and to read/apply them effectively, the agent needs full templates with worked examples showing what a well-structured DESIGN.md and PRODUCT.md look like in practice. A condensed version that says "write down your design decisions" produces documents too vague to be useful. The worked examples teach agents both the vocabulary (elevation, motion strategy, destructive-action policy) and the specificity level that makes these documents actionable across tasks.
When to use
- Starting a new consumer project (initial capture, run once early)
- After 2+ design tasks in the same project (update to capture what was decided)
- When a subsequent design task produces inconsistent results (audit and reconcile)
- Explicitly asked: "capture the design system", "write a DESIGN.md", "document our patterns"
The two documents
DESIGN.md — visual-system decisions
Captures the visual usage decisions (not token primitives) that agents
should apply consistently across all UI tasks in this project. Unlike
.tokens.json (which records what a color value IS), DESIGN.md records
how and when to use it.
What ships with it
4 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.
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.
- 5d ago First seen · 344 lines · 34 tokens per session scan A 4a218805ea95
design-system-capture is a skill published in the GitHub repository event4u-app/agent-config (10 stars, last pushed today), licensed MIT. It adds 34 tokens to every session and 3,409 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
save-progress
Save current project task progress to local task state file for cross-session continuity. Use when the user asks to save progress, uses an equivalent localized trigger phrase, the session is interrupted, or the user wants to resume work later. Writes to .claude/project-task-state.json so next session can load it via…
chen-yun-demo
A personal digital-memory assistant based on Chen Yun's design methods, communication style, experiences, and values. It is intended for personal backup and recall, not for pretending to be Chen Yun to other people.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
muapi-url-to-design
Analyze a website URL and generate a redesigned, improved UI — recreate the visual design with modern aesthetics, better hierarchy, and fresh brand direction.
daily-journal
A passive daily work journal that Claude keeps FOR you so you never have to write it yourself. Append short entries after meaningful work (what was done, what you focused on, artifacts touched) to 01-daily/journal/YYYY-MM-DD.md. Run a guided reflection at night or in the morning. Use when you run /daily-journal, say…
grid
When the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid." For cards layout, use card.