🎯

ui-animation

🎯Skill

from mblode/agent-skills

What it does

Provides guidelines and best practices for creating performant, accessible, and delightful UI animations with consistent motion principles.

📦

Part of

mblode/agent-skills(8 items)

ui-animation

Installation

Quick InstallInstall with npx

npx skills add mblode/agent-skills

📖 Extracted from docs: mblode/agent-skills

Need more details? View full documentation on GitHub →

6Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, and reduced-motion behaviour.

Overview

# UI Animation

Use these core rules for consistent motion and animation decisions.

Core rules

Animate to clarify cause/effect or add deliberate delight.
Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
Prefer CSS; use WAAPI or JS only when needed.
Make animations interruptible and input-driven.
Honor prefers-reduced-motion (reduce or disable).

What to animate

Only transform and opacity.
Never animate layout properties; never use transition: all.
Avoid blur > 20px.
Disable transitions during theme switches.

Spatial and sequencing

Set transform-origin at the trigger point.
For dialogs/menus, start around scale(0.85-0.9); avoid scale(0).
Stagger reveals <= 50ms.

Easing defaults

Enter/hover: cubic-bezier(0.22, 1, 0.36, 1).
Move: cubic-bezier(0.25, 1, 0.5, 1).
Simple hover colour/opacity: 200ms ease.

Accessibility

If transform is used, disable it in prefers-reduced-motion.

Performance

Pause looping animations off-screen.
Toggle will-change only during heavy motion and only for transform/opacity.
Prefer transform over positional props in animation libraries.

Reference

Snippets and practical tips: examples.md.

Workflow

Start with the core rules, then pick a reference snippet.
Keep motion functional; honor prefers-reduced-motion.
When reviewing, cite file paths and line numbers and propose concrete fixes.

More from this repository7

🎯

audit-ui🎯Skill

Performs comprehensive UI quality review focusing on typography, accessibility, and user experience refinement before product release.

🎯

multi-tenant-platform-architecture🎯Skill

Enables secure, scalable multi-tenant platform architectures on Cloudflare Workers with deterministic routing, tenant isolation, and custom domain support.

🎯

plan-feature🎯Skill

Generates comprehensive, step-by-step feature implementation plans by systematically exploring requirements, analyzing codebase architecture, and mapping out specific changes across multiple files.

🎯

implement-frontend🎯Skill

Implements frontend best practices for React/TypeScript, focusing on type safety, form handling, state management, and clean, performant code.

🎯

review-pr🎯Skill

Reviews pull requests for bugs and CLAUDE.md compliance, providing high-signal, actionable feedback with precise inline comments.

🎯

optimise-seo🎯Skill

Optimizes SEO for Next.js App Router by implementing metadata, structured data, semantic HTML, and performance improvements without visual redesigns.

🎯

define-architecture🎯Skill

Defines TypeScript app architecture by establishing repo layout, workflow patterns, and full-stack conventions for efficient project setup and scaling.