What is extracting-interactions?

Figmaのデザインから自動的にインタラクションの仕様を抽出する必要があるUI/UXエージェントに最適です。 Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the インタラクション section in screen spec.md.

How do I install extracting-interactions?

Run the command: npx killer-skills add farmanlab/ai_agent_orchestra/extracting-interactions. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for extracting-interactions?

Key use cases include: コンポーネントの状態を自動的に抽出して一貫したデザインの実装を実現する, 遷移の定義を生成してよりスムーズなユーザーインターフェースを実現する, インタラクションの仕様をデバッグしてデザインの完全性を確保する.

Which IDEs are compatible with extracting-interactions?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for extracting-interactions?

実装コード（例：CSS、JS、Swift）を生成しない. アニメーションライブラリ（例：Framer Motion、GSAP）を提案しない. テクノロジー・スタック特有の実装詳細を避ける.

Interaction Extraction Skill

Name: extracting-interactions
Availability: InStock
Author: farmanlab

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 の存在確認

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: 状態変化を整理

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

要素	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「インタラクション」セクションの内容

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 との違い

観点	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: 仕様書管理スキル

extracting-interactions — community extracting-interactions, ai_agent_orchestra, community, ide skills, Claude Code, Cursor, Windsurf

このスキルについて

Killer-Skills Review

このスキルを使用する理由

おすすめ

↓ 実現可能なユースケース for extracting-interactions

! セキュリティと制限

Why this page is reference-only

Source Boundary

Decide The Next Action Before You Keep Reading Repository Material

Start With Installation And Validation

Cross-Check Against Trusted Picks

Move To Workflow Collections For Team Rollout

Browser Sandbox Environment

⚡️ Ready to unleash?

FAQ & Installation Steps

? Frequently Asked Questions