prototype-interaction

Define and document prototype interactions, transitions, and hotspots

509 stars

Best use case

prototype-interaction is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Define and document prototype interactions, transitions, and hotspots

Teams using prototype-interaction should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/prototype-interaction/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/ux-ui-design/skills/prototype-interaction/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/prototype-interaction/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How prototype-interaction Compares

Feature / Agent	prototype-interaction	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Define and document prototype interactions, transitions, and hotspots

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Prototype Interaction Skill

## Purpose

Define prototype interactions, map click/tap actions, configure transitions, and generate interaction specifications for design handoff.

## Capabilities

- Map click/tap interactions to destinations
- Define transition animations and timing
- Set up interactive hotspots
- Generate interaction specification documents
- Export to Figma prototype format
- Create interaction matrices

## Target Processes

- hifi-prototyping.js
- wireframing.js (interactivePrototypeTask)

## Integration Points

- Figma Prototype API
- InVision API
- ProtoPie specifications

## Input Schema

```json
{
  "type": "object",
  "properties": {
    "screens": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "string" },
          "name": { "type": "string" },
          "imagePath": { "type": "string" }
        }
      }
    },
    "interactions": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "sourceScreen": { "type": "string" },
          "hotspot": {
            "type": "object",
            "properties": {
              "x": { "type": "number" },
              "y": { "type": "number" },
              "width": { "type": "number" },
              "height": { "type": "number" }
            }
          },
          "trigger": {
            "type": "string",
            "enum": ["tap", "click", "hover", "drag", "swipe"]
          },
          "targetScreen": { "type": "string" },
          "transition": {
            "type": "object",
            "properties": {
              "type": { "type": "string" },
              "duration": { "type": "number" },
              "easing": { "type": "string" }
            }
          }
        }
      }
    },
    "outputFormat": {
      "type": "string",
      "enum": ["json", "figma", "invision", "markdown"],
      "default": "json"
    }
  },
  "required": ["screens", "interactions"]
}
```

## Output Schema

```json
{
  "type": "object",
  "properties": {
    "interactionSpec": {
      "type": "object",
      "description": "Complete interaction specification"
    },
    "interactionMatrix": {
      "type": "array",
      "description": "Screen-to-screen interaction matrix"
    },
    "transitionGuide": {
      "type": "object",
      "description": "Transition timing and easing guide"
    },
    "hotspotOverlays": {
      "type": "array",
      "description": "Visual hotspot overlay data"
    },
    "exportPath": {
      "type": "string",
      "description": "Path to exported specification"
    }
  }
}
```

## Usage Example

```javascript
const result = await skill.execute({
  screens: [
    { id: 'home', name: 'Home Screen', imagePath: './screens/home.png' },
    { id: 'detail', name: 'Detail View', imagePath: './screens/detail.png' }
  ],
  interactions: [
    {
      sourceScreen: 'home',
      hotspot: { x: 100, y: 200, width: 150, height: 50 },
      trigger: 'tap',
      targetScreen: 'detail',
      transition: { type: 'slide-left', duration: 300, easing: 'ease-out' }
    }
  ],
  outputFormat: 'markdown'
});
```

Related Skills

process-builder

509

from a5c-ai/babysitter

Scaffold new babysitter process definitions following SDK patterns, proper structure, and best practices. Guides the 3-phase workflow from research to implementation.

Workflow & Productivity

babysitter

509

from a5c-ai/babysitter

Orchestrate via @babysitter. Use this skill when asked to babysit a run, orchestrate a process or whenever it is called explicitly. (babysit, babysitter, orchestrate, orchestrate a run, workflow, etc.)