mcpField
I
interaction-design

interaction-design

github.com/potetoDesign & UI571242 installsUpdated 32w ago
Repository

About interaction-design

Interaction Design is a skill for designing engaging, intuitive interactions through motion, feedback, and state transitions. It provides conventions for React animation libraries, timing, and accessibility.

Key features

  1. 01Framer Motion preference for React
  2. 02Transform and opacity CSS animation guidance
  3. 03Spring-based, interruptible motion
  4. 04Duration guidance by interaction type
  5. 05Reduced-motion accessibility requirement

Use cases

  1. 01Adding motion to React interfaces
  2. 02Designing feedback for buttons and toggles
  3. 03Building transitions that respect reduced-motion preferences

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/poteto/noodle --skill interaction-design

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

Bundled files

References and scripts installed along with SKILL.md.

references/
animation-libraries.md
microinteraction-patterns.md
scroll-animations.md

Details

From the project README

Interaction Design

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.

Project Conventions

  • Preferred library: Framer Motion for React component animations
  • CSS animations: Use transform and opacity only for 60fps performance
  • Spring physics: Prefer spring animations over linear/eased for interactive elements
  • Interruptible: Users must be able to cancel or override any animation
Timing Scale
DurationUse Case
100-150msMicro-feedback (hovers, clicks)
200-300msSmall transitions (toggles, dropdowns)
300-500msMedium transitions (modals, page changes)
500ms+Complex choreographed animations
Accessibility

Always respect prefers-reduced-motion: reduce. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.

Reference Files

Read these on demand based on the task:

FileWhen to read
animation-libraries.mdChoosing or configuring Framer Motion, GSAP, or CSS-based approaches
microinteraction-patterns.mdBuilding button feedback, toggles, ripples, loading indicators, toasts
scroll-animations.mdImplementing scroll-triggered reveals, parallax, or intersection-based animations

Comments

Markdown supported