Gsap

frontend-dev is a frontend-dev skill for building polished, production-ready web pages with premium UI, cinematic motion, AI-generated media, persuasive copy, and generative art. Use it for landing pages, marketing sites, product pages, dashboards, and other frontend work where design, content, and implementation details need to stay aligned.

gsap-frameworks is the GSAP skill for Vue, Nuxt, Svelte, SvelteKit, and other non-React frameworks. It covers lifecycle-safe animation setup, scoped selectors, and cleanup on unmount so component animations behave correctly in Frontend Development.

gsap-performance is the GSAP performance skill for Frontend Development. Use it to reduce jank, avoid layout thrashing, prefer transforms and opacity, apply will-change wisely, and batch reads and writes for smoother 60fps animations. It’s best when you need practical gsap-performance usage guidance for existing motion code.

gsap-react is the official GSAP skill for React and Next.js. It covers useGSAP(), refs, gsap.context(), scoped selectors, and cleanup so you can build React-safe animations without re-render or unmount bugs. Use this gsap-react guide when you need install and usage help for frontend development.

gsap-utils skill for GSAP utility helpers: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, and pipe. Learn gsap-utils usage for Frontend Development, including when to use reusable function forms, how to fit helpers into tweens and callbacks, and why no registration is needed.

gsap-plugins helps frontend developers choose, install, and use GSAP plugins correctly. It covers plugin registration, imports, and practical guidance for ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG plugins, easing tools, and GSDevTools. Use it when you need a clear gsap-plugins guide instead of generic animation advice.

gsap-scrolltrigger is the official GSAP skill for scroll-linked animations, pinning, scrub behavior, and viewport-based triggers. Use it for Frontend Development when you need a gsap-scrolltrigger guide, install help, or practical gsap-scrolltrigger usage for parallax, pinned sections, and scroll-driven motion.

gsap-timeline helps you build GSAP timeline sequences with ordered steps, overlaps, labels, and nested playback. Use the gsap-timeline skill when the goal is coordinating multiple animations, especially for UI Design, onboarding flows, or repeatable motion systems. It includes gsap-timeline install and usage guidance for clear sequencing.

The gsap-core skill is the official GSAP guide for core animation API use, including gsap.to(), from(), fromTo(), easing, stagger, defaults, and responsive motion. Use it for gsap-core usage in vanilla JS, React, Vue, Svelte, DOM, SVG, and UI Design workflows, especially when you need a reliable gsap-core guide.

hyperframes-registry helps you install and wire reusable HyperFrames registry items with less guesswork. Use it to run hyperframes add, identify blocks vs. components, merge snippets, wire blocks into index.html, and follow hyperframes.json path mappings for design implementation and registry discovery.

gsap is a practical animation reference for HyperFrames compositions. It helps you choose between gsap.to(), from(), fromTo(), and gsap.timeline(), then apply the right vars, easing, stagger, transforms, and performance patterns. Use this gsap guide when you need implementation-ready motion for entrance animations, transitions, and reusable design effects.

hyperframes is a workflow skill for building HTML-based video compositions in HyperFrames. Use it for title cards, overlays, captions, voiceovers, audio-reactive motion, and scene transitions when you need structured, code-first hyperframes for Video Editing. It favors layout, timing, and animation decisions over generic prompt-only video requests.

gpt-taste is a design-focused skill for creating polished UI pages with editorial art direction, spacing discipline, and GSAP motion. Use the gpt-taste skill for marketing pages, landing pages, and showcase sites when you want stronger layout variety, better typography control, and fewer generic frontend patterns. The guide includes install and usage notes for practical implementation.

fixing-motion-performance helps audit and fix UI animation performance issues without changing your stack by default. Use it for frontend work when motion stutters, scroll-linked effects are expensive, or transitions trigger layout, paint, or compositing work. It turns animation bugs into clear, code-level fixes.