majiayu000 Interaction Extraction Skill
Figmaデザインからインタラクション仕様（hover状態、遷移、アニメーション、トリガー）を抽出するスキルです。
目次
概要
このスキルは以下のタスクをサポートします：
- コンポーネント状態の抽出: hover, active, disabled, focused等
- トランジション定義: 状態間のアニメーション仕様
- トリガー整理: ユーザー操作と対応するアクション
- 画面遷移仕様: ナビゲーションとアニメーション
禁止事項
以下は絶対に行わないこと：
- 実装コードの生成（CSS/JS/Swift等）
- アニメーションライブラリの提案（Framer Motion/GSAP等）
- 技術スタック固有の実装詳細
このスキルの目的は「どのようなインタラクションがあるか」の情報整理のみです。
対象範囲
このスキルで扱うもの（コンポーネントレベル）
- ボタンの hover / active / disabled 状態
- 入力フィールドの focus / error / filled 状態
- カードの hover エフェクト
- トグル / チェックボックスの on/off
- アコーディオンの展開/折りたたみ
- タブの選択状態
- ドロップダウンの開閉
- モーダル/ダイアログの表示/非表示
- ツールチップの表示
documenting-ui-states で扱うもの（画面レベル）
- 画面全体の loading / error / empty 状態
- API通信に伴う画面状態変化
出力先
このスキルは画面仕様書（spec.md）の「インタラクション」セクションを更新します。
.outputs/{screen-id}/
├── spec.md # ← このスキルが「インタラクション」セクションを更新
├── index.html # 参照用HTML
└── assets/
クイックスタート
基本的な使い方
以下のFigma画面のインタラクション仕様を抽出してください：
https://figma.com/design/XXXXX/Project?node-id=1234-5678
エージェントは自動的に：
- コンポーネントバリアントを検出
- 状態変化のパターンを整理
- トリガーとアクションを文書化
- spec.md の「インタラクション」セクションを更新
詳細ガイド
詳細な情報は以下のファイルを参照してください：
- workflow.md: インタラクション抽出のワークフロー
- interaction-patterns.md: 一般的なインタラクションパターン
- section-template.md: セクション出力テンプレート
Workflow
インタラクション抽出時にこのチェックリストをコピー：
Interaction Extraction Progress:
- [ ] Step 0: spec.md の存在確認
- [ ] Step 1: インタラクティブ要素を特定
- [ ] Step 2: コンポーネントバリアントを検出
- [ ] Step 3: 状態変化を整理
- [ ] Step 4: トリガーとアクションを文書化
- [ ] Step 5: トランジション/アニメーションを整理
- [ ] Step 6: 画面遷移を整理
- [ ] Step 7: spec.md の「インタラクション」セクションを更新
Step 0: spec.md の存在確認
# 確認
ls .outputs/{screen-id}/spec.md
# なければテンプレートから初期化
cp .agents/templates/screen-spec.md .outputs/{screen-id}/spec.md
Step 1: インタラクティブ要素を特定
HTMLまたはFigmaから以下を抽出：
- ボタン（button, a[role="button"]）
- リンク（a）
- 入力フィールド（input, textarea, select）
- インタラクティブカード
- タブ、アコーディオン
- トグル、チェックボックス、ラジオ
Step 2: コンポーネントバリアントを検出
Figmaコンポーネントのバリアントプロパティを確認：
Button
├── State=Default
├── State=Hover
├── State=Pressed
├── State=Disabled
└── State=Loading
Step 3: 状態変化を整理
各コンポーネントの状態遷移を文書化：
| 要素 | From | To | トリガー |
|---|---|---|---|
| 送信ボタン | default | hover | マウスオーバー |
| 送信ボタン | hover | pressed | クリック |
| 送信ボタン | pressed | loading | クリック完了 |
Step 4: トリガーとアクションを文書化
| トリガー | 対象 | アクション |
|---|---|---|
| クリック | 送信ボタン | フォーム送信 |
| クリック | 講座カード | 詳細画面へ遷移 |
| ホバー | カード | 影を強調 |
Step 5: トランジション/アニメーションを整理
| 要素 | プロパティ | 値 | duration | easing |
|---|---|---|---|---|
| ボタン | background-color | #0070e0 → #005bb5 | 150ms | ease-out |
| カード | box-shadow | 0 2px 4px → 0 4px 12px | 200ms | ease |
| モーダル | opacity | 0 → 1 | 300ms | ease-in-out |
Step 6: 画面遷移を整理
| 起点 | アクション | 遷移先 | アニメーション |
|---|---|---|---|
| 講座一覧 | カードクリック | 講座詳細 | push (右からスライド) |
| 講座詳細 | 戻るボタン | 講座一覧 | pop (左へスライド) |
| 任意 | ログインボタン | ログインモーダル | fade + scale |
Step 7: spec.md の「インタラクション」セクションを更新
- セクションを特定（
## インタラクション） - ステータスを「完了 ✓」に更新
{{INTERACTIONS_CONTENT}}を内容に置換- 完了チェックリストを更新
- 変更履歴に追記
出力形式
spec.md「インタラクション」セクションの内容
## インタラクション
> **ステータス**: 完了 ✓
> **生成スキル**: extracting-interactions
> **更新日**: 2024-01-15
### インタラクティブ要素一覧
| 要素 | 種別 | 状態数 | 備考 |
|------|------|--------|------|
| 送信ボタン | button | 5 | default/hover/pressed/disabled/loading |
| 講座カード | card | 2 | default/hover |
| メールフィールド | input | 4 | default/focus/filled/error |
### コンポーネント状態
#### 送信ボタン
| 状態 | 視覚変化 | Figma Node |
|------|----------|------------|
| default | 背景 #0070e0, テキスト白 | `1234:5678` |
| hover | 背景 #005bb5 | `1234:5679` |
| pressed | scale(0.98) | `1234:5680` |
| disabled | opacity 0.5 | `1234:5681` |
| loading | スピナー表示, テキスト非表示 | `1234:5682` |
#### 講座カード
| 状態 | 視覚変化 | Figma Node |
|------|----------|------------|
| default | shadow: 0 2px 4px | `2345:6789` |
| hover | shadow: 0 4px 12px, translateY(-2px) | `2345:6790` |
### トリガーとアクション
| トリガー | 対象要素 | アクション | 条件 |
|----------|----------|-----------|------|
| click | 送信ボタン | フォーム送信 | バリデーション成功時 |
| click | 講座カード | 詳細画面へ遷移 | - |
| hover | 講座カード | 影を強調 | - |
| focus | メールフィールド | ボーダー色変更 | - |
| blur | メールフィールド | バリデーション実行 | - |
### トランジション仕様
| 要素 | プロパティ | duration | easing | 備考 |
|------|-----------|----------|--------|------|
| ボタン | background-color | 150ms | ease-out | hover時 |
| ボタン | transform | 100ms | ease | pressed時 |
| カード | box-shadow, transform | 200ms | ease | hover時 |
| モーダル | opacity | 300ms | ease-in-out | 表示/非表示 |
### 画面遷移
| 起点 | アクション | 遷移先 | アニメーション |
|------|----------|--------|---------------|
| この画面 | カードクリック | 講座詳細 | push (右からスライド) |
| この画面 | 戻るボタン | 前の画面 | pop (左へスライド) |
### 特記事項
- ボタンのloading状態はAPI通信中に表示
- カードホバーはタッチデバイスでは無効化推奨
完了チェックリスト
生成後、以下を確認：
- [ ] spec.md の「インタラクション」セクションが更新されている
- [ ] ステータスが「完了 ✓」になっている
- [ ] 全てのインタラクティブ要素がリストされている
- [ ] 各要素の状態が網羅されている
- [ ] トリガーとアクションが明確
- [ ] トランジション仕様が記載されている
- [ ] 完了チェックリストが更新されている
- [ ] 変更履歴に記録が追加されている
注意事項
他のセクションを変更しない
このスキルは「インタラクション」セクションのみを更新します。
documenting-ui-states との違い
| 観点 | documenting-ui-states | extracting-interactions |
|---|---|---|
| 対象 | 画面全体の状態 | コンポーネントの状態 |
| 例 | loading, error, empty | hover, pressed, focus |
| トリガー | APIレスポンス等 | ユーザー操作 |
Figmaプロトタイプの活用
Figmaプロトタイプが設定されている場合、以下を確認：
- インタラクショントリガー（On Click, On Hover等）
- アニメーション設定（Duration, Easing）
- 遷移先フレーム
参照
- workflow.md: 詳細なワークフロー
- interaction-patterns.md: インタラクションパターン集
- section-template.md: セクション出力テンプレート
- managing-screen-specs: 仕様書管理スキル