design-token-enforcement

id	design-token-enforcement
name	Design Token Enforcement
description	デザイントークンを使わずに直書きされた色・余白・フォントサイズ・角丸・シャドウを検出する。Figma Variables / Tailwind config / CSS custom properties のルールに違反する実装を指摘する。
version	0.1.0
category	midstream
phase	midstream
applyTo	["src/**/*.{ts,tsx,js,jsx,css,scss}","app/**/*.{ts,tsx,js,jsx,css,scss}","components/**/*.{ts,tsx,js,jsx,css,scss}"]
tags	["community","design-system","tokens","ui","midstream"]
severity	minor
inputContext	["diff"]
outputKind	["findings","actions"]
modelHint	balanced

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 内でフォントサイズを生値で記述している場合は違反。