skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

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
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill motion-scale
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Aniket-a14Aniket-a14
22

design-system-patterns

Define design tokens and implement theming with CSS custom properties.

Community
Advanced
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
elab-developmentelab-development

tailwindcss-development

Automate web interface styling with Tailwind CSS v4 utilities.

Official
Intermediate
Shaarav4795Shaarav4795

ui-animation

Define UI motion guidelines for timing, easing, reduced-motion, and transitions.

Community
Intermediate