Interaction Design Skills
Description
A Claude skill for interaction design -> flows, states, micro-interactions, affordances, feedback, and IxD principles for product, UX, UI, and service designers.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
◈ AUDIT → ANALYSE → SPECIFY → HANDOFF ◈Interaction Design
**Principled interaction design, from behaviour mapping to engineering handoff.** Built for product designers, UX designers, UI designers, service designers, and interaction designers.
Install
**Add to an existing Claude Code project:**
# Clone into your project's .claude/skills directory
git clone https://github.com/65ping/interaction-design-skill.git .claude/skills/interaction-design**Or install globally** (available across all your projects):
git clone https://github.com/65ping/interaction-design-skill.git ~/.claude/skills/interaction-designClaude Code will detect the skill automatically. No configuration needed.
What It Does
This skill turns Claude into an interaction design practitioner: auditing flows, specifying states, defining timing, and producing handoff-ready documentation. Tell Claude what you're designing and where you're stuck. It adapts to your role, phase, and output needs.
"What states does this toggle switch need?"
"Map the interaction flow for a multi-step checkout including all error paths"
"How long should a loading skeleton show before switching to an error state?"
"Write an interaction spec for drag-and-drop reordering I can give to engineering"
"I'm a service designer. How do I apply interaction design across a patient journey?"Claude responds with structured flows, state tables, timing specs, or annotated documentation, grounded in established principles.
The Five Dimensions
| # | Dimension | Core Question | Output |
|---|---|---|---|
| 1 | 📝 Words | Does the language guide without creating confusion? | Labels, instructions, error copy, microcopy |
| 2 | 👁️ Visual Representations | Do icons, imagery, and layout communicate state clearly? | Affordances, signifiers, visual feedback |
| 3 | 🖐️ Physical Objects & Space | How does device context and |
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations