Skills
Practical instructions for better interface work.
12-principles-of-animationExternal
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
60fps-animationExternal
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
accessible-animationExternal
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
emilkowalski-animateExternal
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.
pbakaus-animateExternal
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
animate-expoExternal
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.
animation-on-scrollExternal
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
animation-systemsExternal
Use when building a coherent animation system instead of one-off motion tweaks.
animation-vocabularyExternal
Sharpen motion language so animation choices feel deliberate and consistent.
apple-designExternal
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.
ascii-animationExternal
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.
better-uiExternal
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.
bragExternal
Turn a finished project into a short shareable launch video with motion, music, and copy.
delightExternal
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
figma-implement-motionExternal
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`.
figma-use-motionExternal
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.
find-animation-opportunitiesExternal
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
fixing-motion-performanceExternal
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.
frontend-slidesExternal
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
glassmorphismExternal
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.
gsapExternal
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
gsap-coreExternal
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
gsap-frameworksExternal
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
gsap-performanceExternal
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
gsap-pluginsExternal
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
gsap-reactExternal
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
gsap-scrolltriggerExternal
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
gsap-scrolltrigger-storytellingExternal
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
gsap-timelineExternal
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
gsap-utilsExternal
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
gsap-webExternal
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
improve-animationsExternal
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.
interaction-designExternal
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
lottie-animationExternal
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
marquee-loopExternal
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
masked-revealExternal
Use when revealing content with masked motion, clipped transitions, or layered entrances.
mastering-animate-presenceExternal
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
matterjsExternal
Use when building physics-driven interactions and layout behaviors with Matter.js.
micro-interactionExternal
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
morphing-iconsExternal
Build icon components that morph between SVG shapes with smooth, line-based transformation.
motion-easing-basics
Use short, purposeful easing curves that clarify state changes instead of decorating them.
overdriveExternal
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
page-transition-animationExternal
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
pressed-button-feedback
Give every interactive control an immediate, physical-feeling response to a press.
progressive-blurExternal
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
pseudo-elementsExternal
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
refine-liveExternal
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
remotion-best-practicesExternal
Domain-specific knowledge base for building videos with Remotion and React.
review-animationsExternal
Review animation quality, timing, and motion consistency with a production-critical eye.
scroll-worldExternal
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.
slide-wrightExternal
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.
slidevExternal
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
svg-animationExternal
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
text-to-lottieExternal
Turn text prompts into polished Lottie animations for motion-heavy UI work.
threejsExternal
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
threejs-animationExternal
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
to-spring-or-not-to-springExternal
Audit animation timing choices to decide when springs versus easing curves produce better motion.
transitions-devExternal
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
video-interaction-mapperExternal
Analyze a UI screen recording and map interaction states into an annotated Figma Design storyboard with extracted before/after frames.