Skills
Instructions your agent can follow for layout, type, motion, forms and more.
63 skills
Results
12 Principles of Animationby raphaelsalaja
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
MotionExternalGitHub stars: 42
60fps Animationby iart-ai
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
MotionExternalGitHub stars: 64
Accessible Animationby iart-ai
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
AccessibilityExternalGitHub stars: 64
Animateby emilkowalski
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
MotionExternalGitHub stars: 51.4K
Animateby pbakaus
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
MotionExternalGitHub stars: 95.1K
Animate Expoby emilkowalski
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
MotionExternalGitHub stars: 51.4K
Animation on Scrollby MengTo
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
MotionExternalGitHub stars: 7.1K
Animation Systemsby MengTo
Use when building a coherent animation system instead of one-off motion tweaks.
MotionExternalGitHub stars: 7.1K
Animation Vocabularyby emilkowalski
Sharpen motion language so animation choices feel deliberate and consistent.
MotionExternalGitHub stars: 51.4K
Apple Designby emilkowalski
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
MotionExternalGitHub stars: 51.4K
Ascii Animationby iart-ai
This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.
MotionExternalGitHub stars: 64
Better Uiby jakubkrehel
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
VisualExternalGitHub stars: 9.2K
Bragby latent-spaces
Turn a finished project into a short shareable launch video with motion, music, and copy.
MotionExternalGitHub stars: 19.5K
Delightby pbakaus
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
InteractionExternalGitHub stars: 95.1K
Figma Implement Motionby figma
Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.
MotionExternalGitHub stars: 2.1K
Figma Use Motionby figma
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.
MotionExternalGitHub stars: 2.1K
Find Animation Opportunitiesby emilkowalski
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
MotionExternalGitHub stars: 51.4K
Fixing Motion Performanceby ibelick
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
MotionExternalGitHub stars: 10.4K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
Glassmorphismby iart-ai
This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.
MotionExternalGitHub stars: 64
Gsapby MengTo
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
MotionExternalGitHub stars: 7.1K
Gsap Coreby greensock
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Frameworksby greensock
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
MotionExternalGitHub stars: 17.5K
Gsap Performanceby greensock
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
MotionExternalGitHub stars: 17.5K
Gsap Pluginsby greensock
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
MotionExternalGitHub stars: 17.5K
Gsap Reactby greensock
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltriggerby greensock
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltrigger Storytellingby MengTo
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
MotionExternalGitHub stars: 7.1K
Gsap Timelineby greensock
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
MotionExternalGitHub stars: 17.5K
Gsap Utilsby greensock
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
MotionExternalGitHub stars: 17.5K
Gsap Webby iart-ai
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
MotionExternalGitHub stars: 64
Improve Animationsby emilkowalski
Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.
MotionExternalGitHub stars: 51.4K
Interaction Designby wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
InteractionExternalGitHub stars: 42K
Lottie Animationby iart-ai
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
MotionExternalGitHub stars: 64
Marquee Loopby MengTo
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
MotionExternalGitHub stars: 7.1K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Mastering Animate Presenceby raphaelsalaja
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
MotionExternalGitHub stars: 42
Matterjsby MengTo
Use when building physics-driven interactions and layout behaviors with Matter.js.
MotionExternalGitHub stars: 7.1K
Micro Interactionby iart-ai
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
InteractionExternalGitHub stars: 64
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
Motion Without Annoying Peopleby UI Skillbook
Use short, purposeful easing curves that clarify state changes instead of decorating them.
Motion
Overdriveby pbakaus
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
MotionExternalGitHub stars: 95.1K
Page Transition Animationby iart-ai
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
MotionExternalGitHub stars: 64
Pressed Button Feedbackby UI Skillbook
Give every interactive control an immediate, physical-feeling response to a press.
Interaction
Progressive Blurby MengTo
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
VisualExternalGitHub stars: 7.1K
Pseudo Elementsby raphaelsalaja
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
MotionExternalGitHub stars: 42
Refine Liveby Jakubantalik
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
MotionExternalGitHub stars: 5.9K
Remotion Best Practicesby remotion-dev
Domain-specific knowledge base for building videos with Remotion and React.
MotionExternalGitHub stars: 5.9K
Review Animationsby emilkowalski
Review animation quality, timing, and motion consistency with a production-critical eye.
MotionExternalGitHub stars: 51.4K
Scroll Worldby oso95
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
VisualExternalGitHub stars: 10.7K
Siteplane Animated Buttonsby UI Skillbook
Buttons that animate on hover with sweeping or pass-through fills, a moving arrow, actions that expand, and entrance effects.
Siteplane UI
Siteplane Icon Morphsby UI Skillbook
A menu button whose bars morph into an X while its navigation panel is open.
Siteplane UI
Siteplane Motionby UI Skillbook
Ready-made parts that animate list items entering, leaving and moving, content swaps and changing numbers.
Siteplane UI
Siteplane Theme Togglesby UI Skillbook
Animated sun and moon toggles that switch an app between light and dark mode.
Siteplane UI
Slide Wrightby arifszn
Create beautiful, animated web presentations from a topic, rough notes, or an outline. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction. Use when the user wants to make slides, a presentation, a talk deck, or a pitch deck.
MotionExternalGitHub stars: 65
Slidevby antfu
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
MotionExternalGitHub stars: 6K
Svg Animationby iart-ai
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
MotionExternalGitHub stars: 64
Text to Lottieby diffusionstudio
Turn text prompts into polished Lottie animations for motion-heavy UI work.
MotionExternalGitHub stars: 5.6K
Threejsby MengTo
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
VisualExternalGitHub stars: 7.1K
Threejs Animationby cloudai-x
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
VisualExternalGitHub stars: 3.8K