도구

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

GSAP's official animation skills: teach agents to use the core API, timelines, ScrollTrigger and plugins correctly, including React, Vue and Svelte integration and animation performance. Maintained by GreenSock; all plugins are free.

Adds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections.

Helps the agent add or debug web animations with GSAP: tweens, timelines and position parameters, easing, stagger and ScrollTrigger pin and scrub, plus fixes for jank, cleanup with gsap.context() in React and refreshing after images load.

Interviews you on scope, pain points and brand tone, infers the visual language from existing styles, and builds five React UI variants on a temporary route with a feedback overlay. Iterates on feedback, then writes an implementation plan and deletes the temp files.

Makes a product film (landing-page loop, launch video, promo, demo reel) in code with Remotion, reusing the product's own design system, components and voice. It interviews the user first, then writes the story, syncs scenes to music beats, reviews stills in loops and verifies the final render.

Integrates Lottie and dotLottie animations from After Effects into web, iOS, Android and React Native: playback and segment control, scroll- or hover-driven interactivity, runtime theming and recoloring, plus an After Effects export checklist.

Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support.

Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion.

Audits animation code for the right timing function: springs for gestures and interruptible motion, easing for system-driven state changes, linear for progress, and no animation for high-frequency interactions. Also checks spring parameters and durations. Reports file:line findings.

Fixes hover and click dead zones between spaced interactive elements such as chart bars, list rows, tabs and nav items by making hit targets flush and moving visual spacing inside each item, with React and Tailwind examples.

Turns Paper designs (via Paper MCP, Viewfinder or exported JSX) into componentized React/Next.js code: maps hierarchy and reusable components first, one component per icon, tokens in globals.css, shadcn reuse, real fonts and data-driven charts.

Builds product launch, promo and feature announcement videos with Remotion (React): asks nine questions about product, audience, duration, voiceover and channel, proposes 2-3 visual directions, writes a storyboard.json, then codes scenes and optional voiceover.

Prototyper UI's animation conventions for writing, reviewing or debugging component motion: copy-paste class strings for overlays, dialogs and sheets, press-feedback scales, state transitions, easing tokens and prefers-reduced-motion handling.

Usage guide for the Prototyper UI component library, built on @base-ui/react and Tailwind CSS v4 with copy-paste distribution, OKLCH colors and CVA variants: setup, theme tokens, component selection and patterns, noting render= replaces Radix asChild.