| id | design-source-conformance |
| name | Design Source-of-Truth Conformance デザイン定義準拠 |
| description | リポジトリに DESIGN.md やデザイントークン定義が存在する場合に、新規 UI 実装の色・余白・フォントサイズ・角丸・シャドウがその定義済みスケールに準拠しているかを照合する。定義が無ければ実行しない |
| 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 | ["design-system","design-source","conformance","midstream"] |
| severity | minor |
| inputContext | ["diff"] |
| outputKind | ["findings","questions"] |
| modelHint | balanced |
| dependencies | ["code_search"] |
Pattern declaration
Primary pattern: Reviewer
Secondary patterns: Inversion
Why: 定義済みスケールとの照合は決定論で判定できる部分が大きいが、まず参照すべきデザイン定義(DESIGN.md / トークン)の所在を grep で特定する必要がある。定義が無ければ実行を止めるゲートが必要。
Goal / 目的
- リポジトリにデザイン定義のソース(
DESIGN.md / design-tokens.* / tailwind.config.* の theme / CSS custom properties など)が存在する場合に、新規 UI 実装の値がその定義済みスケールに準拠しているかを照合する。
- 「トークンは存在するのに、定義外のスケール(例: spacing が 4/8/12 と定義されているのに
10px)を新規導入した」逸脱を検出する。
Non-goals / 扱わないこと
- デザイン定義が存在しないリポジトリでの生値ハードコード検出(
design-token-enforcement の領域。本スキルは定義との照合に限定する)。
- 既存コンポーネントの再利用可否(
design-system-component-reuse の領域)。
- アクセシビリティやインタラクティブ状態(a11y / loading-state 系の領域)。
Pre-execution Gate / 実行前ゲート
このスキルは以下の条件がすべて満たされない限り NO_REVIEW を返す。
ゲート不成立時の出力: NO_REVIEW: design-source-conformance — 参照すべきデザイン定義または UI 値の変更が検出されない
False-positive guards / 抑制条件
- デザイン定義が grep で見つからない場合は指摘しない(生値検出は token-enforcement に委ねる)。
- 定義済みスケールに含まれる値は指摘しない(準拠している実装は対象外)。
- 定義からの逸脱が差分内で根拠とともに明記されている場合は抑制する(意図的な例外)。
- スケール外でも、定義が明示的に任意値を許容している領域は対象外とする。
Rule / ルール
検出ロジック
- 定義の特定:
code_search でデザイン定義のソースを特定し、色・余白・フォントサイズ・角丸・シャドウの定義済みスケールを読み取る。
- 値の照合: 差分の新規 UI 値が、定義済みスケールに含まれるか照合する。含まれない値(off-scale)を逸脱候補とする。
- 報告: 逸脱値と参照した定義箇所を両方
<file>:<line> で示し、最も近い定義済みスケール値への置き換えを提案する。
制約
- 検出は最大 5 件。スケール逸脱の影響が大きいもの(広く使われる色・余白)を優先する。
- 各指摘に「逸脱値」「参照した定義」「準拠候補」を必ず含める。
- 定義の読み取りは grep で再現可能にする(検索語を明示する)。
Evidence / 根拠の取り方
- 逸脱値と参照定義は両方 に紐づけ、推測でスケールを述べない。