skills.rest
yogvidwankhede
yogvidwankhedeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion-design

Audit interface animations using physics-based acceleration profiles and perceptual timing.

1|Updated Jul 26, 2026
Search Tags:#ui#performance#accessibility#css#animation#ux#motion
One-click install
npx skills add https://github.com/yogvidwankhede/vishwakarma --skill motion-design-yogvidwankhede
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/yogvidwankhede/vishwakarma/tree/main/.claude/skills/motion-design
Command: npx skills add https://github.com/yogvidwankhede/vishwakarma --skill motion-design-yogvidwankhede

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the problem of undifferentiated, sluggish, or broken interface motion by providing a rigorous, physics-based framework for animations that communicate intent rather than just adding latency.

Core Features & Use Cases

  • Motion Grammar: Defines eight specific motion intents (enter, exit, transform, etc.) with precise duration and easing parameters.
  • Physics-Based Tuning: Replaces arbitrary stiffness/damping with human-tunable damping ratios and natural frequencies.
  • Design Contract: Provides a checklist to ensure animations are compositor-safe, interruptible, and respectful of reduced-motion preferences.
  • Use Case: Use this to audit a complex modal transition or a list reordering animation to ensure it preserves object permanence and feels responsive to user input.

Quick Start

Apply the motion-design skill to audit the current modal transition and ensure it follows the entrance and exit duration rules.

Frequently Asked Questions about motion-design

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

FAQPage Schema
How do I audit UI animations to ensure they are compositor-safe and interruptible?▼

To audit UI animations for compositor safety, you verify property usage and check that motion patterns are interruptible. This framework provides a design contract checklist to evaluate transitions against performance and accessibility rules.

What is physics-based motion tuning for interface animations?▼

Physics-based motion tuning replaces arbitrary stiffness and damping values with human-tunable damping ratios and natural frequencies. This approach grounds UI animations in physical acceleration profiles to communicate clear intent.

How do I define motion grammar for UI transitions and state-change feedback?▼

Motion grammar defines eight specific motion intents, such as enter and exit, with precise duration and easing parameters. This structure standardizes interface animations to ensure consistent and perceptually accurate state-change feedback.

Does this approach support reduced-motion preferences for accessible UX?▼

Yes, accessible UX requires respecting reduced-motion preferences. The framework includes a design contract that ensures interface animations adhere to accessibility constraints while maintaining compositor-safe performance.

Why do my sluggish UI transitions feel like they are just adding latency?▼

Sluggish UI transitions often lack physical grounding and communicate no intent. Applying physics-based acceleration profiles and perceptual timing parameters ensures motion feels responsive rather than simply adding latency.

Can I use this motion framework for gesture-driven interactions and list reordering?▼

Yes, the framework applies to gesture-driven interactions and list reordering animations. It ensures these complex transitions preserve object permanence and remain responsive to user input through interruptible patterns.

Related Skills

Explore More Design & Creative Skills→
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
catlog22catlog22
76

team-motion-design

Design and validate motion systems for UI animation and reduced-motion accessibility.

Community
Advanced
marchattonmarchatton
5

interaction-design

Design microinteractions, transitions, and feedback patterns with Framer Motion and CSS animations.

Community
Intermediate