547 skills · sorted by relevance
Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.
Build animated 3D scenes in React Three Fiber using examples for object motion, model playback, and spring effects. Guidance covers blending character movements, responding to interactions, and managing state to reduce unnecessary React rendering.
State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.
The English summary is being prepared. Showing the original description.
Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.
The English summary is being prepared. Showing the original description.
SwiftUI animation patterns — implicit/explicit animations, transitions, phase/keyframe animations, the Animatable protocol, and the @Animatable macro. Use when implementing animations, transitions, or motion in SwiftUI views.
The English summary is being prepared. Showing the original description.
Build interactive animations in React or Next.js, including draggable elements, swipe gestures, animated text, SVG line drawing, and loading indicators. Guides API selection and multi-step animation sequences, with touch testing and cleanup practices.
Implement purposeful animations for existing interfaces or an agreed UI brief. It selects motion based on purpose and usage frequency, then handles timing, interrupted interactions, exits, and reduced-motion preferences while reusing the project’s tools and design values.
Build web animations with GSAP ScrollTrigger that respond to scrolling. The skill covers pinned sections, animation progress linked to scroll position, horizontal movement, and the position updates and cleanup needed when page content changes.
Build and review web animations with GSAP's core API, including movement, rotation, fades, and staggered starts. Adjust timing and easing, meaning changes in speed, and adapt animations to screen size and reduced-motion preferences.
Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.
Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.
Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.
Create mathematical and geometric animations in Python with Manim Community Edition. Use guidance, examples, and scene templates to structure animations, display equations, plot graphs, control cameras, and render two-dimensional or three-dimensional scenes.
Apply Disney's 12 animation principles to Lottie vector animations exported from After Effects. Use guidance on keyframes, motion paths, and playback controls to shape anticipation, timing, secondary actions, and interactive movement.
Build and review HyperFrames animations using motion recipes, scene templates, and transitions. Find guidance for seven animation runtimes, including GSAP and Three.js, and inspect existing scenes for timing gaps and inconsistent motion.
Build web animations with Anime.js, from staggered text and image reveals to SVG shape changes and animated lines. Coordinate timing, overlapping motion, and responses to user input while accounting for accessibility and performance.
Build and improve mobile apps with React Native and Expo using prioritized implementation rules. Covers faster lists, animations, images, navigation, state management, and native dependencies, with explanations and code examples for reviewing common implementation choices.
Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.
Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.
Find places in an interface where animation would help, then filter suggestions by frequency, purpose, speed, and function. Get precise motion settings and reasons for rejected candidates, without changing source code.
Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.
Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.
Add or debug web animations with GSAP, from entrance effects to scroll-driven sequences. Coordinate timing across multiple elements, adjust motion, and address rendering performance and cleanup when using animations in React.
Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.