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 tailwind-class-hygienegit 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/tailwind-class-hygiene)<a href="https://agentmods.dev/skills/s977043/river-review/tailwind-class-hygiene"><img src="https://agentmods.dev/badge/skills/s977043/river-review/tailwind-class-hygiene/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/tailwind-class-hygiene"><img src="https://agentmods.dev/badge/skills/s977043/river-review/tailwind-class-hygiene.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.00048 | $0.01375 |
| Opus 5 | $0.00024 | $0.00687 |
| Sonnet 5 | $0.00010 | $0.00275 |
| Haiku 4.5 | $0.00005 | $0.00137 |
Grade A, and why
Tailwind CSS Class Hygiene Review 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 6d 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 — 75 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Pattern declaration
Primary pattern: Reviewer Secondary patterns: Inversion Why: Tailwind の utility class 構文（arbitrary value / クラス競合）をチェックリスト型で検査し、診断材料が無ければゲートで止める。
Goal / 目的
- スケール/トークンを迂回する任意値（
w-[437px]mt-[13px]text-[#1a2b3c]等）の濫用を検出し、テーマのスペーシング/カラースケールへの寄せを促す。 - 同一要素に併存する競合・重複ユーティリティ（
px-2 px-4、flex block、mt-2 mt-4等、互いに打ち消すクラス）を検出する。 - デザイントークン（
bg-white/ theme color）で表現すべき色の任意カラー直書き（bg-[#fff]等）を検出する。
Non-goals / 扱わないこと
- デザイントークン体系全般の是非（命名・粒度・採用方針）は
design-token-enforcementのスコープ。本スキルは Tailwind の utility class 構文レベルの衛生に限定する。 - Tailwind か素の CSS かといった採用技術の選定。
- レスポンシブ/状態 variant（
md:hover:等）の設計妥当性。
Pre-execution Gate / 実行前ゲート
このスキルは以下の条件がすべて満たされない限りNO_REVIEWを返す。
- 差分に
className/classへの Tailwind utility の追加・変更が含まれている - diff コンテキストが利用可能である
ゲート不成立時の出力: NO_REVIEW: tailwind-class-hygiene — className/class への Tailwind utility 変更なし
False-positive guards / 抑制条件
- 設計上スケール外が必要な正当ケース（例: 1px ボーダー
border-[0.5px]、外部デザイン由来の固定値でtheme.extend済み等）で、コメントによる正当化または theme 拡張が確認できる場合は指摘しない。 - 動的クラス（テンプレートリテラル内で実行時計算される値、例:
w-[${width}px]）は別スコープとして扱い、静的な任意値と同列に断定しない（慎重に、必要なら質問に留める）。 - theme に存在しない CSS（grid template など）を表現する arbitrary value が公式に推奨される稀なケースは、断定せず質問に留める。
- 同一クラスに見えても variant prefix が異なる場合（
px-2 md:px-4等）は競合ではないため指摘しない。
Rule / ルール
- 任意値（
[...]）でスケール/トークンに対応物がある値（スペーシング・サイズ・カラー）を直書きしている場合は、theme のスケール/トークンへ寄せる修正を提案する。 - 同一要素の同一プロパティに作用する複数ユーティリティが併存（
px-2 px-4、mt-2 mt-4、flex block等）し、後勝ちで前者が無効化される場合は重複/競合として指摘する。 - 任意カラー直書き（
bg-[#fff]text-[#000]等）でデザイントークン（bg-white/ theme color）に対応物がある場合はトークン利用を提案する。 - "nit" を濫発しない。明確に theme で代替できるものに絞り、判断が割れるものは質問に留める。
Evidence / 根拠の取り方
- 指摘は
<file>:<line>で差分に紐づけ、どのクラスが問題か（任意値 / 競合 / 任意カラー）を 1 行で添える。 - theme 対応物の有無が diff だけで確証できない場合は断定せず「可能性」として書く。
Output / 出力（短文版の推奨）
コメントは日本語で返す。
- Finding: どのクラス衛生に反しているか（任意値濫用 / 競合 / 任意カラー、1文）
- Impact: スケール逸脱で一貫性低下 / 後勝ちで意図しない値 / トークン迂回で一括変更不能 等
- Fix: theme スケール（
w-系）/ 競合解消（片方削除）/ トークン（bg-white等）への最小修正案
What ships with it
3 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.
- 6d ago First seen · 75 lines · 48 tokens per session scan A 3fb886930682
Tailwind CSS Class Hygiene Review is a skill published in the GitHub repository s977043/river-review (3 stars, last pushed today), licensed MIT. It adds 48 tokens to every session and 1,375 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
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
absolute-ui
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and…
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.
theme-builder
Build a light/dark theme from scratch or improve an existing one, with a complete surface, text, and interactive color system. Use when the user asks to build or create a theme, use the theme builder, or set up a light and dark theme.
layout-audit
Layout and spacing audit covering grid, spacing consistency, density, and responsive behavior. Use when the user asks to audit the layout, run a layout audit or grid audit, review spacing, or fix their spacing.
type-audit
Typography-only audit covering font selection, type scale, readability, hierarchy, and performance. Use when the user asks to audit typography, run a typography or type audit, review fonts, fix their fonts, or work on the type system.