ui-animation
Design, implement, and review UI animations with accessibility and performance best practices.
- Covers CSS transitions, keyframes, Framer Motion, and spring animations with guidance on easing curves, timing (200–300ms standard), and transform-based motion
- Enforces
prefers-reduced-motionsupport, touch-device hover handling, and keyboard interaction rules to ensure accessible motion - Provides anti-patterns to avoid:
transition: all, layout property animation, permanentwill-change, and unmotivated entrance animations - Includes performance optimization rules: animate only
transformandopacity, pause off-screen loops, and togglewill-changeconditionally
UI Animation
Reference files
| File | Read when |
|---|---|
| references/decision-framework.md | Default: animation decisions, easing, and duration |
| references/spring-animations.md | Using spring physics, framer-motion useSpring, configuring spring params |
| references/component-patterns.md | Building buttons, popovers, tooltips, drawers, modals, toasts with animation |
| references/clip-path-techniques.md | Using clip-path for reveals, tabs, hold-to-delete, comparison sliders |
| references/gesture-drag.md | Implementing drag, swipe-to-dismiss, momentum, pointer capture |
| references/performance-deep-dive.md | Debugging jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats |
| references/review-format.md | Reviewing animation code — Before/After/Why table and issue checklist |
| references/contextual-animations.md | Implementing contextual icon swaps, word-level stagger entrances, or fixed-offset exit animations |
Core rules
More from mblode/agent-skills
agent-skills-creator
Guides creation of best-practice agent skills following the open format specification. Covers frontmatter, directory structure, progressive disclosure, reference files, rules folders, degrees of freedom, content patterns, executable scripts, MCP tool references, evaluations, and cross-model testing. Use when creating a new skill, authoring SKILL.md, setting up a rules-based audit skill, structuring a skill bundle, writing scripts inside a skill, evaluating a skill, or asking "how to write a skill.
294ui-audit
Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Use when reviewing or refining frontend UI before merge or release, asking "check my UI", "is this accessible", "polish this page", or when the user asks for a UI, UX, or accessibility audit.
234optimise-seo
Optimises SEO for Next.js App Router apps including sitemaps, meta tags, structured data, canonical URLs, Core Web Vitals, and programmatic SEO. Use when asked to improve SEO, add sitemap.xml, fix meta tags, add structured data, set canonical URLs, improve Core Web Vitals, audit SEO, or build SEO pages at scale. Performs no visual redesigns.
225docs-writing
Writes and audits technical documentation using Diataxis, Stripe-style clarity, and the Eight Rules. 52 rules across 9 categories covering voice, structure, clarity, code examples, formatting, navigation, scanability, content hygiene, and review. Use when writing docs, creating READMEs, documenting APIs, writing tutorials, building a docs site, auditing documentation quality, or asking "review my docs", "improve this documentation", or "write docs for this".
216ui-design
Defines visual systems, colour palettes, typography scales, and layout patterns for web UI. Produces design tokens and component styling for product dashboards (SaaS/admin/data-heavy) or marketing/brand landing pages. Use when choosing visual direction, designing a landing page, building a hero section, selecting colour palettes and fonts, establishing layout patterns, starting a new UI design system, theming a web application, or asking "make this look good", "make this look premium", "design the UI for", "full-bleed hero", or "pick a visual style".
213define-architecture
Generates folder structures, module contracts, middleware pipelines, and frontend/backend boundaries for TypeScript full-stack applications. Use when starting a project, setting up project structure, organizing a monorepo, configuring middleware, defining folder layout, designing backend modules, establishing team conventions, or asking "how should I structure this app", "design the folder structure", or "set up the architecture".
204