Does this skill handle web accessibility?

Yes, every motion proposal includes a mandatory reduced motion alternative using the prefers-reduced-motion media query to ensure inclusive design.

How does crit-motion help with UI performance?

It guides developers to use hardware-accelerated properties like transform and opacity, avoiding layout-shifting properties that cause jank during animations.

What are duration tiers in this skill?

They are standardized timing ranges—Micro, Fast, Standard, Emphasis, and Dramatic—that ensure consistent pacing across different scales of UI interaction.

Can I visualize the animations before implementing them?

Yes, crit-motion generates HTML wireframe artifacts that provide live, interactive demonstrations of duration and easing tokens directly in the browser.

Motion Design Critique

Name: Motion Design Critique
Author: metedata

bymetedata

0•

デザインツール

Evaluates and implements professional UI animation, transitions, and micro-interactions with structured feedback loops.

The crit-motion skill provides a systematic framework for Claude to review and refine motion design within user interfaces. It guides the development of consistent duration scales, natural easing curves, and purposeful transition patterns while ensuring accessibility through reduced motion alternatives. By generating interactive HTML wireframe artifacts, it allows developers and designers to visualize and iterate on the temporal dimension of their design systems, from subtle button presses to complex page transitions, ensuring every movement feels natural and purposeful.

主な機能

01Standardized duration tiers (100ms to 1000ms) for consistent timing across UI elements

02Pre-defined easing curve tokens including ease-out, spring, and snappy functions

03Structured patterns for complex state transitions like modals, drawers, and accordions

04Mandatory reduced-motion accessibility standards for every generated animation

05Interactive HTML wireframes for side-by-side comparison of different motion styles

060 GitHub stars

ユースケース

01Defining a cohesive motion system for a new UI component library or design system

02Prototyping micro-interactions and scroll-triggered animations with best-practice constraints

03Auditing existing web transitions for timing, easing, and performance consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-motion

For use in Claude.ai and ChatGPT

Download Skill