Generate standardized motion duration and easing tokens for frontend codebases.
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill motion-dragoon0x
Please help me install this Agent Skill. Skill: motion Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/motion Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill motion-dragoon0x
This Skill solves the problem of inconsistent, one-off motion values (durations and easings) scattered across your codebase that lead to unpolished, disjointed UI animations and make maintaining a cohesive motion system difficult.
Ask your AI agent to generate a complete set of standardized motion duration and easing tokens for your project using the motion skill, and include the --apply flag if you want to save the generated tokens directly to your codebase.
High-intent search queries and answers about installing and using this skill.
Eliminate ad-hoc motion values by generating standardized fast, normal, and slow duration tokens alongside standard, enter, and exit easing tokens. The system snaps to existing codebase values when detected or falls back to material design defaults.
When no existing motion patterns are found, the system falls back to material-quality default motion values for durations and easings. This provides a baseline set of animation tokens to establish a cohesive motion system from scratch.
Yes, you can save generated motion design tokens directly to your codebase by including the --apply flag when prompting your AI agent. This automatically writes the standardized duration and easing values into your project.
Clean up scattered transition durations across legacy UI components by consolidating them into a maintainable token set. The system detects existing one-off animation parameters and standardizes them into consistent fast, normal, and slow duration tiers.
Yes, this approach works for both duration and easing values by generating distinct token sets for each. It creates fast, normal, and slow duration tokens and separate standard, enter, and exit easing tokens to fully cover UI animation requirements.
mmartinsolivDesign UI animations with transform and opacity effects and reduced-motion fallbacks.
EliasOulkadiReview UI component interactions and animations for motion and accessibility compliance.
thejordanleopoldCodify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.
Eng0AIBuild a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.
