skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

design-motion-principles

Create and audit UI animations with accessibility and performance guardrails.

3|Updated May 16, 2026
Search Tags:#anti-patterns#accessibility#design systems#motion design#framer-motion#audit report#ui animation
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill design-motion-principles-aradotso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-motion-principles
Source: https://github.com/Aradotso/design-skills/tree/main/skills/design-motion-principles
Command: npx skills add https://github.com/Aradotso/design-skills --skill design-motion-principles-aradotso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams create and review UI motion that feels intentional and high-quality instead of inconsistent, inaccessible, or “AI-sloppy,” while matching the motion style to the project context.

Core Features & Use Cases

  • Two-mode workflow (Create + Audit): Build animated UI components with purposeful motion, or audit existing animations to find motion gaps and quality issues.
  • Context-aware lens weighting: Applies blended guidance from three motion philosophies (Emil Kowalski, Jakub Krehel, Jhey Tompkins) based on whether the project is productivity, kids/creative, marketing, or similar.
  • Quality and guardrails: Includes accessibility requirements like reduced-motion support and focus management, and provides an anti-AI-slop checklist (e.g., pulse spam, hover-scale-on-everything, stagger spam, blur entrances, bouncy springs for utility).
  • Actionable outputs: Produces either a branded HTML audit report (default) or an inline terminal markdown report using an audit flag.

Quick Start

Ask the skill to audit the animations in this project and output the findings in terminal markdown.

Frequently Asked Questions about design-motion-principles

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

FAQPage Schema
How do I audit UI animation quality and accessibility in my codebase?▼

The skill detects common motion design anti-patterns like pulse spam, hover-scale-on-everything, stagger spam, blur entrances, and bouncy springs for utility UI, providing actionable recommendations to eliminate AI-slop in your UI animation.

How do I ensure my Framer Motion animations support reduced-motion preferences?▼

The skill applies context-aware lens weighting from three motion philosophies based on whether your project is productivity, kids/creative, or marketing, blending guidance to match your specific motion design context.

What are common UI animation anti-patterns and how do I fix them?▼

By performing a motion-gap analysis, the tool enforces performance best practices and reduced-motion support, ensuring your design systems maintain high-quality, purposeful motion design.

Can I generate a motion design audit report for my existing design system?▼

It reviews your UI motion for consistency and accessibility, checking for reduced-motion support and focus management, while applying anti-AI-slop heuristics to ensure intentional, high-quality animation.

How do I add purposeful enter and exit animations to interactive components?▼

It applies context-aware guidance from multiple motion philosophies to match the animation style to your project context, preventing inconsistent or AI-sloppy motion design in the shipped UI.

Does this tool work for both creating new animations and auditing existing ones?▼

Both modes enforce reduced-motion, focus management, and performance best practices, ensuring accessible and consistent motion design regardless of whether you are building or reviewing.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
22

adding-animations

Implement Framer Motion animations, transitions, and hover effects for UI components.

Community
Intermediate
dirnbauerdirnbauer
33

web-design-guidelines

Analyze frontend interfaces for accessibility, semantic HTML, and responsive design issues.

Community
Intermediate
gokulkrishhgokulkrishh
3

web-animation-design

Guide web animation design with easing, timing, and spring physics.

Community
Intermediate
ulasalyesilulasalyesil

baseline-ui

Enforce UI design tokens, animation principles, and accessibility standards in frontend projects.

Community
Intermediate