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 WrongStack/WrongStack --skill design-systemgit clone --depth 1 https://github.com/WrongStack/WrongStackWrote 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/wrongstack/wrongstack/design-system)<a href="https://agentmods.dev/skills/wrongstack/wrongstack/design-system"><img src="https://agentmods.dev/badge/skills/wrongstack/wrongstack/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/wrongstack/wrongstack/design-system"><img src="https://agentmods.dev/badge/skills/wrongstack/wrongstack/design-system.svg" alt="Reviewed on agentmods" width="80" 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.00055 | $0.01554 |
| Opus 5.5 | $0.00022 | $0.00622 |
| Sonnet 5.5 | $0.00011 | $0.00311 |
| Haiku 4.5 | $0.00006 | $0.00155 |
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 3d 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 — 136 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Engine — WrongStack
Selection card
- Task: Define shared colors, typography and component tokens.
- Start: Identify the target surface, reference, user task and existing tokens.
- Finish: apply the acceptance checks below; report observed results and unresolved constraints.
Overview
Build from a real token source and verify the rendered result. Latest web target
checked 2026-10-23: Tailwind CSS 4.3.3 with CSS-first theme variables.
An existing theme is a valid source; Design Studio is a useful system generator,
not a requirement to replace an established design. When DESIGN.md or a
conventional token file (src/index.css, src/theme/theme.ts,
lib/theme/theme.dart and similar) declares at least four colors, Design Studio
names that system instead of dealing kits and checks frontend writes against
it; run capture only for a token source kept at another path.
Rules
- Inspect existing tokens, components, framework, fonts, assets, themes and .design/rules.md. Preserve the user's explicit brief and reference direction.
- For a new system, choose a coherent kit/source before broad styling. Tune semantic roles, type, spacing, radii, elevation and motion together.
- Use real token names from generated/source files. Never guess that a kit exposes a particular utility or that an unimported token file changes the app.
- Keep light/dark or other requested themes on shared semantic roles. Ship the supported themes rather than inventing an unrequested theme migration.
- Token adherence is separate from composition, accessibility and interaction quality. Scanner percentages are not visual or WCAG certificates.
- Treat documented accessibility thresholds accurately; target-size AA/AAA and project touch preferences differ. Preserve keyboard and reduced-motion behavior.
Design Studio loop
For a new kit or authorized migration:
design {action:"deal"}
design {action:"use", kit:"<actual-id>", stack:"web"}
design {action:"tune", tune:{radius:"lg", density:"compact", motion:"snappy"}}
design {action:"materialize"}
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.
- 3d ago Changed · +1 lines 2cac14b58a43
- 5d ago Changed · +5 lines c43cbdf8fab1
- 8d ago Changed · +28 lines c483a32b9d68
- 17d ago Changed 70fb2d196cfe
- 18d ago Changed · -230 lines · -187 tokens per session 0ddc8cdab3f0
- 1mo ago Changed · +11 lines · -6 tokens per session 4ba70d006e48
- 1mo ago Changed 82dd66a2c37a
- 1mo ago First seen · 321 lines · 248 tokens per session scan A 583341d17145
design-system is a skill published in the GitHub repository WrongStack/WrongStack (393 stars, last pushed yesterday), licensed MIT. It adds 55 tokens to every session and 1,554 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-09-03.
Other skills, from other repositories
law-of-figure-ground
Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use von-restorff-effect.
design-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).
design-impact-reporting
Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use metrics-definition (ux-strategy).
motion-system
Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use animation-principles (interaction-design).
navigation-patterns
Select and design a navigation pattern — tabs, drawer, hierarchy, or hub — matched to product structure and user tasks. Use when choosing how users move between sections. For the underlying content structure, use information-architecture (ux-strategy).
onboarding-design
Design the first-run experience — activation path, progressive disclosure, and time to first value. Use for a user's very first session. For the mechanics of the signup form itself, use form-design.