motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

38|3|Updated Dec 29, 2025

Search Tags:#CSS #JSON #tokens #Tailwind #motion #design-tokens #reduced-motion

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill motion-scale

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/motion-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill motion-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about motion-scale

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

FAQPage Schema

How do I create a cohesive UI motion system with CSS and Tailwind tokens?▼

You can create a cohesive UI motion system by generating standardized duration, easing, and delay tokens that output as CSS custom properties, Tailwind config extensions, and JSON structures for consistent web app behavior.

What are design tokens for animation timing and easing curves?▼

Animation timing design tokens are standardized variables defining durations, easing curves, and delays, ensuring a unified motion language across components and states in a design system.

Can I generate JSON motion tokens that support reduced-motion accessibility?▼

Yes, the generated JSON motion tokens include reduced-motion aware properties, ensuring your UI maintains smooth transitions and accessibility across different devices and user preferences.

How do I standardize micro-interaction delays across a component library?▼

Standardize micro-interaction delays by applying semantic token sets across your component library, enabling consistent transitions for onboarding sequences and component states.

Does this motion token generator work for both web apps and component libraries?▼

Yes, the motion token generator applies to both web applications and component libraries, providing a centralized system to define consistent animation durations, easing curves, and delays.

What's the best way to manage animation duration and easing in a design system?▼

The best way to manage animation duration and easing is to use a centralized motion system that standardizes tokens into CSS, Tailwind, and JSON outputs for cross-platform consistency.