rastian

Interaction Design Skills — Design skill for Claude Code

Design community

A Claude skill for interaction design -> flows, states, micro-interactions, affordances, feedback, and IxD principles for product, UX, UI, and service designers.

How to install Interaction Design Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open rastian/interaction-design-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Interaction Design Skills does

A Claude skill for interaction design -> flows, states, micro-interactions, affordances, feedback, and IxD principles for product, UX, UI, and service designers.

Alternatives in Design

Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★
App Onboarding Questionnaire — A Claude Code skill that designs and builds high-converting questionnaire-style app onboarding flows — modelle 751 ★

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-design

Claude 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