Guide · Agent skill

How to use the Interaction Design agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The Interaction Design skill is an instruction file for an AI agent that teaches it a set of UI motion and feedback conventions: how long transitions should run, which easing curves to use, and how to build loading states, button feedback, toggles, page transitions, swipe gestures and scroll animations. It is aimed at front-end developers and designers working on React or web interfaces. By the end of this guide you will know what the skill changes, how to install it, how to ask for help with natural requests, and what to check before shipping the code it produces.

Interaction Designwshobson/agents · MIT Download the skill

Quick start

1Download the ZIP. Get the interaction-design skill ZIP from this directory page.
2Unzip into a skills folder. Place the skill folder in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project.
3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
4Check your project setup. Make sure you have a Node/React project and Framer Motion installed for the React examples.
5Ask for a specific interaction. Describe the element, the state change and the feel you want, in plain language.
6Review the code and test. Check the generated animations for reduced-motion handling, input blocking and performance on real devices.

What does the interaction-design skill make the agent do?

Skills are instruction files that teach an AI agent a specialised capability. This one is a design playbook with code examples rather than a tool that changes anything on its own. Once it is loaded, the agent writes UI animation and interaction code that follows consistent guidelines.

The guidelines cover motion that communicates (feedback, orientation, focus and continuity), a timing scale and a set of easing curves. The skill's own timing table suggests 100-150ms for micro-feedback such as hovers and clicks, 200-300ms for small transitions like toggles and dropdowns, 300-500ms for modals and page changes, and 500ms+ for complex choreographed animations.

Loading states: skeleton screens and determinate progress bars
Button feedback: hover and tap scaling, and loading buttons
State transitions: toggles and colour changes
Page and component transitions with enter and exit animations
Gesture interactions such as swipe to dismiss
Scroll-triggered animations and reduced-motion handling

How do you install the interaction-design skill?

Download the ZIP file from this directory page. Unzip it so that the skill folder sits in your personal skills folder at ~/.claude/skills/, or in a project-specific folder at .claude/skills/ inside your project. A project folder keeps the skill available only to that project.

If you use the Claude apps instead of files on disk, you can upload the skill under Settings → Capabilities → Skills.

Personal install: ~/.claude/skills/ (available across your projects)
Project install: .claude/skills/ inside the project folder (available only there)
Claude apps: Settings → Capabilities → Skills, then upload the skill

How do you trigger the skill with natural requests?

You do not need a special command. The skill's description tells the agent when to use it: adding polish to UI interactions, implementing loading states, or creating delightful user experiences. Ask in plain language and name the thing you are building. Mentioning your stack helps, because the examples assume React, Tailwind-style classes and Framer Motion.

Good requests say what the element is, what should happen and what the user should feel. The skill also covers hover and focus states, notification and toast systems, and drag-and-drop, so those are fair things to ask for.

"Add a loading state to this submit button in our React form."
"Make this settings toggle animate smoothly using Framer Motion."
"Add a swipe-to-dismiss gesture to these notification cards."
"Add a scroll-triggered fade-in to the feature list and respect reduced motion."

What does the example code look like?

The skill includes working React examples. A button uses whileHover and whileTap scaling with a spring transition. A toggle animates a knob with a spring. A swipe card uses drag on the x-axis and dismisses when the drag offset passes 100 pixels. The reference files add more patterns, including a loading button that swaps its label with AnimatePresence and an Intersection Observer hook for scroll animations.

Treat the snippets as starting points. The agent will adapt them to your components, and you should check the result in your own app.

import { motion } from "framer-motion";

export function InteractiveButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg"
    >
      {children}
    </motion.button>
  );
}

How does the skill handle reduced motion?

The skill reminds the agent to respect users who have reduced-motion settings turned on. Its CSS example uses a prefers-reduced-motion media query to shorten animation and transition durations to near zero, and its React example checks the same media query before choosing a duration.

This handling is basic. The skill's own guidance is that it should be checked by a human, so do not rely on it alone for strict accessibility compliance.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

What does the skill need, and what are the safety notes?

The skill needs a Node/React project setup to run the example code and the Framer Motion library for the React examples. It does not run scripts and it does not use the network. It is a set of Markdown instructions and code samples, so it only affects the code the agent writes in your project.

Because the output is code, review it like any other change. Check that the animations you add do not block input, that they are cleaned up on unmount, and that they behave on the devices you test.

Requires a Node/React project and the Framer Motion library for React examples
Runs scripts: no
Uses network: no
Files: SKILL.md, references/animation-libraries.md, references/microinteraction-patterns.md, references/scroll-animations.md

What tips help the agent produce better motion code?

The skill's best practices are a good checklist to reference in your request. Ask the agent to animate transform and opacity rather than width, height, top or left, to prefer springs over linear motion, and to keep a consistent timing scale across the app. Ask for animations that users can interrupt, and for the app to keep working without JavaScript animations.

Watch for over-animation. The skill warns that too much motion causes fatigue, so limit yourself to a few purposeful motions per screen.

Name the timing scale or durations you want, such as 200ms for toggles
Ask for transform and opacity animations for smooth performance
Ask for interruptible animations and reduced-motion support
Test on real devices, since performance varies significantly

What people use it for

Adding a loading state with a spinner and label swap to a form submit button
Animating a settings toggle with a spring-based knob
Building a skeleton screen that keeps a card's layout while data loads
Adding a swipe-to-dismiss gesture to notification or toast cards
Adding scroll-triggered fade-ins to a landing page section

Frequently asked questions

How do I install the interaction-design agent skill?

Download the ZIP from this directory page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.

What does the interaction-design skill require?

It needs a Node/React project setup to run the example code and the Framer Motion library for the React examples. It does not run scripts and does not use the network.

Is the interaction-design skill free?

The skill is published under the MIT licence. This page does not list a price, so check the source repository for any terms beyond the licence.

Does this skill work with Vue, Svelte or plain JavaScript?

The examples assume React, Tailwind-style classes and Framer Motion. The agent would need to adapt them for other frameworks, and the CSS patterns can be used on their own.

Is the reduced-motion support enough for accessibility compliance?

The skill's reduced-motion handling is basic and should be checked by a human. Do not rely on it alone if you need strict accessibility compliance.

What is an alternative if I need a different animation approach?

The skill's CSS keyframe and transition examples work without Framer Motion. For React projects you can also ask the agent to write plain CSS animations instead of Framer Motion code.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a front-end developer or designer adding polish to a React or web interface and want consistent timing, easing and feedback patterns turned into code. Pick something else if your project does not use React or the browser, or if you need accessibility compliance that has been reviewed in full, since the reduced-motion handling shown is basic.

Download the skill