# react: skills, IDE rules, MCP servers and more Cards tagged “react”: skills, IDE rules, MCP servers and more. What each one does, an install command and example prompts. 649 cards · page 1 of 17 - HTML: https://affpapa.org/en/nevibecode/tag/react - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [vercel-composition-patterns](https://affpapa.org/en/nevibecode/skills/vercel-composition-patterns.md) — skill · vercel · Claude Code, Codex, Cursor · 418600 installs — A rule set that pushes your agent away from boolean props and toward compound components, shared context and state lifted into providers. - [pick-ui-library](https://affpapa.org/en/nevibecode/skills/pick-ui-library.md) — skill · emilkowalski · Claude Code, Codex, Cursor · 185400 installs — A skill that maps a frontend task to one library from Emil Kowalski's curated list: toasts, charts, OTP fields, virtualization, drag and drop. - [vercel-react-view-transitions](https://affpapa.org/en/nevibecode/skills/vercel-react-view-transitions.md) — skill · vercel · Claude Code, Codex, Cursor · 168100 installs — A skill that walks your agent through native view transitions in React: page changes, shared elements, enter and exit animations without third-party libraries. - [migrate-radix-to-base](https://affpapa.org/en/nevibecode/skills/migrate-radix-to-base.md) — skill · shadcn-ui · Claude Code, Codex, Cursor · 30400 installs — Migrates React components and full projects from Radix UI to Base UI (@base-ui/react). - [ask-sonner](https://affpapa.org/en/nevibecode/skills/ask-sonner.md) — skill · emilkowalski · Claude Code, Codex, Cursor · 140500 installs — A skill for the Sonner React toast library: how to mount the Toaster, which toast() call to use, and how to fix toasts that never show up. - [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-best-practices.md) — skill · remotion-dev · Claude Code, Codex, Cursor · 684500 installs — Routes Remotion tasks to focused guidance for video creation, React markup, maps, multimedia, previews, and rendering. - [ui-styling](https://affpapa.org/en/nevibecode/skills/ui-styling.md) — skill · claudekit · Claude Code, Codex, Cursor · 40700 installs — A skill that helps your agent build accessible interfaces with shadcn/ui and Tailwind CSS: components, themes, dark mode, responsive layouts and canvas design. - [frontend-ui-engineering](https://affpapa.org/en/nevibecode/skills/frontend-ui-engineering.md) — skill · addyosmani · Claude Code, Codex, Cursor · 67400 installs — This skill guides an agent through accessible, responsive UI work. - [ai-sdk](https://affpapa.org/en/nevibecode/skills/vercel-ai-sdk.md) — skill · vercel · Claude Code, Codex, Cursor · 66100 installs — Teaches your coding agent to use the Vercel AI SDK accurately. - [next-dev-loop](https://affpapa.org/en/nevibecode/skills/next-dev-loop.md) — skill · vercel · Claude Code, Codex, Cursor · 22200 installs — Checks that an edit to your Next.js app actually works in a running app, not just that it compiles. - [next-cache-components-optimizer](https://affpapa.org/en/nevibecode/skills/next-cache-components-optimizer.md) — skill · vercel · Claude Code, Codex, Cursor · 18800 installs — Optimizes Next.js App Shell UI on hard and soft navigations. - [remotion-create](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-create.md) — skill · remotion-dev · Claude Code, Codex, Cursor · 214000 installs — This skill scaffolds a Remotion project and writes the first React composition. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/shadcn-ui.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor · 53400 installs — Helps discover, add, and customize shadcn/ui components in React projects. - [remotion-markup](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-markup.md) — skill · remotion-dev · Claude Code, Codex, Cursor · 207700 installs — A skill that tells your agent how to write Remotion React markup: frame-driven animation, media components, effects. - [remotion-interactivity](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-interactivity.md) — skill · remotion-dev · Claude Code, Codex, Cursor · 202900 installs — Guides AI coding agents to structure Remotion markup for Remotion Studio editing. - [stitch::react-components](https://affpapa.org/en/nevibecode/skills/stitchreact-components.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor · 50400 installs — Turns Stitch designs into modular Vite and React components. - [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · greensock · Claude Code, Codex, Cursor · 66300 installs — This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. - [animation-performance](https://affpapa.org/en/nevibecode/skills/animation-performance.md) — skill · emilkowalski · Claude Code, Codex, Cursor · 36800 installs — A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. - [anatomy](https://affpapa.org/en/nevibecode/skills/anatomy.md) — skill · wheresryan22 · Claude Code, Codex, Cursor · 21800 installs — Builds detailed interactive isometric SVG figures that explain technical ideas as physical machines. - [mcp-apps-builder](https://affpapa.org/en/nevibecode/skills/mcp-apps-builder.md) — skill · mcp-use · Claude Code, Codex, Cursor · 32200 installs — Build, modify, debug, migrate, review, and verify TypeScript MCP servers and MCP Apps with mcp-use. - [fix](https://affpapa.org/en/nevibecode/skills/react-fix.md) — skill · react · Claude Code, Codex, Cursor · 2300 installs — The skill formats changed files and checks for remaining lint issues before a commit. - [react-doctor](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — skill · millionco · Claude Code, Codex, Cursor · 19200 installs — Audits React codebases for architecture, accessibility, and rendering issues. - [frontend-patterns](https://affpapa.org/en/nevibecode/skills/frontend-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor · 5900 installs — A skill for React and Next.js work: component patterns, state, data fetching, and render performance. - [coding-standards](https://affpapa.org/en/nevibecode/skills/coding-standards.md) — skill · affaan-m · Claude Code, Codex, Cursor · 5700 installs — Baseline cross-project coding conventions for naming, immutability, and clean code principles. - [web-design-engineer](https://affpapa.org/en/nevibecode/skills/web-design-engineer.md) — skill · ConardLi · Claude Code, Codex, Cursor · 8700 installs — Directs your coding agent to craft polished web interfaces in HTML, CSS, JavaScript, and React. - [frontend-developer](https://affpapa.org/en/nevibecode/agents/voltagent-community-frontend-developer.md) — subagent · VoltAgent Community · Claude Code · 40905 installs — Subagent for building complete frontend applications with React 18+, Vue 3+, and Angular 15+. - [stitch::extract-design-md](https://affpapa.org/en/nevibecode/skills/stitchextract-design-md.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor · 10600 installs — Extracts a complete DESIGN.md design system directly from frontend source files without building or rendering the project. - [next-partial-prefetching-optimizer](https://affpapa.org/en/nevibecode/skills/next-partial-prefetching-optimizer.md) — skill · vercel · Claude Code, Codex, Cursor · 2400 installs — Tunes Next.js 16.3+ client link prefetching under Partial Prefetching. - [react-performance](https://affpapa.org/en/nevibecode/skills/react-performance.md) — skill · affaan-m · Claude Code, Codex, Cursor · 4900 installs — A performance optimization skill for React 18/19 and Next.js. - [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · affaan-m · Claude Code, Codex, Cursor · 4900 installs — This skill gives coding agents Remotion guidance for React video work, from animation and audio to captions, charts, and transitions. - [react-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor · 4900 installs — A skill for Claude and other AI editors that steers the agent toward idiomatic React 18/19: hooks discipline, server/client boundaries, forms, data fetching. - [stitch::code-to-design](https://affpapa.org/en/nevibecode/skills/stitchcode-to-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor · 10200 installs — Moves an existing frontend into Stitch by extracting standalone HTML and a design system, then uploading both to a project. - [baseline-ui](https://affpapa.org/en/nevibecode/skills/baseline-ui.md) — skill · ibelick · Claude Code, Codex, Cursor · 24200 installs — Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. - [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · affaan-m · Claude Code, Codex, Cursor · 4800 installs — A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. - [frontend-a11y](https://affpapa.org/en/nevibecode/skills/frontend-a11y.md) — skill · affaan-m · Claude Code, Codex, Cursor · 4800 installs — Accessibility patterns for React and Next.js covering forms, ARIA, keyboard input, and focus. - [motion-foundations](https://affpapa.org/en/nevibecode/skills/motion-foundations.md) — skill · jeff · Claude Code, Codex, Cursor · 4700 installs — Defines motion tokens, spring presets, performance rules and prefers-reduced-motion support for motion/react. - [motion-patterns](https://affpapa.org/en/nevibecode/skills/motion-patterns.md) — skill · jeff · Claude Code, Codex, Cursor · 4700 installs — A skill with reusable animation patterns for React and Next.js. - [feature-flags](https://affpapa.org/en/nevibecode/skills/feature-flags.md) — skill · react · Claude Code, Codex, Cursor · 1200 installs — A skill for working with feature flags in the React repo: where flags live, how to gate tests, and why a channel-specific test fails. - [verify](https://affpapa.org/en/nevibecode/skills/react-verify.md) — skill · react · Claude Code, Codex, Cursor · 1200 installs — Validates code changes against React repository requirements before committing. - [flags](https://affpapa.org/en/nevibecode/skills/flags.md) — skill · react · Claude Code, Codex, Cursor · 1100 installs — This skill runs React's feature-flag command and explains the results. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=2 ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md