flow

Solid

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.

AI & Automation 41 stars 9 forks Updated today MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
54
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
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 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...

Details

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

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

rive-interactive

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.

151 Updated 6 months ago
freshtechbro
Web & Frontend Featured

inspira-ui

120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.

106 Updated 1 months ago
secondsky
Web & Frontend Featured

dotlottie-web

Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.

744 Updated today
LottieFiles
Code & Development Solid

remotion-transitions

This skill should be used when the user asks to create custom Remotion transitions, asks about "cool transitions", "cinematic transitions", "striped transitions", "glitch transitions", "custom TransitionPresentation", or wants to build scene-to-scene transitions in Remotion beyond the built-in library. Also triggers for "how to make transitions in Remotion", "custom transition", "high-energy transitions", "energy transitions", "branded transitions".

63 Updated 2 months ago
Ashad001
AI & Automation Solid

remotion-best-practices

Use this skill when the user asks about creating videos with React, Remotion framework, programmatic video generation, video animations, or needs help with Remotion projects

4,196 Updated 2 days ago
ComposioHQ