mcpField
D
design-system-generalizer

design-system-generalizer

github.com/heyeddi-comデザイン・UI086 回インストール1 日前に更新
リポジトリ

design-system-generalizer について

design-system-generalizer は、選んだ基準ルートと他のルートを比較するスキルです。デザイントークンやコンポーネント再利用のずれを見つけ、段階的な移行計画に役立ちます。

主な機能

  1. 01基準ルートのパターンをスキャン
  2. 02ルート間の違反を比較
  3. 0316進カラーとルートファイル欠落を検査

活用シーン

  1. 01ルートを基準ページと比較
  2. 02トークンやコンポーネント再利用のずれを特定
  3. 03段階的な移行PRを計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill design-system-generalizer

インストール後、Claude Code で/design-system-generalizerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
scripts/
_skill_cli.py
diff_violations.py
scan_patterns.py

詳細

デザインシステムの一般化

使用する場面

  • あるルートが「ゴールデン」リファレンスである場合（例：/settings）
  • 他のルートで、トークンやコンポーネントの再利用にずれが生じている場合
  • 段階的な移行 PR を計画する場合

手順

  1. python scripts/scan_patterns.py --route /golden --project-root <root>
  2. python scripts/diff_violations.py --golden /golden --target /other --project-root <root>
  3. diff に --check を指定すると、対象に 16 進カラーが含まれている場合やルートファイルが不足している場合に、ゼロ以外の終了コードを返します。
  4. 小規模な PR を提案してください。一度にアプリ全体を書き直すことは避けてください。

コメント

Markdown 対応