mcpField
F
frontend-design-system

frontend-design-system

github.com/akillnessデザイン・UI53341 回インストール4 日前に更新
リポジトリ

frontend-design-system について

Frontend Design Systemは、正確な名称を必要とする旧ワークフローや連携向けの互換スキルです。UIシステムの実作業は独立した標準機能として扱わず、正規の`design-system`スキルへ案内します。

主な機能

  1. 01旧名称との互換性
  2. 02`design-system`への案内
  3. 03移行・同期ガイダンス
  4. 04関連UIスキルへのリンク

活用シーン

  1. 01旧フォルダー名を前提とするスクリプトの維持
  2. 02`frontend-design-system`を指定した依頼への対応
  3. 03UIシステムのワークフローを`design-system`へ移行

インストール

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

$npx skills add https://github.com/akillness/jeo-skills --skill frontend-design-system

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

同梱ファイル

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

SKILL.toon
evals/
evals.json
references/
alias-routing.md
compact-surface-sync.md

詳細

フロントエンドデザインシステム

このスキルは、design-system の互換性ラッパーです。フロントエンドの UI システム領域で、2 つのスキルがどちらも同等に推奨されるデフォルトとして見えないようにしながら、古いワークフローや名前を正確に指定するインテグレーションを引き続き利用できるようにします。

このスキルを使う場面

  • ユーザーまたはツールが frontend-design-system を明示的に指定している場合
  • セットアップ、同期、または移行プロセスで、以前のフォルダー名やスキル名が必要な場合
  • 実際のデザインシステム関連の作業を design-system に振り分けながら、後方互換性を維持する必要がある場合

一般的な UI システムの設計では、このスキルをデフォルトとして選択しないでください。

手順

ステップ 1：エイリアスの意図を確認する

正確な以前の名前が重要な場合に限り、このエイリアスを使います。

適切な理由：

  • ユーザーが frontend-design-system を直接指定している
  • スクリプトやプラットフォームがフォルダー名やスキル名を文字どおり参照している
  • 移行やクリーンアップの作業中に互換性を維持している

それ以外の場合は、../design-system/SKILL.md に切り替えてください。

ステップ 2：正式なスキルに誘導する

まずエイリアス側の資料を確認してから、UI システムに関する実質的な作業は正式なスキルに移ってください：

  • エイリアスの振り分けに関する説明：./references/alias-routing.md
  • コンパクト表示／ディスカバリー同期に関する説明：./references/compact-surface-sync.md
  • 正式なスキル：../design-system/SKILL.md
  • 対象範囲の境界に関する説明：../design-system/references/scope-boundaries.md
  • 関連するスキル：
    • 実装レベルのコンポーネントパターンについては ../ui-component-patterns/SKILL.md
    • デバイスへの適応については ../responsive-design/SKILL.md
    • アクセシビリティの監査や修正については ../web-accessibility/SKILL.md
ステップ 3：出力で互換性を維持する

エイリアス名で有効化された場合は、今後のメンテナンスを 1 つの主要なエントリに集約できるよう、正式なガイダンスが現在は design-system にあることを伝えてください。

例

例 1：以前の名前を明示したリクエスト

入力：「frontend-design-system を使って、SaaS ダッシュボードの UI システムを設計してください。」 出力：エイリアスであることを伝えたうえで、トークン、レイアウト階層、モーションルール、アクセシビリティについては正式な design-system のガイダンスを適用します。

例 2：一般的な UI システムに関する質問

入力：「コンポーネントを共有するランディングページとダッシュボード向けに、デザインシステムが必要です。」 出力：エイリアスを使い続けないでください。design-system に直接振り分けてください。

ベストプラクティス

  1. これを独立したナレッジベースではなく、リダイレクト層として扱います。
  2. design-system が通常のプロンプトで選ばれるよう、起動条件の表現を限定します。
  3. 基盤となる UI システムのガイダンスが変更された場合は、まず正式なスキルを更新します。
  4. README、セットアップ、マニフェストの各表示で、正式なスキルと互換性用のスキルの位置づけを明確にします。

参考資料

  • ./references/alias-routing.md
  • ./references/compact-surface-sync.md
  • ../design-system/SKILL.md
  • ../design-system/references/scope-boundaries.md
  • ../ui-component-patterns/SKILL.md
  • ../responsive-design/SKILL.md
  • ../web-accessibility/SKILL.md

コメント

Markdown 対応