861b28b965
New skills (14): - nestjs-best-practices: 40 priority-ranked rules (kadajett) - fastapi: Pydantic v2, async SQLAlchemy, JWT auth (jezweb) - architecture-patterns: Clean Architecture, Hexagonal, DDD (wshobson) - python-performance-optimization: Profiling and optimization (wshobson) - ai-sdk: Vercel AI SDK streaming and agent patterns (vercel) - create-agent: Modular agent architecture with OpenRouter (openrouterteam) - proactive-agent: WAL Protocol, compaction recovery, self-improvement (halthelobster) - brand-guidelines: Brand identity enforcement (anthropics) - ui-animation: Motion design with accessibility (mblode) - marketing-ideas: 139 ideas across 14 categories (coreyhaines31) - pricing-strategy: SaaS pricing and tier design (coreyhaines31) - programmatic-seo: SEO at scale with playbooks (coreyhaines31) - competitor-alternatives: Comparison page architecture (coreyhaines31) - referral-program: Referral and affiliate programs (coreyhaines31) README reorganized by domain: Code Quality, Frontend, Backend, Auth, AI/Agent Building, Marketing, Design, Meta. Mosaic Stack is not limited to coding — the Orchestrator serves coding, business, design, marketing, writing, logistics, and analysis. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.3 KiB
2.3 KiB
name, description
| name | description |
|---|---|
| ui-animation | Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations. |
UI Animation
Core rules
- Animate to clarify cause/effect or add deliberate delight.
- Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
- Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
- 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
- For movement and spatial change, animate only
transformandopacity. - For simple state feedback,
color,background-color, andopacitytransitions are acceptable. - Never animate layout properties; never use
transition: all. - Avoid
filteranimation for core interactions; if unavoidable, keep blur <= 20px. - SVG: apply transforms on a
<g>wrapper withtransform-box: fill-box; transform-origin: center. - Disable transitions during theme switches.
Spatial and sequencing
- Set
transform-originat the trigger point. - For dialogs/menus, start around
scale(0.85-0.9); avoidscale(0). - Stagger reveals <= 50ms.
Easing defaults
- Enter and transform-based hover:
cubic-bezier(0.22, 1, 0.36, 1). - Move:
cubic-bezier(0.25, 1, 0.5, 1). - Simple hover colour/background/opacity:
200ms ease. - Avoid
ease-infor UI (feels slow).
Accessibility
- If
transformis used, disable it inprefers-reduced-motion. - Disable hover transitions on touch devices via
@media (hover: hover) and (pointer: fine).
Performance
- Pause looping animations off-screen.
- Toggle
will-changeonly during heavy motion and only fortransform/opacity. - Prefer
transformover positional props in animation libraries. - Do not animate drag gestures using CSS variables.
Reference
- Snippets and practical tips: examples.md
Workflow
- Start with the core rules, then pick a reference snippet from examples.md.
- Keep motion functional; honor
prefers-reduced-motion. - When reviewing, cite file paths and line numbers and propose concrete fixes.