ui-animation
๐ฏSkillfrom mblode/agent-skills
|UI animation guidelines covering motion timing, easing defaults, spatial sequencing, CSS-first animation principles, and prefers-reduced-motion accessibility patterns.
Overview
UI Animation is a Claude Code skill that provides guidelines and examples for implementing consistent, performant UI motion and animation. It covers core animation principles including timing, easing, accessibility with prefers-reduced-motion, and performance optimization to ensure animations clarify cause/effect relationships and add intentional delight without degrading user experience.
Key Features
- Performance-First Rules - Animate only
transformandopacityproperties, never layout properties, and avoidtransition: allto maintain smooth 60fps animations - Easing Defaults - Predefined cubic-bezier curves for enter/hover, move, and simple hover interactions that provide consistent, polished motion across the application
- Accessibility Compliance - Built-in guidance for honoring
prefers-reduced-motionby disabling transform-based animations and reducing or eliminating motion for users who prefer it - Spatial and Sequencing - Rules for
transform-originplacement at trigger points, dialog/menu scale starting points (0.85-0.9), and stagger reveal timing of 50ms or less - CSS-First Approach - Prefer CSS animations over JavaScript, using WAAPI or JS only when CSS cannot achieve the desired effect
Who is this for?
This skill is designed for frontend developers and UI designers who need consistent animation guidelines for web applications. It is particularly valuable for teams building design systems or component libraries that require standardized motion patterns with proper accessibility and performance considerations.
Same repository
mblode/agent-skills(45 items)
Installation
npx vibeindex add mblode/agent-skills --skill ui-animationnpx skills add mblode/agent-skills --skill ui-animation~/.claude/skills/ui-animation/SKILL.mdSKILL.md
More from this repository10
Agent skills creator from a minimal, opinionated skill set for planning, design, engineering, and UI quality.
A documentation writing skill from a minimal, opinionated set of agent skills covering planning, design, engineering, and UI quality for development workflows.
A minimal, opinionated skill for auditing UI quality, part of a skills collection covering planning, design, engineering, and quality assurance for AI coding agents.
Optimizes SEO for Next.js App Router by implementing metadata, structured data, semantic HTML, and performance improvements without visual redesigns.
A skill that defines visual systems, color palettes, typography scales, and layout patterns for web UI, with separate tracks for product dashboards (SaaS/admin) and marketing landing pages, including anti-AI-slop aesthetic direction guidance.
A minimal, opinionated agent skill set for planning, design, engineering, and UI quality, including architecture definition, CLI/Next.js scaffolding, UI design and audits, typography checks, and animation review.
A web typography auditing skill with 89 rules across 10 categories covering punctuation, font selection, sizing, spacing, OpenType features, hierarchy, layout, typeface pairing, brand identity, and display type. Prioritizes findings by severity and provides concrete fixes with file locations.
A define architecture skill for establishing repo layout, workflow, and full-stack architecture patterns for TypeScript applications at project start.
A minimal, opinionated set of 24 agent skills covering the full development lifecycle -- planning, architecture, scaffolding (CLI/Next.js), frontend implementation, UI auditing, typography, SEO optimization, PR review, and content writing.
A Next.js scaffolding skill from a minimal, opinionated set of agent skills for planning, design, engineering, and UI quality, supporting OpenCode, Claude Code, Codex, and Cursor.