mcpField
I
interaction-design

interaction-design

github.com/podoDesign & UI29228 installsUpdated 4d ago
Repository

About interaction-design

interaction-design is a design skill for agents, offering guidance on interaction flows, component states, micro-interactions, and review. It supports designers and product teams preparing interaction specifications and evaluating design decisions.

Key features

  1. 01Task flows and navigation patterns
  2. 02Component states and feedback
  3. 03Micro-interaction timing guidance
  4. 04Affordances and interaction principles
  5. 05Specification and review checklists

Use cases

  1. 01Map a task or navigation flow
  2. 02Specify loading, error, and success states
  3. 03Document interaction behavior for handoff
  4. 04Review a design against interaction principles

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill interaction-design

After installing, type/interaction-designin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

interaction-design

Catalogue stub — full skill: rastian/interaction-design-skills

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/interaction-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/interaction-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as interaction-design, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/interaction-design ] && echo "global" || echo "project"

    Global:

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

    Project:

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

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: no LICENSE file in the repo

Invoke after install

  • Skill name: interaction-design
  • Trigger phrases: "interaction design", "interaction flow", "component states", "micro-interaction", "affordance", "interaction spec"

What it does

A practitioner's guide to interaction design — from foundational principles to practical state design, flow specification, and interaction review:

  • Interaction flows — task flows, user flows, navigation patterns, decision trees
  • State design — the full set of component states: default, hover, focus, active, disabled, loading, error, success, empty, skeleton
  • Micro-interactions — trigger → rules → feedback → loops model; timing and easing guidelines
  • Affordances — signifiers, feedback, constraints, mapping, consistency, discoverability
  • IxD principles — Norman's principles (Design of Everyday Things) and Tognazzini's First Principles of Interaction Design
  • Response time — 100ms/1s/10s thresholds, progress indicators, optimistic UI
  • Interaction specs — handoff annotation format, interaction specification documents
  • Interaction audit — review checklist against established principles

The install includes a reference/ folder with the principles, response-time and patterns-and-flows notes the skill points to.

When NOT to use

  • UX journey mapping + Playwright testing → use neo-user-journey
  • Animation and motion timing → use gsap-skills or framer-motion-skills
  • WCAG accessibility audit → use wcag-ai-skill
  • Full UX strategy → use ux-designer-skill

Comments

Markdown supported