Interaction Extraction Skill

Figmaデザインからインタラクション仕様（hover状態、遷移、アニメーション、トリガー）を抽出するスキルです。

目次

1. 概要
2. 対象範囲
3. クイックスタート
4. 詳細ガイド
5. 出力形式

概要

このスキルは以下のタスクをサポートします：

1. コンポーネント状態の抽出: hover, active, disabled, focused等
2. トランジション定義: 状態間のアニメーション仕様
3. トリガー整理: ユーザー操作と対応するアクション
4. 画面遷移仕様: ナビゲーションとアニメーション

禁止事項

以下は絶対に行わないこと：

• 実装コードの生成（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

エージェントは自動的に：

1. コンポーネントバリアントを検出
2. 状態変化のパターンを整理
3. トリガーとアクションを文書化
4. 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 の存在確認

bash
1# 確認
2ls .outputs/{screen-id}/spec.md
3
4# なければテンプレートから初期化
5cp .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: 状態変化を整理

各コンポーネントの状態遷移を文書化：

Step 4: トリガーとアクションを文書化

Step 5: トランジション/アニメーションを整理

Step 6: 画面遷移を整理

Step 7: spec.md の「インタラクション」セクションを更新

1. セクションを特定（## インタラクション）
2. ステータスを「完了 ✓」に更新
3. {{INTERACTIONS_CONTENT}} を内容に置換
4. 完了チェックリストを更新
5. 変更履歴に追記

出力形式

spec.md「インタラクション」セクションの内容

markdown
1## インタラクション
2
3> **ステータス**: 完了 ✓  
4> **生成スキル**: extracting-interactions  
5> **更新日**: 2024-01-15
6
7### インタラクティブ要素一覧
8
9| 要素 | 種別 | 状態数 | 備考 |
10|------|------|--------|------|
11| 送信ボタン | button | 5 | default/hover/pressed/disabled/loading |
12| 講座カード | card | 2 | default/hover |
13| メールフィールド | input | 4 | default/focus/filled/error |
14
15### コンポーネント状態
16
17#### 送信ボタン
18
19| 状態 | 視覚変化 | Figma Node |
20|------|----------|------------|
21| default | 背景 #0070e0, テキスト白 | `1234:5678` |
22| hover | 背景 #005bb5 | `1234:5679` |
23| pressed | scale(0.98) | `1234:5680` |
24| disabled | opacity 0.5 | `1234:5681` |
25| loading | スピナー表示, テキスト非表示 | `1234:5682` |
26
27#### 講座カード
28
29| 状態 | 視覚変化 | Figma Node |
30|------|----------|------------|
31| default | shadow: 0 2px 4px | `2345:6789` |
32| hover | shadow: 0 4px 12px, translateY(-2px) | `2345:6790` |
33
34### トリガーとアクション
35
36| トリガー | 対象要素 | アクション | 条件 |
37|----------|----------|-----------|------|
38| click | 送信ボタン | フォーム送信 | バリデーション成功時 |
39| click | 講座カード | 詳細画面へ遷移 | - |
40| hover | 講座カード | 影を強調 | - |
41| focus | メールフィールド | ボーダー色変更 | - |
42| blur | メールフィールド | バリデーション実行 | - |
43
44### トランジション仕様
45
46| 要素 | プロパティ | duration | easing | 備考 |
47|------|-----------|----------|--------|------|
48| ボタン | background-color | 150ms | ease-out | hover時 |
49| ボタン | transform | 100ms | ease | pressed時 |
50| カード | box-shadow, transform | 200ms | ease | hover時 |
51| モーダル | opacity | 300ms | ease-in-out | 表示/非表示 |
52
53### 画面遷移
54
55| 起点 | アクション | 遷移先 | アニメーション |
56|------|----------|--------|---------------|
57| この画面 | カードクリック | 講座詳細 | push (右からスライド) |
58| この画面 | 戻るボタン | 前の画面 | pop (左へスライド) |
59
60### 特記事項
61
62- ボタンのloading状態はAPI通信中に表示
63- カードホバーはタッチデバイスでは無効化推奨

完了チェックリスト

生成後、以下を確認：

- [ ] spec.md の「インタラクション」セクションが更新されている
- [ ] ステータスが「完了 ✓」になっている
- [ ] 全てのインタラクティブ要素がリストされている
- [ ] 各要素の状態が網羅されている
- [ ] トリガーとアクションが明確
- [ ] トランジション仕様が記載されている
- [ ] 完了チェックリストが更新されている
- [ ] 変更履歴に記録が追加されている

注意事項

他のセクションを変更しない

このスキルは「インタラクション」セクションのみを更新します。

documenting-ui-states との違い

Figmaプロトタイプの活用

Figmaプロトタイプが設定されている場合、以下を確認：

• インタラクショントリガー（On Click, On Hover等）
• アニメーション設定（Duration, Easing）
• 遷移先フレーム

参照

• workflow.md: 詳細なワークフロー
• interaction-patterns.md: インタラクションパターン集
• section-template.md: セクション出力テンプレート
• managing-screen-specs: 仕様書管理スキル