/design-handoff

不明なプレースホルダーが表示されたり、どのツールが接続されているかを確認する必要がある場合は、CONNECTORS.md を参照してください。

デザインから包括的な開発者ハンドオフドキュメントを生成します。

使用方法

/design-handoff $ARGUMENTS

ハンドオフスペックを生成: @$1

Figma URL が提供される場合は、Figma からデザインをプルします。それ以外の場合は、提供された説明またはスクリーンショットから作成します。

含めるべき内容

ビジュアル仕様

• 正確な寸法（パディング、マージン、幅）
• デザイントークン参照（色、タイポグラフィ、スペーシング）
• レスポンシブブレークポイントと動作
• コンポーネントバリエーションと状態

インタラクション仕様

• クリック/タップ動作
• ホバー状態
• トランジションとアニメーション（期間、イージング）
• ジェスチャーサポート（スワイプ、ピンチ、長押し）

コンテンツ仕様

• 文字制限
• 切り詰め動作
• 空状態
• ローディング状態
• エラー状態

エッジケース

• 最小/最大コンテンツ
• 国際対応テキスト（より長い文字列）
• 低速接続
• 欠落データ

アクセシビリティ

• フォーカス順序
• ARIA ラベルと役割
• キーボードインタラクション
• スクリーンリーダー案内

原則

1. 想定しない — 仕様書に記載されていない場合、開発者は推測します。すべてを仕様書に記載してください。
2. トークンを使用し、値は使用しない — 16px ではなく spacing-md を参照してください。
3. すべての状態を表示 — デフォルト、ホバー、アクティブ、無効、ローディング、エラー、空。
4. 理由を説明する — 「これはモバイルで折りたたまれます。ユーザーは主に片手で使用するため」は、開発者が適切な判断を下すのに役立ちます。

出力

## Handoff Spec: [機能/スクリーン名]

### 概要
[このスクリーン/機能が何をするか、ユーザーコンテキスト]

### レイアウト
[グリッドシステム、ブレークポイント、レスポンシブ動作]

### 使用デザイントークン
| トークン | 値 | 用途 |
|-------|-------|-------|
| `color-primary` | #[hex] | CTA ボタン、リンク |
| `spacing-md` | [X]px | セクション間 |
| `font-heading-lg` | [サイズ/ウェイト/ファミリー] | ページタイトル |

### コンポーネント
| コンポーネント | バリエーション | プロップ | 注釈 |
|-----------|---------|-------|-------|
| [コンポーネント] | [バリエーション] | [プロップ] | [特殊動作] |

### 状態とインタラクション
| 要素 | 状態 | 動作 |
|---------|-------|----------|
| [CTA ボタン] | ホバー | [背景を 10% 暗くする] |
| [CTA ボタン] | ローディング | [スピナー、無効] |
| [フォーム] | エラー | [赤いボーダー、下にエラーメッセージ] |

### レスポンシブ動作
| ブレークポイント | 変更内容 |
|------------|---------|
| デスクトップ (>1024px) | [デフォルトレイアウト] |
| タブレット (768-1024px) | [変更内容] |
| モバイル (<768px) | [変更内容] |

### エッジケース
- **空状態**: [データがない場合に表示するもの]
- **長いテキスト**: [切り詰めルール]
- **ローディング**: [スケルトンまたはスピナー]
- **エラー**: [エラー状態の外観]

### アニメーション / モーション
| 要素 | トリガー | アニメーション | 期間 | イージング |
|---------|---------|-----------|----------|--------|
| [要素] | [トリガー] | [説明] | [ms] | [イージング] |

### アクセシビリティメモ
- [フォーカス順序]
- [必要な ARIA ラベル]
- [キーボードインタラクション]

コネクタが利用可能な場合

~~デザインツールが接続されている場合:

• Figma から正確な寸法、トークン、コンポーネント仕様をプル
• アセットをエクスポートし、完全なスペックシートを生成

~~プロジェクトトラッカーが接続されている場合:

• ハンドオフを実装チケットにリンク
• スペックの各セクションごとにサブタスクを作成

ヒント

1. Figma リンクを共有する — 正確な寸法、トークン、コンポーネント情報をプルできます。
2. エッジケースを記載する — 「100 個のアイテムがある場合はどうなりますか?」は、境界条件の仕様を作成するのに役立ちます。
3. 技術スタックを指定する — 「React + Tailwind を使用しています」は、関連する実装メモを提供するのに役立ちます。