DiscordSign up
SKILLS.SH

motion

GPU-accelerated animation library for JavaScript, React, and Vue with gestures, springs, and layout transitions. Supports motion components (motion.div, motion.svg), variants, transitions with spring physics, and scroll-linked effects Includes gesture handlers for drag, pan, tap, press, hover, and focus interactions Provides layout animations with AnimatePresence, LayoutGroup, and drag-to-reorder capabilities Offers motion values, transforms, and imperative animation controls via useAnimate and animation sequences Hybrid engine combines JavaScript with native browser APIs for 120fps performance; tree-shakable builds and TypeScript support included

INSTALLATION
npx skills add https://github.com/hairyf/skills --skill motion
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

Motion Values

Topic

Description

Reference

useMotionValue

Create and use motion values for reactive animations

values-motion-value

useSpring

Spring-based motion values with physics

values-spring

useTransform

Transform motion values with functions

values-transform

useMotionTemplate

Combine motion values into a string (e.g. filter, boxShadow)

values-motion-template

useFollowValue

Motion value that follows a source with any transition

values-follow

useScroll

Scroll-linked motion values and animations

values-scroll

useVelocity

Access velocity of motion values

values-velocity

useTime

Time-based motion values

values-time

useWillChange

GPU layer hint for animating elements

values-will-change

Gestures

Topic

Description

Reference

Drag

Drag gestures with constraints and controls

gestures-drag

Pan

Pan gestures for touch and pointer events

gestures-pan

Tap & Press

Tap and press gesture handlers

gestures-tap-press

Hover & Focus

Hover and focus state animations

gestures-hover-focus

Layout Animations

Topic

Description

Reference

AnimatePresence

Animate components entering and exiting

layout-animate-presence

usePresence / useIsPresent

Access presence state in AnimatePresence children

layout-use-presence

usePresenceData

Read AnimatePresence custom prop in descendants

layout-presence-data

LayoutGroup

Coordinate layout animations across components

layout-group

Layout Animations

Automatic layout animations with layoutId

layout-animations

Reorder

Drag-to-reorder with layout animations

layout-reorder

useInstantLayoutTransition

Block layout update for one frame

layout-instant-transition

useResetProjection

Reset layout projection tree after structural change

layout-reset-projection

Features

Topic

Description

Reference

In View

useInView, inView(), usePageInView for viewport/visibility

features-in-view

Resize

resize() observer for window or element size

features-resize

Optimized Appear

SSR-friendly appear animations with handoff

features-optimized-appear

SVG Path

pathLength, pathOffset, pathSpacing for path animations

features-svg-path

motion/client

Next.js "use client" and tree-shakable components

features-react-client

Utils

Topic

Description

Reference

useReducedMotion

Hooks for reduced motion preference

utils-reduced-motion

useAnimationFrame

Frame-synced callback with Motion's loop

utils-animation-frame

useCycle

Cycle through a list of states

utils-cycle

useMotionValueEvent

Subscribe to motion value events

utils-motion-value-event

delay

Frame-synced delayed execution

utils-delay

interpolate

Map input range to output

utils-interpolate

useDomEvent

Attach DOM event listeners

utils-dom-event

useInstantTransition

Block layout animations during update

utils-instant-transition

calcLength / createBox / distance

Projection geometry and distance

utils-path-geometry

Advanced

Topic

Description

Reference

Animation Controls

Programmatic animation control with useAnimation

advanced-animation-controls

useAnimate

Imperative animation API

advanced-use-animate

LazyMotion

Code-split animations for better performance

advanced-lazy-motion

MotionConfig

Global configuration and reduced motion

advanced-motion-config

Scroll Animations

Scroll-linked animations and parallax effects

advanced-scroll-animations

transformTemplate

Custom transform output

advanced-transform-template

addScaleCorrector

Layout projection scale correctors

advanced-scale-corrector

Best Practices

Topic

Description

Reference

Bundle Size

Entry points and optimization strategies

best-practices-bundle

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card