design-fidelity-auditor は何をしますか？
CSS、Tailwind、JSX、TSX、Vue、Angularコードにおけるデザインシステムからの逸脱を監査します。
概要
jovd83/design-fidelity-auditor は、フロントエンドコードベースを分析し、定義されたデザインシステムからの逸脱（ドリフト）を特定するためのスキルです。これにより、UIの一貫性を維持し、デザインと実装の乖離を防ぎます。
対応プラットフォーム
- Claude Code
- Cline
- Roo
- Cursor
- Windsurf
- Gemini Code Assist
- Lovable
- Copilot Chat
- Continue.dev
- Aider
- CodeGPT
- PraisonAI
使用方法
- プロジェクトのルートにデザインシステムの定義ファイルを配置します（例：
design-tokens.json）。 - スキルを実行すると、以下の要素が自動的にチェックされます。
- CSSプロパティとカスタムプロパティ
- Tailwind CSSのクラス名と設定
- インラインスタイル
- コンポーネントのprops
- 監査結果は、ファイルパスと具体的な違反箇所を含むレポートとして出力されます。
設定
監査のカスタマイズには、プロジェクトルートに .design-fidelity-auditor.json ファイルを作成します。
{
"tokenFiles": ["design-tokens.json"],
"ignorePaths": ["node_modules", "dist"],
"strictMode": true
}
出力例
違反が3件見つかりました:
1. src/components/Button.tsx:23 - 未定義のカラートークン `#ff6600` が使用されています。
2. src/styles/global.css:45 - フォントファミリー `"Arial"` はデザインシステムに含まれていません。
3. src/views/Dashboard.vue:12 - スペーシングに `margin: 15px` が使われています。推奨: `margin: 16px`（トークン `spacing-4`）。
制限事項
- 動的に生成されるクラス名やスタイルは完全には検出できません。
- デザインシステムの定義ファイルは手動で用意する必要があります。
ライセンス
MIT