motion

Names, decides, builds, and reviews UI animations using CSS springs and micro-interactions.

1|Updated Aug 17, 2026

Search Tags:#frontend #animation #micro-interactions #reduced motion #springs #css transitions #ui motion

One-click install

npx skills add https://github.com/NalinDalal/skillset --skill motion-nalindalal

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/motion
Command: npx skills add https://github.com/NalinDalal/skillset --skill motion-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams struggle to name animation effects, decide when motion is appropriate, and implement animations that feel physical rather than decorative, often shipping stuttering layout animations or endless loops. ## Core Features & Use Cases - Effect Naming: Reverse-lookup table maps plain descriptions ("bouncy thing when a popover opens") to named effects like pop-in, rubber-banding, and stagger. - Decision Framework: Ordered questions determine whether an interaction deserves motion based on frequency, visibility, and purpose before any code is written. - Build & Review Guidance: Concrete rules for properties (transform/opacity only), curves, durations, interruption, exits, and reduced-motion support, plus audit checklists for existing codebases. - Use Case: When asked to "make this UI feel alive," the skill audits the screen, flags decorative loops for removal, and specifies exact spring values for the interactions that genuinely need feedback. ## Quick Start Ask the agent to review the animations on this page and suggest which ones to keep, fix, or remove.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I support prefers-reduced-motion in animations?▼

Every animation must also ship without it: when the user requests reduced motion, state changes become instant with no springs, entrances, or parallax. The reduced-motion path must be implemented, not just mentioned.