extracting-interactions — Figma design interaction extraction extracting-interactions, ai_agent_orchestra, community, Figma design interaction extraction, ide skills, extracting-interactions install, interaction specification extraction, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for UI/UX Agents needing automated interaction specification extraction from Figma designs. Extracting-interactions is a skill that extracts interaction specifications, including hover states, transitions, and animations, from Figma designs.

Features

Extracts component states, such as hover, active, disabled, and focused
Defines transitions between states with animation specifications
Organizes triggers and corresponding actions for user operations
Specifies screen transition details, including navigation and animations

# Core Topics

Figma design interaction extraction extracting-interactions install interaction specification extraction
farmanlab farmanlab
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The extracting-interactions skill by farmanlab is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for Figma design interaction extraction, extracting-interactions install, interaction specification extraction.

Ideal Agent Persona

Perfect for UI/UX Agents needing automated interaction specification extraction from Figma designs.

Core Value

Empowers agents to extract component state, transition definitions, and trigger specifications from Figma files, streamlining the design-to-development process with support for hover states, animations, and navigation specifications in a technology-agnostic manner.

↓ Capabilities Granted for extracting-interactions

Automating component state extraction for consistent design implementation
Generating transition definitions for smoother user interfaces
Debugging interaction specifications to ensure design integrity

! Prerequisites & Limits

  • Does not generate implementation code (e.g., CSS, JS, Swift)
  • Does not propose animation libraries (e.g., Framer Motion, GSAP)
  • Avoids technology-stack-specific implementation details
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

extracting-interactions

Install extracting-interactions, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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

インタラクション抽出時にこのチェックリストをコピー：

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

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

要素FromToトリガー
送信ボタンdefaulthoverマウスオーバー
送信ボタンhoverpressedクリック
送信ボタンpressedloadingクリック完了

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

トリガー対象アクション
クリック送信ボタンフォーム送信
クリック講座カード詳細画面へ遷移
ホバーカード影を強調

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

要素プロパティ値durationeasing
ボタンbackground-color#0070e0 → #005bb5150msease-out
カードbox-shadow0 2px 4px → 0 4px 12px200msease
モーダルopacity0 → 1300msease-in-out

Step 6: 画面遷移を整理

起点アクション遷移先アニメーション
講座一覧カードクリック講座詳細push (右からスライド)
講座詳細戻るボタン講座一覧pop (左へスライド)
任意ログインボタンログインモーダルfade + scale

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

観点documenting-ui-statesextracting-interactions
対象画面全体の状態コンポーネントの状態
例loading, error, emptyhover, pressed, focus
トリガーAPIレスポンス等ユーザー操作

Figmaプロトタイプの活用

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

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

参照

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is extracting-interactions?

Perfect for UI/UX Agents needing automated interaction specification extraction from Figma designs. Extracting-interactions is a skill that extracts interaction specifications, including hover states, transitions, and animations, from Figma designs.

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: Automating component state extraction for consistent design implementation, Generating transition definitions for smoother user interfaces, Debugging interaction specifications to ensure design integrity.

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?

Does not generate implementation code (e.g., CSS, JS, Swift). Does not propose animation libraries (e.g., Framer Motion, GSAP). Avoids technology-stack-specific implementation details.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add farmanlab/ai_agent_orchestra/extracting-interactions. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use extracting-interactions immediately in the current project.

Related Skills

Looking for an alternative to extracting-interactions or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI