fluid
SolidProduction-grade web motion design for React and Tailwind sites. Use when building, choosing, or reviewing animations, scroll effects, reveals, page transitions, hovers, counters, marquees, or micro-interactions. Encodes easing, timing, spring, origin, and reduced-motion rules, and ships a drop-in component library.
Install
Quality Score: 79/100
Skill Content
Details
- Author
- Darcos-Loft
- Repository
- Darcos-Loft/fluid
- Created
- 1 months ago
- Last Updated
- 6 days ago
- Language
- JavaScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
motion
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).
motion-design
Restrained, accessible web motion — Framer Motion declarative patterns and CSS-only staggered reveals for high-impact moments, always bundle-aware and reduced-motion-safe. Use when adding animation/transitions to a UI (entrance reveals, list stagger, page/route transitions, micro-interactions) or when motion feels janky, heavy, or gratuitous.
design-motion
Design and implement purposeful motion — micro-interactions, page transitions, scroll animations, and hover effects — using Framer Motion, CSS animations, and GSAP. Use when the user says "add animation", "make it feel alive", "micro-interaction", "page transition", "scroll animation", "hover effect", or "motion design". Outputs performance-safe, reduced-motion-aware animation code. Pairs with design-frontend, enhance-web-ui. Do NOT use for layout, typography, or purely functional UI work.