interaction-design
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
Best use case
interaction-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
Teams using interaction-design 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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/interaction-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How interaction-design Compares
| Feature / Agent | interaction-design | 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?
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
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
# Interaction Design Skill
## When to use
- Adding microinteractions to UI components
- Designing hover, focus, and active states
- Implementing feedback patterns (loading, success, error)
- Creating purposeful motion that enhances usability
## Core principles
1. **Purpose**: Every animation should serve a function (guide attention, provide feedback, indicate state)
2. **Performance**: Use `transform` and `opacity` only (GPU-accelerated)
3. **Duration**: 150-300ms for micro, 300-500ms for transitions, never > 1s
4. **Easing**: `ease-out` for entrances, `ease-in` for exits, `ease-in-out` for state changes
5. **Accessibility**: Respect `prefers-reduced-motion`
## Common patterns
### Button feedback
```css
.btn {
transition: all 150ms ease-out;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
```
### Loading skeleton
```css
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
```
### Toast notification entrance
```css
.toast { animation: slideIn 300ms ease-out; }
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
```
## Reduced motion
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
## Tips for AI Agents
- Always include `prefers-reduced-motion` handling.
- Keep animations under 300ms for micro-interactions.
- Use CSS transitions for simple state changes, JS animations for complex sequences.Related Skills
web-design-reviewer
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
ui-design-system
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
tailwind-design-system-v4
Build scalable, responsive, and accessible design systems with Tailwind CSS v4 — design tokens, theme configuration, reusable React UI components, and migration from v3.
responsive-design
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
pricing-page-design
Design high-conversion SaaS pricing pages with plan structures, comparison patterns, conversion strategies, copy templates, SEO/AEO checklists, and layout types (3-card, slider, persona split, enterprise).
landing-page-design
Design high-conversion landing pages with structure, section order, layout types (classic hero, long-form, minimal, comparison), conversion strategies, SEO/AEO guidance, and copywriting templates.
frontend-distinctive-design
Create distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation — visual identity, typography systems, color palettes, and layout composition.
canvas-design
Create original visual design philosophies and express them as meticulously crafted, museum-quality PNG or PDF art with minimal text — generative art, data visualization, and abstract compositions.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
youtube-growth
Act as an expert YouTube Strategy Consultant. Apply the Creator Unlock N.I.C.E.R. Framework for conducting channel audits, niche validation, and data-backed video ideation/thumbnail generation.
xyops-automate
Build and manage automation pipelines using xyOps at {{XYOPS_HOST}}:{{XYOPS_PORT}}.
xml-parse
Parse and transform XML/HTML documents using command-line tools in the shared volume at {{SHARED_VOLUME}}.