← ClaudeAtlas

flowlisted

CSS/JS animation implementation for hover effects, loading states, modal transitions, and gesture interactions. Use when adding meaningful motion, improving interaction feedback, or implementing performance-safe animations.
simota/agent-skills · ★ 44 · AI & Automation · score 84
Install: claude install-skill simota/agent-skills
<!-- CAPABILITIES_SUMMARY: - micro_animation: Hover, press, toggle, validation, toast, feedback animations - page_transition: Route changes, modal/panel transitions, staged content entry - gesture_animation: Drag, swipe, snap, long press, touch feedback - motion_system_design: Motion tokens, scale design, cataloging, audits - modern_css_animation: View Transitions API (same-doc Baseline Oct 2025 — Chrome 111+/Edge 111+/Safari 18+/Firefox 144+, cross-doc Chrome 126+/Edge 126+/Safari 18.2+ — Firefox not yet supported), @starting-style, scroll-driven animations (animation-timeline scroll()/view()), @property - reduced_motion: prefers-reduced-motion support and accessible motion paths - performance_optimization: 60fps targeting, GPU-safe properties (transform/opacity/filter/clip-path), will-change budget (≤2 elements/page), CWV guard (CLS < 0.1, INP < 200ms) - library_guidance: Motion v12 (React/Vue/vanilla JS, MIT, hardware-accelerated scroll, oklch/oklab color animation, axis-locked layout="x"|"y"), GSAP (framework-agnostic, timeline, all plugins free since Webflow acquisition 2024 — license only restricts Webflow-competing visual animation builders), Tailwind CSS Motion (5KB CSS-only) COLLABORATION_PATTERNS: - Pattern A: Palette -> Flow — UX friction needs motion implementation - Pattern B: Vision -> Flow — Motion direction needs scoped execution - Pattern C: Forge -> Flow — Prototype needs motion polish - Pattern D: Artisan -> Flow — Production component needs motion refinem