Justin Figma Design (/jfd)

jfd) は何をしますか？

このワークスペースはFigmaファーストのコラボレーションワークスペースであり、アプリケーションコードベースではありません。このスキルはオーケストレーションレイヤーです。ワークスペースメモリ、Figma Consoleワークフロー、デザインシステムの規律、および証拠に基づいたビジュアルQAを担当します。ユーザーが明示的にデザインからコードへの変換を要求しない限り、React、HTML、またはCSSを生成しないでください。

必要なMCPコンパニオン

すべてのFigma作業はFigma Console MCP (user-figma-console)上で実行されます。figma_executeで検査と変更、figma_take_screenshotで証拠取得、figma_get_statusとfigma_reconnectでDesktop Bridge接続を管理します。書き込み作業にはDesktop Bridgeが接続されたローカル/NPXサーバーが必要です。ホストされたリモートモードは読み取り専用です。スクリプトを作成する前にreferences/figma-execute.mdと、接続の詳細についてはワークスペースファイルdocs/tools/figma-console.md（ワークスペースルート）を参照してください。そのMCP接続なしで/jfdをスタンドアロンのFigmaエディタとして扱わないでください。

このスキルではなく、デザインから事実を解決する

このスキルは手順を提供しますが、事実は提供しません。デバイスサイズ、フォント、間隔、スタイルの好みは時間とともに変化します。対象ファイルは常に最新です。必要な値（寸法、フォント、間隔ステップ、色、名前、または規則）は、次の順序で解決してください。

1. 対象ファイル。 実際のフレーム、テキスト、トークン、またはコンポーネントを測定します。
2. ファミリー。 同じセクション内の兄弟フレーム、状態、および画面。
3. ワークスペースメモリ。 ファイルのdocs/files/<alias>/design.mdとdocs/preferences.mdを確認し、その「最終確認」日付を尊重します。
4. ユーザーまたは現在のルックアップ。 質問するか、現在のプラットフォームガイダンスを確認します。記憶されているデバイスサイズや古いデフォルトを信頼しないでください。
5. 書き戻し。 解決した値を今日の日付とともにターゲットのdesign.mdに記録し、次のセッションで信頼できるようにします。

このスキル自身のテキストからプロジェクトの値を解決しないでください。

2つのワークフロー

• 既存ファイルの編集（デフォルト）： 測定すべきものがあります。以下の完全なループに従い、ルートフレームサイズを決して推測せず、編集対象のファミリーの実際のルートを測定してください。
• ゼロからの開始： 測定するものが何もないため、解決順序は手順3〜5で実行されます。references/starting-from-scratch.mdを参照してください。構築前に、ルートフレームサイズ、タイポグラフィ、テーマサポートをユーザーと確認し、その後すぐにファイルのdesign.mdを作成して、後続のすべてのセッションで推測ではなく測定できるようにします。

空のワークスペースを初期化する

ワークスペースにdocs/preferences.mdとdocs/FILES.mdがない場合は、initモードを使用します。Initはローカルで冪等なスキャフォールドです。Figmaを開いたり、MCPを呼び出したり、キャンバスを変更したりすることはありません。

1. ホストがスラッシュエイリアスをサポートしていない場合、jfd initを/jfd initと同じように扱います。
2. 書き込み前に不足しているスキャフォールドパスをリストします。空でないワークスペースでは、最初に確認を求めます。既存のファイル、ディレクトリ、シンボリックリンク、またはスキルインストールを上書きしないでください。
3. 不足しているファイルのみをこのスキルのassets/templates/からコピーします。
4. 不足しているスキルコピーを.agents/skills/justin-figma-design/（標準）および必要に応じて.cursor/skills/justin-figma-design/にインストールします。
5. オプションで、一括処理のためにscripts/init_project.py（Python 3、stdlibのみ）を実行します。エージェントファイルツールがプライマリパスです。
6. スキャフォールドを確認し、Figmaリンクまたはファイルキーを要求します。資格情報やファイルデータを作成しないでください。

詳細：references/getting-started.md。

動作モードを選択する

非YOLOがデフォルトです。

• 非YOLOは本番作業向け：共有パターン、画面、コンポーネント、変数、テーマ、レスポンシブ変更、および明示的に使い捨て可能でないスコープ。
• YOLOは、ユーザーが明示的に「YOLO」、「クイックデモ」、「ラピッドプロトタイプ」などと言い、スコープが1つの名前付きボードまたは状態である場合のみ。
• 「コンポーネントを作成」、「ライブラリを更新」、「ライトとダークをサポート」、または共有クロームの変更は、小さいからといってYOLOではありません。
• ユーザーが明示的に実装または実行を要求するまで、計画モードを維持します。

YOLOはライブラリのオーバーヘッドを削減します。安全性やビジュアルQAを排除するものではありません。共有クローム、再利用可能なパターン、複数の関連状態、ライト/ダークまたはレスポンシブの伝播、マスターコンポーネントの変更、Auto Layoutのリファクタリング、ビジネスルールの変更、または2番目のボードを発見した場合は、非YOLOにエスカレーションします。完全なルーターとチェックリスト：references/modes-and-workflow.md。

Figmaの変更前

1. ワークスペースルートのdocs/preferences.mdとdocs/FILES.mdを読みます。
2. ターゲットファイルのエイリアスを解決し、docs/files/<alias>/design.mdを読みます。画面、フロー、または複合サーフェスの作業にはscreens.mdを読みます。
3. 最新の関連セッションノートを読みます。生きたdesign.mdと現在の権限が、古い履歴ノートよりも優先されます。
4. アクティブなFigmaファイル、ページ、セクション/フレーム、および権限を確認します。接続されたファイル内のノードID、コンポーネント、変数、スタイルを再検索します。以前のセッションのIDは古い証拠であり、認証ではありません。
5. 共有変更の前に、同じフレーム/状態ファミリー全体を棚卸しします：ライト/ダーク、展開/折りたたみ、ネストされたアクティブルート、オーバーレイ、レスポンシブバリアント、および意図的に削除された状態。
6. 編集対象のファミリーのルートフレームを測定します。デバイスサイズを決して推測しないでください。
7. テキスト変更の前に、スタイル付きフォントセグメントを検査し、現在のフォントを読み込みます。置換フォントは、測定されたテキスト、次にdesign.md、最後にユーザーという解決順序で選択します。このスキルから選択しないでください。

ターゲットファイルにdesign.mdがない場合は、最初に読み取り専用の調査ベースラインを完了します。アクティブなファイルまたは権限が確認できない場合は、停止して質問します。

一般的なグラフィック

アイコンやインポートされた画像を配置する前に、ワークスペースルートのdocs/assets/README.mdとdocs/assets/icons.mdを読みます。既存のファイルコンポーネントとプロジェクトの承認済みアイコンソースを優先します。新しいグラフィックを受け入れる前に、ベクターの境界、サイズ設定、テーマのコントラストを検査します。アバターはユーザー提供のみです。決して生成しないでください。

非YOLO契約

• 最初に権威あるローカルインスタンス/コンポーネントを検索し、次に有効なライブラリ、次に広範なライブラリ検索を行います。ギャップを文書化した後にのみ作成します。
• 承認されたスコープに対して最小限の一貫したデザインシステムを構築します：最初に変数とモード、次にスタイルとコンポーネント、最後に画面インスタンス。
• 構造的/視覚的状態にはバリアントを、コンテンツの柔軟性にはコンポーネントプロパティを使用します。インスタンス、インスタンススワップ、制御されたラッパーを、切り離された再描画よりも優先します。
• レイアウトの意図を明確にします：意味のある名前、意味のある階層、子が関連する場所でのAuto Layout、トークンバインディング、コンポーネントの説明、文書化されたアクセシビリティ/状態の動作。
• ライト/ダークは、2つのハードコードされた画面ではなく、変数モードマトリックスとして扱います。references/variables-and-theming.mdを参照してください。
• 共有変更を関連画面ファミリー全体に1回のパスで適用し、すべてのメンバーをQAします。兄弟が古いままでは、単一フレームの修正は完了していません。

複雑な作業の前に、references/components-and-design-system.mdとreferences/layout-and-autolayout.mdを読んでください。

レイアウトルール

軸ごとに独立してHug、Fill、Fixed、min/maxを選択します。コンテンツ駆動のスタックとコントロールにはHug。Auto Layoutの親において意味のある利用可能スペースを持つ子にのみFill。意図的な構造的境界にはFixed（測定された画面ルート、アイコンボックス、CTA、キャリブレーションされたシェル）。承認されたレスポンシブ制限にはmin/max。関係性はネストされたAuto Layout、パディング、ギャップでエンコードします。古い座標を保持する不可視のスペーサーフレームは使用しません。絶対配置/自動レイアウト無視レイヤーは、正当化されたオーバーレイ、クローム、装飾、またはターゲットのdesign.mdに文書化された例外にのみ保持します。コンテナのサイズ変更後は、幅を所有する子孫を監査します。親を広げるだけでは完全なリフローにはなりません。詳細：references/layout-and-autolayout.md。

実行と検証

検査し、1つの小さなターゲットを絞ったfigma_executeを実行し、変更されたすべてのIDと有用なジオメトリを返し、すぐにfigma_take_screenshotでスクリーンショットを取得します。ルーティングがアクティブファイルに依存する場合、書き込みとスクリーンショットは順次実行します。QAは測定された構造と視覚的証拠を組み合わせます。該当する場合、以下をキャプチャします：（1）フォーカスされたコンポーネントの切り抜き、（2）ボード全体、（3）関連ファミリーまたはセクションの概要。共有エッジ、スペーシング、クリッピング、オーバーフロー、長文の動作、アイコン/ベクターの境界、コントラスト、タイポグラフィ、非表示のコントロール、セマンティック状態、関連状態のパリティ、ハードコードされた値、未解決のバインディング、およびライト/ダークの解決を確認します。利用可能な場合はFigma Checkデザインを使用します。それ以外の場合は、同等の構造的および手動チェックを実行します。

figma_executeの失敗は、ターゲットが検査されるまで部分的である可能性があるものとして扱います。失敗した作成または再ペアレント化スクリプトを盲目的に再実行しないでください。リカバリ契約：references/figma-execute.md。完全なチェックリスト：references/qa-and-recovery.md。

クローズアウト

• 変更されたすべてのボードと必要なファミリーメンバーの最終スクリーンショットをキャプチャします。
• 意図的な例外、プレースホルダー、未解決の問題、スコープの境界を記録します。
• 権限、コンポーネント、変数、画面、ルートサイズ、またはドリフトが変更された場合（セッション中に解決された値を含む）は、ターゲットのdesign.mdとscreens.mdを更新します。
• 重要な作業については、docs/sessions/の下に日付付きのノートを書き込みます。

ターゲットファイルのdesign.mdに文書化された保護を尊重します：ロックまたは保護されたオリジナル、削除されたままにしなければならないスタイルや状態、保存しなければならないコピーと言語。プロジェクトメモリに資格情報やプライベートトークンを保存しないでください。

このスキルの背後にある外部ガイダンスについては、references/research-sources.mdを読んでください。