figma-to-tailwindlisted

# Figma Variables → Tailwind CSS 変換スキル このスキルは、Figma MCPで取得したデザイン変数（Variables）を、Tailwind CSS標準クラスに自動変換するためのガイドです。 ## いつ使用するか 以下の状況で、このスキルを自動的に適用してください： 1. **Figma MCPでデザインを取得した後** - `mcp__figma-mcp__get_design_context`や`mcp__figma-mcp__get_variable_defs`を実行した直後 - Figma MCPが生成したコードに`var(--spacing-*)`や`var(--width-*)`などの変数が含まれている場合 2. **デザイン実装中** - コンポーネントのスタイリング時 - レイアウト調整時 - Figma変数を使用しているコードを発見した場合 3. **コードレビュー時** - `px-[var(--spacing-4)]`のようなFigma変数の直接使用を発見した場合 - インラインスタイルで`style={{ fontSize: 'var(--h4-font-size)' }}`のような記述を発見した場合 ## 変換手順 ### ステップ1: マッピングファイルを確認 `frontend/lib/figma-tailwind-map.ts`を参照して、Figma変数がTailwind標準クラスに変換可能か確認します。 ```typescript import { spacingMap, widthMap, heightMap, borderRadiusMap, typographyMap, figmaVarToTailwindClass, isStandardTailwindClass } from '@/lib/figma-tailwind-map' ``` ### ステップ2: 変換ルールの適用 #### スペーシング（spacing） ```typescript // ❌ Figma MCPが生成したコード <div className="px-[var(--spacing-4,16px)] py-[var(--spacing-2,8px)] gap-[var(--spacing-3,12px)]"> // ✅ Tailwind標準クラスに変換 <div className="px-4 py-2 gap-3"> ``` **変換マッピング:** - `spacing/1` → `1` (4px) - `spacing/2` → `2` (8px) - `spacing/3` → `3` (12px) - `spacing/4` → `4` (16px) - `spacing/1-5` → `1.5` (6px) ※カスタム - `spacing/2-5` → `2.5` (10px) ※カスタム #### サイズ（width/height） ```typescript // ❌ Figma MCPが生成したコード <div className="w-[var(--width-w-4,16px)] h-[var(--height-h-5,20px)]"> // ✅ Tailwind標準クラスに変換 <div className="w-4 h-5"> ``` #### ボーダー半径（b