motion-scale
CommunityDefine a cohesive UI motion system across formats.
Authordylantarre
Version1.0.0
Installs0
System Documentation
What problem does it solve?
The Motion Scale Generator provides a centralized system for defining animation durations, easing curves, and delays, ensuring a cohesive motion language across a design system and web applications.
Core Features & Use Cases
- Unified motion tokens: durations, easing curves, and delays are standardized into a semantic token set for consistent UI behavior.
- Flexible outputs: generate CSS custom properties, a Tailwind config extension, and JSON token structures for cross-platform usage.
- Accessibility & performance: includes reduced-motion aware tokens and semantic transitions to maintain a smooth UX across devices.
- Use cases: establish a global motion system for components, micro-interactions, and onboarding sequences.
Quick Start
Configure your motion tokens for duration, easing, and delay, then generate the outputs and integrate into CSS variables, Tailwind theme, and JSON data.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: motion-scale Download link: https://github.com/dylantarre/design-system-skills/archive/main.zip#motion-scale Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.