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 s977043/river-review --skill design-token-enforcementgit clone --depth 1 https://github.com/s977043/river-reviewWrote 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/s977043/river-review/design-token-enforcement)<a href="https://agentmods.dev/skills/s977043/river-review/design-token-enforcement"><img src="https://agentmods.dev/badge/skills/s977043/river-review/design-token-enforcement/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/s977043/river-review/design-token-enforcement"><img src="https://agentmods.dev/badge/skills/s977043/river-review/design-token-enforcement.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.00063 | $0.01535 |
| Opus 5 | $0.00032 | $0.00767 |
| Sonnet 5 | $0.00013 | $0.00307 |
| Haiku 4.5 | $0.00006 | $0.00153 |
Grade A, and why
Design Token Enforcement 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 7d 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Goal / 目的
- フロントエンド差分においてデザイントークンを使わず生の値をハードコードしている箇所を検出する。
- Figma Variables / Tailwind config / CSS custom properties などトークンシステムが存在するプロジェクトで、規約違反の実装を早期に指摘する。
- 「直し方」まで提示し、修正コストを最小化する。
Non-goals / 扱わないこと
- デザイントークンシステム自体の設計・命名規則の議論。
- Figma ファイルと実装の完全な同期チェック（別の CI/CD 統合が担う領域）。
- トークンの意味論的な正しさ（例: セマンティックトークン vs プリミティブトークン）の判定。
- テストファイル・Storybook ファイルの厳密なチェック（警告のみ）。
False-positive guards / 抑制条件
- Tailwind ユーティリティクラス (
bg-blue-500,p-4,text-sm,rounded-lgなど) はトークンシステムの一部であるため指摘しない。 - CSS カスタムプロパティの参照 (
var(--color-primary),var(--spacing-md)) は違反ではない。 - Tailwind の
theme()関数 / トークン参照関数 (tokens.spacing.md,theme('colors.primary')) は違反ではない。 - テンプレートリテラル内に変数を含むインラインスタイル (
style={{ color: `${brandColor}` }}) は動的計算の可能性があるため "uncertain" として示す（finding ではない）。 - テストファイル (
*.test.tsx,*.spec.tsx,*.stories.tsx) は lenient モードで扱い、明確な問題のみ指摘する。 0/100%/transparent/inherit/currentColorなどの CSS 予約値はトークン違反としない。
Rules / ルール
1. 色のハードコード
- className / style prop / CSS / SCSS に
#XXXXXX,#XXX,rgb(...),rgba(...),hsl(...),hsla(...)を生で書いている場合は違反。 - 例:
style={{ color: '#3B82F6' }},background-color: rgb(59, 130, 246)
2. Tailwind 任意値による余白のハードコード
- Tailwind の arbitrary values (
p-[16px],gap-[8px],mt-[24px],mx-[1.5rem]など) は、Tailwind config / デザイントークンに対応するスケール値がある場合に違反。 p-4/gap-2などの標準クラスへの置き換えを提案する。
3. フォントサイズのハードコード
style={{ fontSize: '14px' }},font-size: 14px,fontSize: 14など style prop / CSS 内でフォントサイズを生値で記述している場合は違反。
4. 角丸のハードコード
style={{ borderRadius: '8px' }},border-radius: 8px,rounded-[8px]などを生値で記述している場合は違反。
5. ボックスシャドウのハードコード
style={{ boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }},box-shadow: 0 4px 6px -1px ...などを生値で記述している場合は違反。
Evidence / 根拠の取り方
- 差分のコードを引用し、どの行・どの値がトークン違反かを明示する。
- 可能であれば対応するトークン名 / Tailwind クラス / CSS カスタムプロパティの候補を 1 つ提示する。
- プロジェクトに
tailwind.config.*やtokens.tsなどが見える場合はそれを参照する旨を示す。
Output / 出力
Finding:何が違反か（具体的な値の種類）Evidence:ファイル名:行 — コードスニペットTokenSuggestion:置き換え候補のトークン / クラス / CSS カスタムプロパティSeverity:minor固定Confidence:事実確認 =high/ 文脈が必要 =medium/ 動的計算の可能性あり =low
What ships with it
8 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.
- 7d ago First seen · 90 lines · 63 tokens per session scan A b24a93b944f2
Design Token Enforcement is a skill published in the GitHub repository s977043/river-review (3 stars, last pushed today), licensed MIT. It adds 63 tokens to every session and 1,535 once invoked, about $0.0003 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
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
design-to-code-check
Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…
hatch3r-design-system-detect
Detects existing design tokens, component library, and theming convention in a project before authoring new UI primitives — output a concise inventory for downstream implementers.
design-with-claude
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and…
stitch-extract-design-md
Extract a Stitch-compatible DESIGN.md from frontend source code, stylesheets, Tailwind config, theme files, and component patterns.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", or "vs best practices".