flow

Solid

Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use for meaningful motion, interaction feedback, or performance-safe animation.

AI & Automation 72 stars 14 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

<!-- 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 146+ partial), @starting-style (Baseline Newly Available — Chrome 117+/Edge 117+/Safari 17.5+/Firefox 129+), scroll-driven animations (animation-timeline scroll()/view()), @property, interpolate-size/calc-size() for intrinsic size animation (Chrome 129+/Edge 129+ only) - 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) - container_scroll_state: Container Scroll-State Queries — scroll-state(stuck/snapped/scrolled) for sticky header shadows, carousel indicators, CSS-only state detection (Chrome 133+) - intrinsic_size_animation: interpolate-size: allow-keywords and calc-size() for native height:auto animation — accordion/dropdown without JS (Chrome 129+) - spring_physics: Spring-based physics animations via linear() easing approximation, Motion spring presets, natural responsive motion as...

Details

Author: simota
Repository: simota/agent-skills
Created: 7 months ago
Last Updated: today
Language: HTML
License: MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

motion-and-interaction-system

Meaning-first animation with 3-tier hierarchy. CSS scroll-driven (animation-timeline: scroll()), View Transitions API, @starting-style DOM-insert, container scroll-state queries, prefers-reduced-motion mandatory on all animations.

20 Updated 1 months ago

heymegabyte

Web & Frontend Solid

animations

Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog. Covers GPU-safe properties, modern primitives (@starting-style, interpolate-size), View Transitions, scroll-driven timelines, state-choreography morphs, React state (Motion, AnimatePresence), advanced effects (Liquid Glass, glow, 3D tilt), external engines (Lottie, Rive), React Three Fiber, prefers-reduced-motion, AND perceived performance (skeleton loaders, optimistic UI, loader floor, predictive prefetch, stale-while-revalidate). Use when building transitions, hover effects, route changes, when an animation feels janky, when deciding what feedback an interaction should have, or when the app needs to feel snappier. Triggers on "animate this", "fade in", "hover effect", "liquid glass", "lottie", "rive", "ideal feedback", "how should X feel", "skeleton loader", "perceived performance", "feel faster", "optimistic UI", "/animations".

8 Updated 2 days ago

mthines

AI & Automation Listed

transitions

Builds a complete CSS motion system — duration and easing tokens (fast 120ms micro-feedback, base 200ms, slow 320ms entrances; standard, decelerate and spring curves), enter/exit/emphasis patterns, stagger rules, and prefers-reduced-motion fallbacks — delivered as a copy-paste CSS/JS snippet library. Use when the user says "add animations", "make this feel smooth", "the transitions are janky", or "animate this modal / dropdown / list without making it feel like a template".

11 Updated 3 weeks ago

alebgl77