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 stefan-stepzero/shipkit --skill shipkit-design-systemgit clone --depth 1 https://github.com/stefan-stepzero/shipkitWrote 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/stefan-stepzero/shipkit/shipkit-design-system)<a href="https://agentmods.dev/skills/stefan-stepzero/shipkit/shipkit-design-system"><img src="https://agentmods.dev/badge/skills/stefan-stepzero/shipkit/shipkit-design-system/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/skills/stefan-stepzero/shipkit/shipkit-design-system"><img src="https://agentmods.dev/badge/skills/stefan-stepzero/shipkit/shipkit-design-system.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.00046 | $0.03707 |
| Opus 5.5 | $0.00018 | $0.01483 |
| Sonnet 5.5 | $0.00009 | $0.00741 |
| Haiku 4.5 | $0.00005 | $0.00371 |
Grade A, and why
shipkit-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 1mo 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 — 350 lines — stays where its author put it; the contents beside it link to each section on GitHub.
shipkit-design-system — Tiered Design System
Synthesizes design direction from upstream project context and scaffolds a design system that grows with the product — from tokens + principles on day 1 to a governed component library at maturity.
Combines two approaches:
- Creative direction (inspired by Anthropic's frontend-design plugin) — opinionated aesthetic guidance, but derived from YOUR project context instead of generic defaults
- Structural scaffolding (from the maturity-tiered model) — principles, tokens, maturity tracking that persist across sessions
When to Invoke
User triggers:
- "Set up design system", "Design tokens", "Brand guidelines"
- "Visual direction", "Design principles", "How should this look?"
Workflow position:
- After
/shipkit-engineering-definition(needs stack direction, component structure) - Before
/shipkit-product-goalsand/shipkit-engineering-goals(goals can reference design criteria) - Also useful standalone at any point for projects with UI
Prerequisites
Required (fail gracefully if missing):
.shipkit/why.json— vision, tone, brand identity (drives principles and direction)
Recommended (enrich the output):
.shipkit/product-discovery.json— personas, accessibility needs.shipkit/product-definition.json— features, UX patterns.shipkit/engineering-definition.json— stack direction, component structure.shipkit/goals/strategic.json— project stage
Optional:
.shipkit/stack.json— tech stack (token format detection).shipkit/codebase-index.json— existing code patterns
If why.json is missing, tell the user: "Run /shipkit-why-project first — I need to understand the project vision to derive design direction." and stop.
Process
Completion Tracking
After reading prerequisites, create tasks:
TaskCreate: "Synthesize design direction from project context"TaskCreate: "Generate 3-5 verb-based design principles"TaskCreate: "Scaffold token file (CSS or Tailwind)"TaskCreate: "Write MATURITY.md and DIRECTION.md"TaskCreate: "Update architecture.json with designSystem section"
What ships with it
3 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.
- 1mo ago First seen · 350 lines · 46 tokens per session scan A 6e57c09c1827
shipkit-design-system is a skill published in the GitHub repository stefan-stepzero/shipkit (1 stars, last pushed 3mo ago), licensed MIT. It adds 46 tokens to every session and 3,707 once invoked, about $0.0002 per session on Opus 5.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
information-architecture
Map the user journey first, then derive the screen inventory, navigation and hierarchy from it, flagging any screen that serves no journey step. Writes the four-part markdown plus an HTML diagram of the step-to-screen mapping. Use after the brief is settled and before tokens or UI.
design-tokens
Establish color, typography, spacing, radius and motion as named role-based tokens. Use before building any interface.
heuristic-evaluation
Audit a design against Nielsen's ten usability heuristics, tying every finding to a specific element with a specific fix. Use on a built screen or a detailed mockup.
persona-acid-test
Stress-test a design through three lenses, confused user, skeptical engineer and impatient PM, before it goes to a stakeholder. Requires an actual design, an HTML file, Figma link or screenshot.
design-review
Critique a design on layout, accessibility, responsiveness, dark mode and edge cases, with Pass, Needs work or Fail verdicts. Use on a built screen.
design-brief
Turn an interrogated brief into the single source of truth for a design project. Use after /grill-me, before any IA or UI work.