work-with-design-systems

デザインシステムを扱う

カタログのスタブ — スキルの完全版：natdexterra/work-with-design-systems

判断ツリー

1. スキルの完全版はすでにインストールされていますか？ この場所にあるスキルに、まだ das: ブロックが含まれているか確認します。

   • グローバル：grep -q "^das:" ~/.agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • プロジェクト：grep -q "^das:" .agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • das: ブロックがない → スキルの完全版がインストール済みです。呼び出して続行します
   • das: ブロックがある → ステップ 2 に進みます

2. スコープを検出してからインストールします：

   スコープを検出するには：

   [ -e ~/.agents/skills/work-with-design-systems ] && echo "global" || echo "project"
   

   グローバル（-g を付けてインストール）：

   npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -g -y
   

   プロジェクト（-g を付けずにインストール）：

   npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -y
   

   **Claude Code：**会話を離れずに実行するには、どちらかのコマンドを ! で始まるチャットメッセージとして送信します。

インストール後の呼び出し

• スキル名：work-with-design-systems
• トリガー：「デザインシステムを扱う」、「Figma のインスペクトモード」、「デザインシステムを Figma で構築する」、「WCAG コンポーネント監査」

機能

Figma デザインシステム向けの 2 つの運用モードがあります。インスペクトモード：読み取り専用の分析 — WCAG アクセシビリティ監査、コンポーネント品質のスコアリング、開発者への引き継ぎ資料の生成を行います。ビルドモード：変数のバインディング、コンポーネントのスロットアーキテクチャ、説明を網羅する、デザインシステム作成のためのガイド付き 6 フェーズのワークフローです。オプションで tokens.css と AI が読み取り可能なルールファイルにエクスポートできます。

使用しない場合

• システムアーキテクチャを必要としない単一コンポーネントの作業
• デザインシステムを伴わない一般的なデザイン作業 — mobile-app-design または ui-craft を使用します
• Figma への書き込み中のトークン適用 — claude2figma を使用します