lb-motion-skillComplete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Install via ClawdBot CLI:
clawdbot install leonaaardob/lb-motion-skillMotion is a modern animation library for React, JavaScript, and Vue. It's the evolution of Framer Motion, offering:
npm install motionimport { animate } from "motion"
// Animate elements
animate(".box", { rotate: 360, scale: 1.2 })
// Spring animation
animate(element, { x: 100 }, { type: "spring", stiffness: 300 })
// Stagger multiple elements
animate("li", { opacity: 1 }, { delay: stagger(0.1) })import { motion } from "motion/react"
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 2 }}
/>import { scroll } from "motion"
scroll(animate(".box", { scale: [1, 2, 1] }))quick-start.md - Installation and first animationUse this skill when:
Generated Mar 1, 2026
Developers use Motion to create smooth animations for product image galleries, hover effects on buttons, and scroll-triggered reveal animations on product pages. This enhances user engagement and visual appeal, leading to higher conversion rates in online retail.
Implement scroll-linked animations to guide users through interactive tutorials or step-by-step lessons, with gesture-based drag-and-drop quizzes. This makes learning more immersive and interactive, improving retention for educational tech companies.
Animate charts, graphs, and UI elements with spring physics to display real-time financial data updates smoothly. Gesture support allows users to interact with data points via drag or tap, enhancing usability in banking or investment apps.
Use Motion to build intuitive, animated forms and calendars with transitions for selecting dates and times. Scroll animations can highlight available slots, reducing friction and improving patient experience in medical service platforms.
Create gesture-based interactions for video controls, such as drag-to-seek or hover previews, and animate content carousels with staggered effects. This boosts user engagement and provides a polished interface for entertainment apps.
Offer a premium version of Motion with advanced features like custom animation presets, analytics for user interactions, and priority support. Revenue is generated through monthly or annual subscriptions from developers and agencies.
Provide expert services to businesses for integrating Motion into their web applications, including migration from Framer Motion, performance optimization, and bespoke animation design. Revenue comes from project-based contracts or hourly rates.
Operate a marketplace where developers can sell pre-built animation components, templates, and plugins built with Motion. Revenue is generated through commissions on sales and listing fees, targeting freelancers and small teams.
💬 Integration Tip
Start with the basic animate function for simple DOM elements before moving to React or Vue components, and use the official examples for quick prototyping.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.