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 codebygarv/Ai-skills --skill design-system-guardiangit clone --depth 1 https://github.com/codebygarv/Ai-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/codebygarv/ai-skills/design-system-guardian)<a href="https://agentmods.dev/skills/codebygarv/ai-skills/design-system-guardian"><img src="https://agentmods.dev/badge/skills/codebygarv/ai-skills/design-system-guardian/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/codebygarv/ai-skills/design-system-guardian"><img src="https://agentmods.dev/badge/skills/codebygarv/ai-skills/design-system-guardian.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.00049 | $0.00654 |
| Opus 5 | $0.00024 | $0.00327 |
| Sonnet 5 | $0.00010 | $0.00131 |
| Haiku 4.5 | $0.00005 | $0.00065 |
Grade A, and why
design-system-guardian 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 — 38 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Purpose
Catch places where UI code uses raw/hardcoded values (hex colors, pixel spacing, arbitrary font sizes) instead of the project's established design tokens — the specific class of consistency drift that causes a design system to slowly stop being followed.
When to Use
- The project has an established design-token system (CSS variables, a theme object, Tailwind config, etc.) and you want to check code against it.
- Reviewing new UI code for token compliance before merge.
- Auditing an existing codebase for accumulated token drift.
Requires knowing (or being told, or being able to find) the project's actual token set — this skill checks against an existing system, it doesn't invent one from scratch (for that, see UI Auditor for general consistency without an established token baseline).
What to Analyze
- Color — hardcoded hex/rgb/named colors where a color token exists for that exact or a near-identical value.
- Spacing — raw pixel/rem margin/padding/gap values that don't align to the token scale (e.g.
13pxwhen the scale is 4/8/12/16/24/32). - Typography — arbitrary
font-size/font-weight/line-heightcombinations instead of defined type-scale tokens or text style components. - Sizing — hardcoded widths/heights/border-radius that duplicate an existing token (e.g. a one-off
border-radius: 6pxwhen the system definesradius.md: 8px). - Shadows/elevation — custom
box-shadowvalues where an elevation token exists. - Near-misses — values close to but not equal to a token (
15pxvs. token16px) — these are often unintentional and worth flagging even more than obviously-custom values.
Output Format
- Each finding: the raw value used, its file/line, the matching (or closest) token it should be replaced with, and the token's actual name/variable in this project's system.
- Group by category (Color, Spacing, Typography, Sizing, Shadow).
- If a value has no reasonably close token, say so explicitly rather than forcing a mismatched token onto it — that's a signal the token system may need a new token, not that the code is wrong.
What ships with it
2 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 · 38 lines · 49 tokens per session scan A 7e959a5b407a
design-system-guardian is a skill published in the GitHub repository codebygarv/Ai-skills (25 stars, last pushed 20d ago), licensed MIT. It adds 49 tokens to every session and 654 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
super-design
Use when the user asks you to build, style, theme, refine, audit, or recreate UI — or uploads a screenshot to rebuild. Reads DESIGN.md as a closed token layer, detects the project's framework (Tailwind v4/v3, ShadCN, MUI, Radix, Geist), and enforces production design rules (tokens only, full state matrix, WCAG 2.2 AA…
ds-frontend
Frontend design quality — design-system audit, token enforcement, component states, accessibility, responsive layout, theming. Use when building or reviewing UI for design consistency, a11y, or responsiveness.
premium-hero-builder
Build premium, dark-themed hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, editorial typography, and pixel-perfect specifications. Based on the Viktor Oddy methodology of detailed design prompts that produce agency-quality results from AI code generation. Use when building hero…
web-ui-ux
Web UI/UX specialist guidance for designing, reviewing, and polishing web product UI (layout, usability, microcopy, accessibility, responsive behavior, forms, navigation). Use when asked to improve UI/UX, audit a page, design a screen, create a component spec, or generate HTML head/manifest/icon guidance for a web…
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…