design-tokens-skill

design-tokens-skill

カタログ用スタブ — スキルの完全版：ilikescience/design-tokens-skill

判断ツリー

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

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

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

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

   [ -e ~/.agents/skills/design-tokens-skill ] && echo "global" || echo "project"
   

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

   npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -g -y
   

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

   npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -y
   

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

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

• スキル名：design-tokens-skill
• トリガー：「design tokens」、「DTCG tokens」、「W3C tokens」、「Terrazzo」、「token aliasing」

機能

W3C Design Token Community Group（DTCG）仕様に関する深い専門知識を提供します。トークンファイルの構造、値の型、色空間の処理（sRGB、Display P3、OKLCH）、トークン間の参照とエイリアス、複合トークン、テーマリゾルバー、および jq、JSONata、Terrazzo、Figma からのエクスポートを含むツールチェーン全体を扱います。トークンシステムの設計、トークンの DTCG 形式への移行、またはマルチテーマのトークンパイプラインの設定時に使用してください。

使用しない場合

• トークン構造を伴わない OKLCH カラーの生成 — color-expert を使用します
• Figma 固有のトークン変数 UI — figma-variables-tokens-generator を使用します
• Figma の公式操作 — figma-official-skills を使用します