How do I install the Interaction Designer skill?

Run npx skillmds@latest add tomevault-io/interaction-designer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Interaction Designer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Interaction Designer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Interaction Designer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Interaction Designer?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Interaction Designer by tomevault-io

Name: Interaction Designer
Author: tomevault-io

Interaction Designer

Designs interactions, animations, transitions, and micro-interactions. Specifies hover states, click feedback, loading states, and user feedback mechanisms. Ensures interactions are accessible and performant. Use when this capability is needed.

tomevault-io 5d88a47 2 files · 3.4 KB Updated Sep 17, 2026

File contents

Interaction Designer Skill

Instructions

Analyze interaction requirements from task
Design interaction patterns and behaviors
Specify hover, active, focus states
Define animations and transitions
Design loading and feedback states
Ensure accessibility (keyboard, screen readers)
Return structured interaction specifications with:
- Interaction descriptions
- State transitions
- Animation specifications
- Timing and easing
- Accessibility considerations

Examples

Input: "Design button interactions" Output:

### Interactions: Button

**Hover State:**
- Background color darkens by 10%
- Transform: scale(1.02)
- Transition: 150ms ease-in-out
- Cursor changes to pointer

**Active State:**
- Background color darkens by 20%
- Transform: scale(0.98)
- Transition: 100ms ease-in-out

**Focus State:**
- Outline: 2px solid primary color
- Outline offset: 2px
- No animation (instant for accessibility)

**Loading State:**
- Show spinner icon
- Disable interaction
- Opacity: 0.7
- Cursor: not-allowed

**Success Feedback:**
- Show checkmark icon
- Background changes to success color
- Animation: fade in 200ms

**Accessibility:**
- Keyboard accessible (Enter/Space)
- Focus indicator visible
- Screen reader announces state changes
- Reduced motion: Disable animations if user prefers

Interaction Types

Hover: Mouse over interactions
Active: Click/press interactions
Focus: Keyboard focus interactions
Loading: Processing/loading states
Success: Success feedback
Error: Error feedback
Transitions: State change animations
Micro-interactions: Small, delightful interactions
Gestures: Touch/swipe interactions (mobile)

Animation Guidelines

Duration: 150-300ms for most interactions
Easing: ease-in-out for most, ease-out for entrances
Performance: Use transform and opacity (GPU accelerated)
Reduced Motion: Respect prefers-reduced-motion
Purpose: Animations should have purpose, not decoration

Accessibility Considerations

Keyboard Accessible: All interactions work with keyboard
Focus Indicators: Clear focus states
Screen Reader Support: Announce state changes
Reduced Motion: Disable animations if user prefers
Touch Targets: Minimum 44x44px for mobile

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: interaction-designerdescription: Designs interactions, animations, transitions, and micro-interactions. Specifies hover states, click feedback, loading states, and user feedback mechanisms. Ensures interactions are accessible and performant. Use when this capability is needed.---# Interaction Designer Skill## Instructions1. Analyze interaction requirements from task2. Design interaction patterns and behaviors3. Specify hover, active, focus states4. Define animations and transitions5. Design loading and feedback states6. Ensure accessibility (keyboard, screen readers)7. Return structured interaction specifications with: - Interaction descriptions - State transitions - Animation specifications - Timing and easing - Accessibility considerations## Examples**Input:** "Design button interactions"**Output:**```markdown### Interactions: Button**Hover State:**- Background color darkens by 10%- Transform: scale(1.02)- Transition: 150ms ease-in-out- Cursor changes to pointer**Active State:**- Background color darkens by 20%- Transform: scale(0.98)- Transition: 100ms ease-in-out**Focus State:**- Outline: 2px solid primary color- Outline offset: 2px- No animation (instant for accessibility)**Loading State:**- Show spinner icon- Disable interaction- Opacity: 0.7- Cursor: not-allowed**Success Feedback:**- Show checkmark icon- Background changes to success color- Animation: fade in 200ms**Accessibility:**- Keyboard accessible (Enter/Space)- Focus indicator visible- Screen reader announces state changes- Reduced motion: Disable animations if user prefers```## Interaction Types- **Hover**: Mouse over interactions- **Active**: Click/press interactions- **Focus**: Keyboard focus interactions- **Loading**: Processing/loading states- **Success**: Success feedback- **Error**: Error feedback- **Transitions**: State change animations- **Micro-interactions**: Small, delightful interactions- **Gestures**: Touch/swipe interactions (mobile)## Animation Guidelines- **Duration**: 150-300ms for most interactions- **Easing**: ease-in-out for most, ease-out for entrances- **Performance**: Use transform and opacity (GPU accelerated)- **Reduced Motion**: Respect prefers-reduced-motion- **Purpose**: Animations should have purpose, not decoration## Accessibility Considerations- **Keyboard Accessible**: All interactions work with keyboard- **Focus Indicators**: Clear focus states- **Screen Reader Support**: Announce state changes- **Reduced Motion**: Disable animations if user prefers- **Touch Targets**: Minimum 44x44px for mobile---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.

Frequently asked questions