About

Imported from majiayu000/claude-skill-registry (skills/design/interaction-design-nickcrew-claude-cortex/SKILL.md). Install upstream with npx skills add majiayu000/claude-skill-registry --skill interaction-design-nickcrew-claude-cortex. Copyright stays with the author.

Interaction Design

Name: interaction-design
Author: majiayu000

Design natural interactions with clear feedback that gracefully handle all states. Covers user flows, micro-interactions, state transitions, and interface behavior patterns for web and mobile applications.

When to Use This Skill

Designing interaction flows for new features (drag-and-drop, wizards, modals)
Creating loading, empty, error, and success states
Improving micro-interactions on forms, buttons, or navigation
Designing undo/redo and recovery patterns for destructive actions
Reviewing interaction clarity in multi-step flows
Planning animation and transition behavior
Designing accessible interaction patterns

Quick Reference

Task	Load reference
State patterns and micro-interactions	`skills/interaction-design/references/state-patterns.md`

Workflow

Map all states: What states can this element be in? (loading, empty, partial, full, error, success, disabled, offline)
Design feedback: How does the user know their action worked?
Handle errors: What happens when things go wrong? How do users recover?
Consider edge cases: Empty data, slow connections, partial failures, concurrent actions.
Add delight: Where can micro-interactions improve the experience without adding noise?

Domain Vocabulary

user flows, interaction patterns, micro-interactions, state transitions, feedback loops, error states, empty states, loading states, progressive disclosure, gesture design, affordances, haptic feedback, animation timing, skeleton screens

Guiding Questions

Ask these when designing any interaction:

"What is the natural interaction pattern here?"
"How do we provide feedback at each step?"
"What happens in error and edge cases?"

Capabilities

Interaction Patterns

Natural gesture and input design (touch, mouse, keyboard)
Multi-modal interaction design
Voice and conversational UI patterns
Accessibility-first interaction design

State Design

Loading state optimization (skeleton screens, spinners, progress bars)
Empty state design that guides users toward action
Error state recovery patterns
Success state celebration and next steps
Offline state and sync indication

Micro-interactions

Button and input feedback (hover, focus, active, disabled)
Form validation feedback timing
Progress indicators and completion signals
Notification and alert patterns
Transition and animation design

Flow Design

Multi-step wizard patterns
Progressive disclosure implementation
Modal and overlay interaction patterns
Navigation and wayfinding
Undo/redo and recovery patterns

Example Interactions

"Design the interaction flow for a drag-and-drop file upload"
"Create loading and error states for this API call"
"Improve the micro-interactions on this form"
"Design an undo pattern for destructive actions"
"Review this wizard flow for interaction clarity"

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/majiayu000-claude-skill-registry-interaction-design-nick-6bf5a3/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

majiayu000-claude-skill-registry-interaction-design-nick-6bf5a3.ocm.jsonjson

{
  "ocm": "1",
  "id": "majiayu000-claude-skill-registry-interaction-design-nick-6bf5a3",
  "kind": "skill",
  "name": "interaction-design",
  "description": "User flow design, micro-interactions, and interface behavior patterns with state management for all interaction conditions. Use when designing natural interactions, feedback systems, or handling error states.",
  "publisher": "majiayu000",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "interaction-design",
      "micro-interactions",
      "state-transitions",
      "user-flows",
      "animation",
      "feedback-patterns",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "User flow design, micro-interactions, and interface behavior patterns with state management for all interaction conditions. Use when designing natural interactions, feedback systems, or handling error states."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/majiayu000/claude-skill-registry",
      "path": "skills/design/interaction-design-nickcrew-claude-cortex/SKILL.md",
      "ref": "a16e8e7bdddc9a7406a56f51e520cef7a8646208",
      "url": "https://github.com/majiayu000/claude-skill-registry/blob/a16e8e7bdddc9a7406a56f51e520cef7a8646208/skills/design/interaction-design-nickcrew-claude-cortex/SKILL.md",
      "key": "majiayu000/claude-skill-registry/skills/design/interaction-design-nickcrew-claude-cortex/SKILL.md"
    }
  },
  "instructions": "# Interaction Design\n\nDesign natural interactions with clear feedback that gracefully handle all states. Covers user flows, micro-interactions, state transitions, and interface behavior patterns for web and mobile applications.\n\n## When to Use This Skill\n\n- Designing interaction flows for new features (drag-and-drop, wizards, modals)\n- Creating loading, empty, error, and success states\n- Improving micro-interactions on forms, buttons, or navigation\n- Designing undo/redo and recovery patterns for destructive actions\n- Reviewing interaction clarity in multi-step flows\n- Planning animation and tr",
  "cost": {
    "context_tokens": 752
  }
}

Fetch it by URL: GET /api/v1/registry/majiayu000-claude-skill-registry-interaction-design-nick-6bf5a3/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.