PlugWiki

interaction-design Skill: Microinteractions, Motion and Feedback for UI

Gives your agent a set of rules and code patterns for UI microinteractions, transitions, loading states and feedback.

Installs
16.6K
on skills.sh
Stars
42.1K
on GitHub
Files
3
besides SKILL.md
Updated
Oct 2026
last repo commit

It loads when you add polish to a UI, build loading states, or add transitions. The SKILL.md sets principles (purposeful motion, timing guidelines, easing) and covers five pattern groups: loading states, state transitions, page transitions, feedback and gestures. It adds CSS keyframe and transition patterns, accessibility rules, and a list of common problems such as janky animations.

Three reference files go deeper on animation libraries (Framer Motion, GSAP, CSS spring physics, the Web Animations API and View Transitions), microinteraction patterns and scroll animations. Code samples use React with Framer Motion, so they assume npm packages you may need to install.

Good for

  • Front-end developers adding polish to an interface
  • Designers handing motion specs to an agent
  • Teams that need reduced-motion support

Install interaction-design

Claude Code

  1. 1

    Copy this prompt.

    Install the interaction-design skill in Claude Code. Run this command:

npx skills add https://github.com/wshobson/agents --skill interaction-design

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

Sections in SKILL.md

  1. When to Use This Skill
  2. Core Principles
  3. 1. Purposeful Motion
  4. 2. Timing Guidelines
  5. 3. Easing Functions
  6. Quick Start: Button Microinteraction
  7. Interaction Patterns
  8. 1. Loading States
  9. 2. State Transitions
  10. 3. Page Transitions
  11. 4. Feedback Patterns
  12. 5. Gesture Interactions
  13. CSS Animation Patterns
  14. Keyframe Animations
  15. CSS Transitions
  16. Accessibility Considerations

Key facts

Author
wshobson
Installs on skills.sh
16,614 (Nov 2, 2026)
GitHub stars
42,081 (Nov 2, 2026), whole repo
Files
4 files including SKILL.md
Last commit
Oct 30, 2026 (repo)
Part of
The ui-design plugin in wshobson/agents

What it includes

  • Purposeful motion, timing guidelines, easing

    Rules for when and how long to animate.

    Core principles

  • Loading, state transitions, page transitions, feedback, gestures

    Five groups of patterns with code.

    Interaction patterns

  • Keyframes and transitions

    CSS examples for common effects.

    CSS animation patterns

  • prefers-reduced-motion support

    CSS and React samples that shorten or skip motion.

    Accessibility

  • Framer Motion, GSAP, CSS spring, Web Animations API, View Transitions

    In references/animation-libraries.md.

    Animation libraries reference

  • Buttons, forms, toasts, dialogs, navigation

    In references/microinteraction-patterns.md.

    Microinteraction reference

  • Intersection Observer, parallax, reveals, sticky sections

    In references/scroll-animations.md.

    Scroll animations reference

From the official docs

Questions

What does the interaction-design skill do?

It tells your agent how to design and code UI motion. That includes microinteractions, loading states, transitions, toasts, gestures and scroll effects, with accessibility rules.

How do I install it?

Use the install box above. The folder is a SKILL.md plus three reference files, 4 files in all, and bundles no scripts.

Does it only work with React?

The patterns use React with Framer Motion in places, and CSS in others. The reference files also cover GSAP and the Web Animations API.

Does it respect reduced motion?

Yes. The SKILL.md has an accessibility section with a prefers-reduced-motion media query and a React example, and lists it among best practices.

Is it safe?

It bundles no scripts: SKILL.md and three reference files hold guidance and code samples. The samples use Framer Motion, GSAP and similar libraries, so any package the agent adds to your project is a normal dependency to review.

How is it different from a design-system skill?

This one covers motion and feedback only. It does not define colors, spacing or components.

Information

updated Nov 2, 2026

Repository
wshobson/agents
Folder
plugins/ui-design/skills/interaction-design

wshobson/agentsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4
  1. interaction-design SKILL.md · github.com
  2. animation-libraries.md · github.com
  3. interaction-design microinteraction patterns · github.com
  4. interaction-design scroll animations · github.com

Updated Nov 2, 2026.