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-system-component-reusegit 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-system-component-reuse)<a href="https://agentmods.dev/skills/s977043/river-review/design-system-component-reuse"><img src="https://agentmods.dev/badge/skills/s977043/river-review/design-system-component-reuse/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-system-component-reuse"><img src="https://agentmods.dev/badge/skills/s977043/river-review/design-system-component-reuse.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.00067 | $0.01653 |
| Opus 5 | $0.00034 | $0.00826 |
| Sonnet 5 | $0.00013 | $0.00331 |
| Haiku 4.5 | $0.00007 | $0.00165 |
Grade A, and why
Design System Component Reuse Guard 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 / 目的
- 差分が UI プリミティブ（Button / Input / Modal / Card / Badge / Tag / Avatar / Tabs / Dropdown / Tooltip 等）をゼロから再実装していないかを検出する。
- Figma → コード実装時に「既存のデザインシステムコンポーネントを無視してインラインスタイル付き素の HTML 要素を使う」パターンを防ぐ。
- 出力は再実装の疑いと既存コンポーネントのインポート提案を示す。
Non-goals / 扱わないこと
- デザインシステムの実装品質・API 設計の評価。
- Tailwind / CSS Modules など特定のスタイル技術の是非の判断。
- フレームワーク選定や状態管理ライブラリの議論。
- デザインシステム自体の拡張提案（新コンポーネント追加の是非）。
False-positive guards / 抑制条件
- 差分ファイルのパスが
src/components/ui/、src/components/base/、components/ui/、components/base/配下である場合 — これはデザインシステム本体の定義であり指摘しない。 - ファイル名がプリミティブ名そのものの場合（例:
Button.tsx,Input.tsx,Modal.tsx）— 定義ファイル自体は指摘しない。 childrenを受け取り内部で別のコンポーネントへ委譲するラッパーコンポーネント — 指摘しない。- テストファイル（
*.test.tsx,*.spec.tsx）および Storybook ストーリー（*.stories.tsx）— 指摘しない。 - 差分が既存ファイルへの小修正（props 追加 / バグ修正 / スタイル微調整）であり、新たなプリミティブ再実装を含まない場合 — 指摘しない。
Rule / ルール
対象プリミティブと検出ヒューリスティック
差分が以下のパターンに該当し、かつ抑制条件に当てはまらない場合に指摘する:
| プリミティブ | 検出シグナル |
|---|---|
| Button | <button + 3 つ以上の className トークン or style= + クリックハンドラ、かつ Button / Btn コンポーネントが存在しそうな文脈 |
| Input / TextField | <input + カスタムスタイリング（className または style=）、かつ Input / TextField コンポーネントが存在しそうな文脈 |
| Modal / Dialog | position: fixed または z-index の手動管理 + オーバーレイ div でモーダル振る舞いを実装 |
| Card | box-shadow / border-radius 付きの汎用 div で「カード」レイアウトを構成 |
| Badge / Tag | ピル形状スタイル（rounded-full / border-radius: 9999px 等）付きの <span> や <div> |
判定の手がかり
- 新規コンポーネントファイルが追加され、ファイル名がアプリ機能名（例:
SubmitButton.tsx,UserBadge.tsx）でありながら、内部で素の HTML 要素を直接スタイリングしている。 - className に 3 トークン以上のスタイルユーティリティ（Tailwind 等）または
style=属性を持つ素の HTML 要素がコンポーネントのルートになっている。 - 同リポジトリに同名のプリミティブコンポーネント（
Button,Input,Modal等）が存在するはずの構造（components/ui/やlib/components/の存在）が示唆されている。
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.
- eval/promptfoo.yaml 1.6 KB
- fixtures/01-button-reimplemented-happy.md 1.3 KB
- fixtures/02-ui-primitive-definition-false-positive.md 1.4 KB
- golden/01-button-reimplemented-happy.md 630 B
- golden/02-ui-primitive-definition-false-positive.md 360 B
- prompt/system.md 2.8 KB
- prompt/user.md 420 B
- README.md 2.9 KB
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 · 67 tokens per session scan A b45ebca202e5
Design System Component Reuse Guard is a skill published in the GitHub repository s977043/river-review (3 stars, last pushed today), licensed MIT. It adds 67 tokens to every session and 1,653 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…
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".
color-audit
Color-only audit that extracts, evaluates, and recommends improvements for the project's color system. Use when the user asks to audit colors, run a color review or color audit, fix their colors, or work on the color palette or color system.