Interaction Design

Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hov

21 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add rastian/interaction-design-skills --skill interaction-design

Manual install

git clone --depth 1 https://github.com/rastian/interaction-design-skills.git /tmp/interaction-design-skills
mkdir -p ~/.claude/skills
cp -r /tmp/interaction-design-skills/. ~/.claude/skills/interaction-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Interaction Design

A practitioner's guide to interaction design for product designers, UX designers, UI designers,
service designers, and interaction designers. This skill covers the full scope of IxD work —
from foundational principles to practical state design, flow specification, and interaction review.

## What This Skill Covers

- Designing and specifying interactions: flows, states, transitions, affordances
- Evaluating interaction quality against established principles
- Writing interaction specifications and handoff annotations
- Micro-interaction design (trigger, rules, feedback, loops)
- Feedback system design: timing, type, and hierarchy
- Response time standards and perceived performance
- Role-specific IxD responsibilities across design disciplines
- Common interaction anti-patterns and how to fix them

Tell Claude what you need. Examples:

- "Help me design the interaction flow for a multi-step checkout"
- "What states does this button need?"
- "Review this interaction — does the feedback arrive at the right time?"
- "I need to write an interaction spec for this drag-and-drop feature"
- "What's the right animation duration for this modal?"
- "How should I handle empty states in this dashboard?"

---

## The 5 Dimensions of Interaction Design

Interaction design operates across five materials. Every interaction is composed of some combination of these dimensions.

| Dimension | What It Is | Design Questions |
|---|---|---|

Read the full skill on GitHub

Details

Skill name: interaction-design
Repository: rastian/interaction-design-skills
Repo updated: 31 August 2026

FAQ

What does the Interaction Design skill do?

How do I install the Interaction Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add rastian/interaction-design-skills --skill interaction-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Interaction Design popular?

It lives in rastian/interaction-design-skills, which has 21 GitHub stars and 0 forks.

Related skills

Design Trends

growthaudit/claude-design-skills

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger w

Frontend & Design

Html2elementor

dudaster/html2elementor

Convert HTML+CSS into Elementor JSON that imports into WordPress. Always use this skill whenever the user has HTML/CSS (pasted, file, URL, or AI-generated) and wants it to end up as an Elementor page — phrases like "convert HTML to Elementor", "import this landing into WordPress as Elementor", "make this Tailwind mockup an Elementor page", "turn my markup into Elementor JSON", "recreate this site in Elementor", or any variant. Do not try to produce Elementor JSON by hand — Elementor has non-obvious quirks (shared system-color globals that break previous pages, lazy-load hiding backgrounds, wid

Frontend & Design

Work Canvas

JingbiaoMei/work-canvas-skill

Turn an agent's own work — progress, debugging, analysis, comparisons, decisions — into one self-contained, reviewable HTML page (a "work canvas" / 网页看板) the user opens in a browser. Use when the user asks to create an interactive, reviewable, "alignment", progress, status, comparison, or summary HTML / dashboard / report / 看板 to see where a long task stands, review and comment, compare options, or decide next steps — especially for long-running, multi-subsystem, or trial-and-error tasks where terminal logs are the wrong medium. Also use to close out a `/goal` command session with a progress/s

Frontend & Design

Find Domain

paveldevyatov/ai-domain-name-generator

AI domain name generator, domain finder and domain availability checker — brainstorms brandable names and domain hacks for a project, then checks which are really free at the registries (RDAP and whois), honest about zones it can't verify. Use when the user wants to find, brainstorm, generate or check a domain name, asks whether a domain like X.com is available or taken, wants domain hacks (bit.ly-style names), or needs a brand or product name with a free domain for a project, startup or app.

Frontend & Design

Design Engine

rahamanbinujit/claude-design-engine

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites — entirely from natural language. Includes brand onboarding, self-review quality system, Puppeteer export scripts, and 6 teachable design skills. Built through 300+ real design experiments. Use this skill when the user asks to: design a poster, create social media content, build a carousel, make a YouTube thumbnail, generate a PDF/report, design a website or landing page, create any visual content, or imp

Frontend & Design

Web Motion

Schmandarine/web-motion-skill

Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.