design-system-component-reuse-guard

id	design-system-component-reuse
name	Design System Component Reuse Guard
description	既存デザインシステムコンポーネント（Button / Input / Modal / Card 等）を再実装していないかを検出する。Figma→コード実装時に既存コンポーネントを無視した実装を防ぐ。
version	0.1.0
category	midstream
phase	midstream
applyTo	["src/**/*.{ts,tsx,js,jsx}","app/**/*.{ts,tsx,js,jsx}","components/**/*.{ts,tsx,js,jsx}"]
tags	["community","design-system","component-reuse","ui","midstream"]
severity	major
inputContext	["diff"]
outputKind	["findings","actions"]
modelHint	balanced

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, ）でありながら、内部で素の HTML 要素を直接スタイリングしている。