MCPInstall

micro-interactions

by dylantarreFrontend & Design

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

Installs
1.4K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads micro-interactions automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Micro-interaction Animation

Apply Disney's 12 animation principles to small UI feedback moments and interface details.

Quick Reference

PrincipleMicro-interaction Implementation
Squash & StretchButton press compression, toggle bounce
AnticipationHover state hints, pre-click feedback
StagingFocus attention on active element
Straight Ahead / Pose to PoseProgress vs state changes
Follow Through / OverlappingRipple effects, settling motion
Slow In / Slow OutSnappy but smooth transitions
ArcToggle switches, circular menus
Secondary ActionIcons respond to parent state
Timing100-300ms for most interactions
ExaggerationClear but not distracting
Solid DrawingConsistent transform behavior
AppealDelightful, purposeful feedback

Principle Applications

Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.

Anticipation: Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.

Staging: Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.

Straight Ahead vs Pose to Pose: Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.

Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.

Slow In / Slow Out: Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.

Arc: Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.

Secondary Action: Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.

Timing: Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.

Exaggeration: Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.

Solid Drawing: Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.

Appeal: Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.

Component Patterns

Button States

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

Toggle Switch

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

Checkbox

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

Timing Reference

InteractionDurationEasing
Hover100msease-out
Click/tap100msease-out
Toggle150-200msspring/elastic
Checkbox150msease-out
Focus ring100msease-out
Tooltip show150msease-out
Tooltip hide100msease-in
Badge update200mselastic
Form error200msease-out

Best Practices

  1. Every interactive element needs feedback
  2. Disabled states: no animation, reduced opacity
  3. Group related feedback together
  4. Don't animate on every change—filter unnecessary updates
  5. Test without animation—functionality shouldn't depend on it
  6. Respect prefers-reduced-motion

FAQ

What does the micro-interactions skill do?

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

How do I install micro-interactions?

Run npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/micro-interactions/ (personal) or .claude/skills/micro-interactions/ (project).

Which AI agents can use micro-interactions?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is micro-interactions safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains micro-interactions?

It is published by dylantarre in dylantarre/animation-principles. It has 1,436 recorded installs.

More from dylantarre/animation-principles

View all →

video-motion-graphics

dylantarre/animation-principles

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

Media & Creative2.4K installs

mobile-touch

dylantarre/animation-principles

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Mobile2.4K installs

framer-motion

dylantarre/animation-principles

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

Frontend & Design1.7K installs

motion-designer

dylantarre/animation-principles

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.

Frontend & Design1.6K installs

web-motion-design

dylantarre/animation-principles

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

Frontend & Design1.3K installs

scroll-animations

dylantarre/animation-principles

Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.

Frontend & Design1.1K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs