Audit an existing app's design system and current motion, then apply coherent, performant, accessible motion using the right-sized 2026 stack — CSS/tw-animate-css for utility transitions, Auto-Animate for zero-config list/layout changes, Motion (motion.dev, ex-Framer Motion) for component transitions/gestures/presence, and GSAP only for complex timelines. Defines a motion-token SSOT (durations/easings) coherent with the app's existing scale, respects prefers-reduced-motion, and keeps everything on transform/opacity at 60fps. Use when "add motion", "animate the app", "make it feel alive", "motion pass", "add micro-interactions across the app", or "enhance-motion". Distinct from design-motion (from-scratch cookbook): this audits the existing system first and layers motion coherently on top. Applies changes and verifies them.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryGrowth & marketingStars0
About this skill
Audit an existing app's design system and current motion, then apply coherent, performant, accessible motion using the right-sized 2026 stack — CSS/tw-animate-css for utility transitions, Auto-Animate for zero-config list/layout changes, Motion (motion.dev, ex-Framer Motion) for component transitions/gestures/presence, and GSAP only for complex timelines. Defines a motion-token SSOT (durations/easings) coherent with the app's existing scale, respects prefers-reduced-motion, and keeps everything on transform/opacity at 60fps. Use when "add motion", "animate the app", "make it feel alive", "motion pass", "add micro-interactions across the app", or "enhance-motion". Distinct from design-motion (from-scratch cookbook): this audits the existing system first and layers motion coherently on top. Applies changes and verifies them.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Audit an existing app's design system and current motion, then apply coherent, performant, accessible motion using the right-sized 2026 stack — CSS/tw-animate-css for utility transitions, Auto-Animate for zero-config list/layout changes, Motion (motion.dev, ex-Framer Motion) for component transitions/gestures/presence, and GSAP only for complex timelines. Defines a motion-token SSOT (durations/easings) coherent with the app's existing scale, respects prefers-reduced-motion, and keeps everything on transform/opacity at 60fps. Use when "add motion", "animate the app", "make it feel alive", "motion pass", "add micro-interactions across the app", or "enhance-motion". Distinct from design-motion (from-scratch cookbook): this audits the existing system first and layers motion coherently on top. Applies changes and verifies them.
About this listing
Category
Growth & marketing
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI