figma-integration

スキル：Figma インテグレーション

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み取ります。一度確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。 開けなかったファイルの内容を推測してはいけません。

デザイン（Figma）とコード（このリポジトリ）を双方向につなぎます。トークン JSON を唯一の信頼できる情報源とし、Figma Variables はそれを反映するものとします。

手順

1. ${CLAUDE_SKILL_DIR}/../../../workflows/figma-integration.md を読みます（トークンと Variable のマッピング、同期方向、MCP の使用方法、整合性）。
2. 3 層の階層をエイリアスを使って 3 つの Figma コレクション（Primitives → Semantic → Component）にマッピングします。ダーク／ブランド／密度は Figma の Modes にします（${CLAUDE_SKILL_DIR}/../../../tokens/theming.json）。
3. 信頼できる同期方向を 1 つ選びます（コードから Figma へ公開する、または Tokens Studio／Variables REST API 経由で Figma からコードへ抽出する）。もう一方は生成します。両方を手作業で編集してはいけません。
4. Figma MCP サーバーが接続されている場合： そのツール／スキルを優先します（必須の前提スキルを最初に読み込みます）。フレーム／変数／スクリーンショットをコードに取り込み、トークンから Variables／コンポーネントを構築するか、Code Connect を ${CLAUDE_SKILL_DIR}/../../../components/* に接続するために使用します。
5. コンポーネントの整合性を確認します。Figma のバリアント／プロパティが、こちらのバリアント、サイズ、8 つの状態を網羅している必要があります。不足があれば指摘してください。

検証（完了の定義）

• すべての Figma Variable が ${CLAUDE_SKILL_DIR}/../../../tokens/*.json 内のトークンに解決されること（デザイン内に孤立した hex 値がないこと）。
• 信頼できる同期方向が 1 つであること。生成される側に手作業による編集が一切ないこと。
• バリアントのセットが 8 つすべての状態を網羅していること。Code Connect が適切な ${CLAUDE_SKILL_DIR}/../../../components/* ファイルを参照していること。
• トークンをインポートした後、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py が成功すること。