What is the interaction design skill?
The interaction-design skill, listed here as wshobson-interaction-design, is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It guides an AI coding agent on purposeful motion, timing bands, easing curves, loading states, page transitions and reduced motion support for polished interfaces.
This page uses the slug wshobson-interaction-design for a skill named interaction-design in its SKILL.md. It ships in the ui-design plugin of wshobson/agents and covers microinteractions, motion, transitions and feedback patterns.
Its first principle is that motion should communicate, not decorate. The four jobs it allows are feedback, orientation, focus and continuity, which gives an agent a test for each animation it adds.
Timing and easing the skill sets
- 100 to 150ms for micro-feedback such as hovers and clicks.
- 200 to 300ms for small transitions such as toggles and dropdowns.
- 300 to 500ms for medium transitions such as modals and page changes.
- 500ms and above for complex choreographed animation.
- Easings: ease-out for entering, ease-in for exiting, ease-in-out for moving and a spring curve for playful overshoot.
Patterns with code
The SKILL.md carries Framer Motion examples for a button microinteraction, skeleton screens, a progress bar, a toggle and layout animations. A reduced motion media query and a matchMedia check close the file.
Who the interaction design skill is for
Best for
- Adding loading states, toasts, hover and focus feedback to a React interface.
- Giving an agent a timing scale so animations feel consistent across the app.
- Related: fixing-motion-performance and improve-animations.
Not for
- Choreographing scroll timelines in depth. Related: gsap-scrolltrigger.
- Static layout and hierarchy decisions, which belong to other skills.
- Non-React stacks that cannot use the Framer Motion examples directly, though the principles still apply.
Use it with UiChemy
Motion designed here still has to land on a site. UiChemy converts a Figma design into Elementor or Gutenberg with Figma to WordPress, and Composer lets you fine tune the result visually. Click Get Started on uichemy.com.
How to install Interaction Design Skill: Motion, Feedback and States
gh skill install wshobson/agents interaction-designCheck GitHub CLI
The
gh skillcommand requires GitHub CLI 2.90 or later. Rungh --versionand upgrade first if your version is older.Install the skill
Run
gh skill install wshobson/agents interaction-designand select your coding tool when prompted. The README says this reads the skill from GitHub without cloning the repository.Or install the whole plugin
Inside Claude Code run
/plugin marketplace add wshobson/agents, then/plugin install ui-design@claude-code-workflows. This adds the ui-design plugin that contains the skill, with its agents, commands and hooks.Invoke it
Try a prompt such as: use interaction-design to add feedback to this form button. Name the component so the agent edits the right file.
Check that it loaded
Ask the agent to add a loading state to a card list. It should use a skeleton that keeps layout, a timing from the 200 to 300ms band and a reduced motion fallback.
Key features
- Purposeful motion testEvery animation must give feedback, show orientation, direct focus or keep continuity, which stops decorative motion from creeping in.
- Four timing bandsFrom 100 to 150ms up to 500ms and above, each tied to a use such as hovers, toggles, modals or choreographed sequences.
- Easing tokensFour CSS custom properties for ease-out, ease-in, ease-in-out and spring, with a note on when each fits.
- Button microinteractionA Framer Motion button with a hover scale of 1.02, a tap scale of 0.98 and a spring transition.
- Loading statesSkeleton screens preserve layout while data loads, and a progress bar shows determinate progress.
- State transitionsA switch toggle with role and aria-checked, animated with a spring, shows the pattern for accessible state changes.
- Page and layout transitionsFramer Motion layout animations are included for moving between views.
- Reduced motionA prefers-reduced-motion media query and a JavaScript check shorten or remove animation for users who ask.
- Best practices and pitfallsAnimate transform and opacity for 60fps, avoid width, height, top and left, keep animations interruptible and clean up listeners.
- Three reference filesanimation-libraries.md, microinteraction-patterns.md and scroll-animations.md extend the main file.
Frequently asked questions
What is the interaction design skill?
It is a skill named interaction-design in the ui-design plugin of the wshobson/agents repository. It guides an AI coding agent on microinteractions, motion, transitions and feedback so UI interactions feel responsive and purposeful instead of decorative.
How do I install it?
Run gh skill install wshobson/agents interaction-design and choose your coding tool at the prompt. This needs GitHub CLI 2.90 or later. You can also add the whole ui-design plugin with /plugin install ui-design@claude-code-workflows after registering the marketplace.
Why is the slug wshobson-interaction-design?
The skill's own name is interaction-design. This hub prefixes the repository owner so the page slug stays distinct from similarly named skills. The install command still uses the plain name interaction-design.
What durations does it recommend?
100 to 150ms for micro-feedback, 200 to 300ms for small transitions, 300 to 500ms for modals and page changes, and 500ms or more for complex choreography. The SKILL.md also says to use one timing scale across the whole app.
Does it handle reduced motion?
Yes. It includes a prefers-reduced-motion media query that cuts animation and transition durations, plus a matchMedia check for Framer Motion. Respecting that preference is also listed among its best practices.
Which AI coding agents can use the skill?
The repository README describes support for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, Google Antigravity and Pi through different install routes. Skills-only installs ask which coding tool you use, so pick yours at the prompt.
What license does the skill use?
GitHub lists the wshobson/agents repository as MIT licensed, and the interaction-design skill sits inside its ui-design plugin. Confirm the license in the repository before copying the folder into a product of your own.