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 TimboGP/timbogp-marketplace --skill design-tokensgit clone --depth 1 https://github.com/TimboGP/timbogp-marketplaceWrote 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/timbogp/timbogp-marketplace/design-tokens)<a href="https://agentmods.dev/skills/timbogp/timbogp-marketplace/design-tokens"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/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/timbogp/timbogp-marketplace/design-tokens"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/design-tokens.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.00098 | $0.01750 |
| Opus 5 | $0.00049 | $0.00875 |
| Sonnet 5 | $0.00020 | $0.00350 |
| Haiku 4.5 | $0.00010 | $0.00175 |
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 12d 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 — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Tokens
Establish a coherent, themeable design token foundation — or migrate an existing codebase of hardcoded values onto one — adapted to whatever stack the project already uses. Tokens are the contract every other UX skill builds on: components should reference token names, never raw values.
When to use
Reach for this skill when the request resembles:
- "set up design tokens" / "create a design system foundation"
- "extract these hardcoded colors into tokens" / "replace these hex codes"
- "add a type scale" / "give me a modular scale"
- "theming setup" / "support multiple brands"
- "dark mode tokens" / "add a dark theme"
Two operating modes share most of the workflow:
- Scaffold — no token system exists; create one from the starter assets.
- Migration — values are hardcoded across the codebase; introduce tokens and replace usages incrementally.
Step 1 — Detect the stack
Before generating anything, READ
../ux-foundations/references/stack-detection.md
and run the procedure. Do not duplicate it here. Hold the resulting decisions:
framework = react | vue | svelte | angular | vanilla
styling = tailwind | css-in-js | css-modules | sass | vanilla-css
tokenFormat = <per stack-detection §3>
language = ts | js
Report the detection in one line, then proceed. Extend any existing token names rather than inventing a parallel set.
Step 2 — Define token categories
Design the full set up front so categories stay consistent. Use the starter assets as the baseline and adjust values to the project's brand.
- Color — use semantic layering. Keep a small primitive palette (a
neutral ramp plus a brand ramp). Never expose primitives to components. Map
them to semantic roles:
--color-bg,--color-surface,--color-fg,--color-muted-fg,--color-primary,--color-primary-fg,--color-border, and state colors (--color-success,--color-warning,--color-danger) each with a readable foreground variant. Verify contrast of every fg/bg pair (seescripts/contrast-check.mjs) before shipping — semantic roles are promises about legibility. - Type scale — a modular scale (
--font-size-xs…--font-size-3xl) in rem. Generate withscripts/type-scale.mjs. - Spacing scale — a 4px-based ramp (
--space-1…--space-12). - Radius —
--radius-sm/md/lg/full. - Shadow / elevation —
--shadow-sm/md/lg. - Motion — durations (
--duration-fast/base/slow) and easings (--ease-standard,--ease-emphasized). - Z-index — a few named layers (dropdown, modal, etc.).
- Breakpoints — named min-widths for responsive logic.
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.
- 12d ago First seen · 147 lines · 98 tokens per session scan A ed61ebc55178
design-tokens is a skill published in the GitHub repository TimboGP/timbogp-marketplace (3 stars, last pushed 2mo ago), licensed MIT. It adds 98 tokens to every session and 1,750 once invoked, about $0.0005 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-31.
Other skills, from other repositories
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…
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
fec-ui-design
A frontend UI design guide for creating or reviewing product-specific interfaces, including layout, visual style, design systems, interaction states, responsive behavior, charts, and visual quality checks. It adapts the design to the product's users and main task.
fec-tailwind-design-system
A guide to organizing a Tailwind CSS design system: the shared rules for colors, spacing, themes, components, and responsive layouts.