Tag : react

Builds multi-component web pages that need state or routing with React, Tailwind CSS and shadcn/ui, using bundled init and build scripts, then packs them into a single HTML file for a claude.ai Artifact. Official Anthropic skill.

Drives a Next.js route to instant navigation under Cache Components: writes a failing @next/playwright instant() e2e test, pushes Suspense boundaries down to grow the static shell until it passes, and keeps the test as a regression guard. Requires Next.js 16.3+ with cacheComponents.

Official Next.js plugin shipped in the vercel/next.js repo: guides enabling and tuning Cache Components and Partial Prefetching, and verifies changes on a running dev server with the Next.js MCP and agent-browser.

Migrates React projects and shadcn components from Radix UI to Base UI, one component at a time or the whole project on request. Prefers the shadcn CLI's base variants merged with user customizations, typechecks every step, and writes a per-component report in .migration/. From the shadcn/ui repo.

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.

Official shadcn/ui CLI: initializes projects and adds component source to your codebase on demand, with switchable presets. Since v4 it offers --dry-run and --diff so agents can preview changes, and it comes with an agent skill.

MCP server built into the official shadcn CLI: lets agents browse and search components, blocks and templates in any configured registry, including private ones, and install them into your project in plain language. The project needs a components.json.

Write videos in React and render them from the command line with npx remotion render, letting agents batch-produce data-driven videos. Free for individuals, nonprofits and companies of up to 3 people; larger for-profit companies need a license.

Vercel's guide to React composition patterns: replaces boolean prop sprawl with compound components, lifted state and clean Context interfaces, including React 19 API changes. Useful for refactoring component libraries and reviewing component architecture.

React and Next.js performance rules from Vercel's engineering team: 70 rules ranked by impact covering request waterfalls, bundle size, server performance and re-renders, for writing, reviewing and refactoring. Maintained by Vercel.

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.

Runs React Doctor via npx to scan React code for security, performance, correctness, accessibility and architecture issues with a 0-100 health score; checks changed code for regressions, and on /doctor fetches the official triage playbook to fix issues.

Audits a whole React codebase read-only: runs a React Doctor scan as evidence, vets findings across bugs, performance, accessibility, security and maintainability, ranks them by leverage, then writes self-contained plans other agents can execute. Never edits source.

Rewrites an article or script as narration, then builds a click-through 16:9 web presentation you can screen-record into an explainer video, with optional synthesized voiceover. Good for lessons, YouTube tutorials and product walkthroughs. Needs Node.js; voiceover needs a MiniMax or OpenAI key.

Bundles 60+ full-stack specialist skills into one plugin: experts for 12 languages including Python, TypeScript, Go, Rust and Java, and frameworks like React, Django and Spring Boot, activated automatically by request. Also includes Jira and Confluence workflow commands (needs Atlassian MCP).

Remotion's official Codex plugin (OpenAI marketplace) for making videos in React code: 12 skills covering project setup, animation and effects, captions, maps, preview and rendering. Free for individuals, nonprofits and companies up to 3 people; bigger companies need a license.

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.

Narrows React component prop types to match live call sites rather than widened story, mock or test contracts: classifies each prop as required, optional or removed from non-test usage, derives types from real APIs, and updates stories and tests to fit.

Has the agent scaffold a new Remotion video project with create-video after inspecting the current folder, open Remotion Studio for live preview before writing the composition, and follow the layout, multi-scene and timeline guides as needed. Official Remotion skill; needs Node.js and Git.

Remotion's official skill that teaches agents to make programmatic videos in React code, covering project setup, animation and typography, captions, map animations, media handling and rendering, and routes to each subtopic on demand.

Guides the agent through captions in Remotion videos: stores them as JSON using the Caption type from @remotion/captions, transcribes audio or video to generate them, imports .srt files, and displays and animates them in compositions. Official Remotion skill.

General Translation's gt CLI: a wizard sets up i18n for React, Next.js and similar apps, then sends UI strings and JSON, YAML or Markdown files for AI translation and writes them back, with CI support. Needs a Node.js project and a General Translation API key (free sign-up, usage-based pricing).

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.