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 nguyenthienthanh/aura-frog --skill design-tokensgit clone --depth 1 https://github.com/nguyenthienthanh/aura-frogWrote 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/nguyenthienthanh/aura-frog/design-tokens)<a href="https://agentmods.dev/skills/nguyenthienthanh/aura-frog/design-tokens"><img src="https://agentmods.dev/badge/skills/nguyenthienthanh/aura-frog/design-tokens/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/nguyenthienthanh/aura-frog/design-tokens"><img src="https://agentmods.dev/badge/skills/nguyenthienthanh/aura-frog/design-tokens.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.00081 | $0.01063 |
| Opus 5 | $0.00041 | $0.00531 |
| Sonnet 5 | $0.00016 | $0.00213 |
| Haiku 4.5 | $0.00008 | $0.00106 |
Grade A, and why
design-tokens 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 11d 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 — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AI-consumed reference. This skill produces tokens;
rules/agent/theme-consistency.mdenforces their use. Generator vs enforcer — do not restate OKLCH logic in the rule or token-usage rules here.
Design Tokens (OKLCH, single-source)
One hue drives the whole system. OKLCH keeps perceptual lightness constant across hues, so derived shades stay legible and dark mode is a lightness flip, not a re-pick.
Derivation (single source: --brand-hue)
- primary
oklch(0.55 0.18 H)· primary-hoveroklch(0.48 0.18 H) - secondary
oklch(0.55 0.07 H)(same hue, low chroma) - muted
oklch(0.55 0.02 H)· borderoklch(0.90 0.01 H) - background/foreground: light =
oklch(0.99 0.005 H)/oklch(0.20 0.02 H); dark = flip →oklch(0.16 0.02 H)/oklch(0.95 0.01 H).
Keep chroma restrained (house style: one dominant hue + sharp accent, no rainbow).
Detect Tailwind v4 vs v3, emit accordingly
- v4 (
@import "tailwindcss"/@themein CSS, notailwind.config.jscolors) → emit an@themeblock. - v3 (
tailwind.config.{js,ts}present) → emit CSS variables + reference them intheme.extend.colors.
Worked example — --brand-hue: 265
Tailwind v4:
@theme {
--color-primary: oklch(0.55 0.18 265);
--color-primary-hover: oklch(0.48 0.18 265);
--color-secondary: oklch(0.55 0.07 265);
--color-muted: oklch(0.55 0.02 265);
--color-border: oklch(0.90 0.01 265);
--color-background: oklch(0.99 0.005 265);
--color-foreground: oklch(0.20 0.02 265);
}
CSS-variables fallback (v3 / no-Tailwind), with dark mode:
:root {
--brand-hue: 265;
--primary: oklch(0.55 0.18 var(--brand-hue));
--background: oklch(0.99 0.005 var(--brand-hue));
--foreground: oklch(0.20 0.02 var(--brand-hue));
--border: oklch(0.90 0.01 var(--brand-hue));
}
.dark {
--background: oklch(0.16 0.02 var(--brand-hue));
--foreground: oklch(0.95 0.01 var(--brand-hue));
--border: oklch(0.30 0.02 var(--brand-hue));
}
Change --brand-hue alone to re-skin the entire product.
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.
- 11d ago First seen · 65 lines · 81 tokens per session scan A 9c62c1f4be71
design-tokens is a skill published in the GitHub repository nguyenthienthanh/aura-frog (24 stars, last pushed 7d ago), licensed MIT. It adds 81 tokens to every session and 1,063 once invoked, about $0.0004 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-30.
Other skills, from other repositories
gsd-sketch
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode).
gsd-ui-phase
Generate UI design contract (UI-SPEC.md) for frontend phases.
gsd-ui-review
Retroactive 6-pillar visual audit of implemented frontend code.
userinterface-wiki
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
team-ui
Orchestrate the UI team through the full UX pipeline: from UX spec authoring through visual design, implementation, review, and polish. Integrates with /ux-design, /ux-review, and studio UX templates.
mockup-extraction
Extract reusable components from approved HTML mockups during implementation. Identifies patterns, maps CSS to Tailwind, and populates prototype-patterns.md for visual fidelity. Use at start of /implement for UI-first features.