interaction-design

Overview of interaction-design skill

What the interaction-design skill does

The interaction-design skill helps an agent design and implement UI motion, microinteractions, transitions, and feedback states that make interfaces clearer and more responsive. It is best used when the job is not just “make it animate,” but “make the interface communicate state, intent, and change through motion.”

Who should install this skill

This interaction-design skill fits UI designers, frontend engineers, and product teams working on polished product surfaces: buttons, loading states, modals, toasts, scroll reveals, drag-and-drop, hover states, and page transitions. It is especially useful if you already know the feature you want, but need better structure for timing, easing, and interaction patterns.

Real job-to-be-done

Most users adopt interaction-design to solve a practical problem: generic prompts often produce flashy but arbitrary animation. This skill pushes the agent toward purposeful motion for feedback, orientation, focus, and continuity. That makes it more useful for production UI Design than a vague “add delightful animations” request.

What makes it different from a generic UI prompt

The main value is constraint. The skill gives timing guidance, easing patterns, and concrete implementation references instead of leaving the model to improvise. It also includes example-heavy reference files for animation libraries, microinteraction patterns, and scroll animations, which materially reduce guesswork during implementation.

What to check before installing

Install this skill if you want implementation-ready guidance and pattern examples. Skip it if your need is broader visual design strategy, design systems governance, or full accessibility auditing. The repository is strongest on interaction behavior and frontend implementation patterns, particularly React-oriented examples.

How to Use interaction-design skill

interaction-design install and setup context

The upstream SKILL.md does not provide a CLI install command, so use your normal skills workflow for the wshobson/agents repository and then activate interaction-design from plugins/ui-design/skills/interaction-design. Before first use, read:

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

If you only skim one support file, start with references/microinteraction-patterns.md because it maps closest to common product work.

Best moments to invoke interaction-design

Use interaction-design when you are:

• adding loading, success, error, or disabled states
• making dropdowns, modals, tabs, or drawers feel clearer
• refining hover, focus, press, and gesture feedback
• implementing page or component transitions
• adding scroll-triggered reveals or progress indicators
• choosing between CSS transitions and a JS animation library

It is less helpful for static wireframes or purely aesthetic brand exploration.

What inputs the skill needs

The quality of interaction-design usage depends heavily on input specificity. Provide:

• component or flow name
• user action that starts the interaction
• before and after states
• platform or framework
• constraints on motion, performance, and accessibility
• whether you need concept only, code only, or both

A weak input:

• “Add nice animations to this dashboard.”

A stronger input:

• “Use the interaction-design skill to improve a React settings panel. I need hover, pressed, saving, success, and error states for a save button; a 250ms drawer transition; and motion that feels calm, not playful. Prefer CSS or Framer Motion. Respect reduced motion.”

How to turn a rough goal into a strong prompt

A good interaction-design guide prompt usually has four parts:

1. UI surface: what component or screen is changing
2. Intent: what the motion should communicate
3. Constraints: timing, stack, accessibility, performance
4. Output shape: pattern rationale, code, and edge cases

Example:

• “Apply the interaction-design skill for UI Design on a checkout form. Design loading and validation feedback for submit, inline field errors, and a success transition after payment. Use React and Tailwind. Include durations, easing choices, reduced-motion handling, and sample implementation.”

Suggested workflow for real projects

A practical workflow is:

1. Define the user action and state changes.
2. Ask the skill for behavior rationale first.
3. Ask for implementation in your stack.
4. Compare output against the reference files.
5. Trim any motion that does not improve feedback or orientation.
6. Test reduced motion and slower devices.

This sequence works better than asking for full code immediately, because the skill’s biggest value is choosing the right motion system before coding.

Repository reading path that saves time

If you are making an install decision, read in this order:

1. SKILL.md for principles and timing guidance
2. references/microinteraction-patterns.md for common UI states
3. references/animation-libraries.md if you need library selection help
4. references/scroll-animations.md if your use case is viewport-driven

That path reveals the real strength of the skill: not theory alone, but pattern-backed implementation.

Library and implementation choices

The references lean heavily toward React patterns and include Framer Motion examples, plus native browser approaches like IntersectionObserver. That means the interaction-design skill is a good fit if you want either:

• lightweight CSS or browser-native interactions
• richer declarative animation in React

If you are working outside React, the principles still transfer well, but some code examples will need adaptation.

Practical timing and easing guidance

One of the most useful pieces of the skill is its timing model:

• 100-150ms for hover and click feedback
• 200-300ms for small component transitions
• 300-500ms for modals and larger state changes
• 500ms+ only for more choreographed sequences

Use this as a starting baseline, not a rule to follow blindly. The fastest path to better output is asking the agent to justify each duration by purpose: feedback, orientation, focus, or continuity.

Common usage patterns supported well

This interaction-design usage is strongest for:

• loading buttons and async feedback
• tab and shared layout transitions
• hover and tap affordances
• skeletons and progress indicators
• scroll reveal sections
• notification and toast motion
• drag-and-drop visual feedback

These are exactly the places where ordinary prompts often under-specify state changes and produce brittle UI behavior.

Constraints to state explicitly

To get reliable output, say these things out loud:

• support prefers-reduced-motion
• avoid layout shift
• keep animations interruptible
• do not block user input during transitions unless necessary
• prefer GPU-friendly transforms over expensive layout changes
• match an interaction tone such as calm, crisp, playful, or enterprise-neutral

Without these constraints, the agent may default to motion that looks good in isolation but feels wrong in product context.

interaction-design skill FAQ

Is interaction-design worth using over a normal prompt?

Yes, if you care about implementation quality and motion purpose. A normal prompt may produce decorative animation. The interaction-design skill is more useful when you need state-aware behavior, timing guidance, and example-backed patterns you can actually ship.

Is this interaction-design skill beginner-friendly?

Moderately. The principles are easy to follow, but many examples assume frontend comfort, especially React and animation-library usage. Beginners can still use it well if they ask for simpler outputs like CSS transitions, state diagrams, or implementation steps.

Does interaction-design work only for React?

No, but React gets the clearest support through the references, especially with Framer Motion. If your stack is Vue, Svelte, or plain JavaScript, ask the agent to translate the pattern while preserving timing, easing, and state logic.

When should I not use interaction-design?

Do not use interaction-design when the bigger problem is information architecture, visual branding, or product strategy. It also is not the right tool for animation-heavy marketing scenes where cinematic storytelling matters more than usability feedback.

Can I use interaction-design for UI Design systems work?

Yes, especially for standardizing motion tokens, timing ranges, hover/press behavior, loading states, and transition conventions across components. It is more useful for interaction rules than for full design token architecture.

Does it cover accessibility automatically?

Not fully. The skill supports better motion decisions, but you should still explicitly request reduced-motion behavior, focus visibility, keyboard interaction handling, and non-motion feedback for important status changes.

How to Improve interaction-design skill

Give the skill state-by-state inputs

The best way to improve interaction-design output is to describe each state, not just the component. For example:

• idle
• hover
• pressed
• loading
• success
• error
• disabled

This helps the agent design transitions that connect real state changes instead of inventing isolated effects.

Ask for rationale before code

A common failure mode is jumping straight to implementation. First ask:

• what should move
• why it should move
• how long it should take
• what user confusion it prevents

Then ask for code. This produces cleaner motion and reduces over-animation.

Specify your motion budget

Say whether you want:

• minimal utility motion
• moderate product polish
• expressive branded motion

This single instruction changes the result quality a lot. Without it, the model may overshoot and add animation density your product does not need.

Request reduced-motion and fallback behavior

If you want production-ready results, ask the skill to provide:

• prefers-reduced-motion handling
• a no-animation or lower-motion variant
• keyboard and screen-state feedback that does not rely on motion alone

This is one of the easiest ways to turn a decent answer into a shippable one.

Provide code context, not just screenshots

If you already have a component, paste the relevant JSX, CSS, or state logic. The interaction-design skill becomes much more useful when it can map motion to real event handlers, state names, and DOM structure.

Watch for these common failure modes

Be cautious if the first output has:

• animation on every element with no communication purpose
• mismatched timing across related components
• transitions that hide latency instead of explaining it
• hover effects that do not translate to touch
• scroll animations that trigger too often or hurt readability

These are signs the prompt needs stronger constraints.

Iterate by testing one interaction family at a time

Do not redesign all motion at once. Start with one family, such as buttons or modal transitions, then expand. This makes it easier to evaluate whether the interaction-design skill is improving clarity or just adding movement.

Cross-check the references for implementation depth

If an answer feels generic, redirect the agent to the repository support files:

• references/microinteraction-patterns.md for common component states
• references/animation-libraries.md for API-level examples
• references/scroll-animations.md for viewport-triggered behavior

That usually lifts the answer from conceptual to implementation-ready.

Ask for tradeoffs, not only recommendations

A high-value prompt is:

• “Use interaction-design and compare CSS transitions vs Framer Motion for this component, including bundle cost, complexity, and maintainability.”

That forces the model to help with adoption decisions, not just generate code.

Improve output quality with concrete review criteria

End your prompt with review criteria such as:

• “Keep motion purposeful, short, and consistent.”
• “Avoid layout shift.”
• “Respect reduced motion.”
• “Prefer patterns that are easy to maintain.”
• “Explain how the interaction improves feedback or orientation.”

Those criteria align the interaction-design guide with what teams actually need to approve and ship UI motion.