541 skills · sorted by relevance
Design and refine web animations for buttons, dialogs, menus, and gestures. The skill guides timing, changes in speed, spring motion, performance, and reduced-motion preferences so transitions fit the interaction and remain responsive.
Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.
After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export, bodymovin, animated SVG alternatives, or designer-created animations. Complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animations.
The English summary is being prepared. Showing the original description.
Implement, review, or improve SwiftUI animations and transitions. Use when adding explicit animations with withAnimation, configuring implicit animations with .animation(_:body:) or .animation(_:value:), configuring spring animations (.smooth, .snappy, .bouncy), building phase or keyframe animations with PhaseAnimator/KeyframeAnimator, creating hero transitions with matchedGeometryEffect or matchedTransitionSource, adding SF Symbol effects (bounce, pulse, variableColor, breathe, rotate, wiggle), implementing custom Transition or CustomAnimation types, or ensuring animations respect accessibilityReduceMotion.
The English summary is being prepared. Showing the original description.
Animate 3D objects in Three.js using timed keyframes, bone movement, and shape changes. Play animations stored in GLTF models, control playback speed and looping, blend actions, and create motion through code.
Refine interface details such as rounded corners, shadows, typography, icon alignment, and animations. Use concrete implementation rules to improve visual consistency and interaction feedback, with changes documented in before-and-after tables.
Add GSAP animations to Vue, Nuxt, Svelte, and SvelteKit components with guidance on when animations should start, which elements they affect, and how to remove animations and restore styles when components are removed.
Create, repair, and review character combat animations, from sword strikes to bow shots and spells. Use joint measurements, mesh deformation tests, camera captures, and blind comparisons to identify awkward poses and assess changes against written rules.
Measure and improve animation performance on frontend pages. Identify offscreen activity, pause CSS and canvas or WebGL loops, audit resource cleanup, and compare runtime observations before and after changes to investigate scrolling issues and long-session slowdowns.
Review existing interface animations and tune their timing, movement, scale, blur, and easing—the way speed changes. It matches values to their purpose and checks opening, closing, hover behavior, and staggered sequences against shared motion tokens.
Refine interface details such as typography, shadows, rounded corners, icons, and animations within the project's existing styling system. Supports implementation and quick or full reviews with prioritized findings, concrete changes, and verification results.
Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG path animations, morphing, or multi-step animation choreography. Alternative to GSAP for SVG-heavy animations and React-independent projects.
The English summary is being prepared. Showing the original description.
Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion). Use when user asks to create animations, transitions, scroll effects, page transitions, or interactive motion for web UIs. Do NOT use for canvas-based animations (Three.js, PixiJS), video editing, or non-web (native mobile) motion design.
The English summary is being prepared. Showing the original description.
Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.
Build GSAP animations in React or Next.js with guidance on useGSAP, element references, and component boundaries. It covers cleanup when components update or disappear, plus keeping animation code out of server rendering.
Improve GSAP animation performance by reviewing movement properties, batching page measurements and updates, and stopping unused animations. It guides changes for smoother motion, including efficient handling of long lists, pointer tracking, and scroll-driven effects.
Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.
Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.
Find the relevant guidance for writing Remotion animations that agents can understand and that remain editable in Studio’s Visual Mode. It points to resources for scene structure, editable styles and animations, and interactive custom components.
Build React Native mobile interfaces for iOS and Android, covering styling, screen navigation, gesture interactions, and animations. The skill guides React Navigation and Reanimated usage, responsive layouts, and performance improvements for mobile components.
Build scroll animations with GSAP or Framer Motion, including fade-ins, parallax effects that move layers at different speeds, pinned sections, and horizontal scrolling. Provides implementation patterns for vanilla JavaScript, React, and Next.js, with accessibility guidance.
Add animations to React interfaces using the browser's built-in view transitions. Guides page changes, shared elements that move between views, list reordering, component appearance, and loading reveals, with CSS styling and Next.js integration guidance.
Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.
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.