# 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 4 of 17 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=4 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [react-best-practices](https://affpapa.org/en/nevibecode/skills/react-best-practices-2.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 399 installs — A skill that audits React and Next.js performance: it traces request waterfalls, extra bundle JS, server-client boundary mistakes and wasted rerenders. - [react18-legacy-context](https://affpapa.org/en/nevibecode/skills/react18-legacy-context.md) — skill (official GitHub) · github · GitHub Copilot · 745 installs — This skill migrates React legacy context to createContext and coordinates the provider with every consumer. - [react18-lifecycle-patterns](https://affpapa.org/en/nevibecode/skills/react18-lifecycle-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 743 installs — Migrates unsafe class component lifecycle methods to React 18.3.1 patterns. - [react18-string-refs](https://affpapa.org/en/nevibecode/skills/react18-string-refs.md) — skill (official GitHub) · github · GitHub Copilot · 741 installs — Guides the move from string refs to React.createRef() in class components. - [react18-enzyme-to-rtl](https://affpapa.org/en/nevibecode/skills/react18-enzyme-to-rtl.md) — skill (official GitHub) · github · GitHub Copilot · 739 installs — Provides Enzyme to React Testing Library migration patterns for React 18 upgrades. - [react-dev](https://affpapa.org/en/nevibecode/skills/react-dev.md) — skill · softaworks · Claude Code, Codex, Cursor +3 · 4100 installs — Provides type-safe React 18 and 19 patterns for TypeScript components, hooks, and Server Actions. - [router-core](https://affpapa.org/en/nevibecode/skills/router-core.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 589 installs — Entry skill for TanStack Router that points a task at the right sub-skill and pins the type-inference and client-first rules agents keep breaking. - [react-router](https://affpapa.org/en/nevibecode/skills/react-router.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 547 installs — A skill that teaches your coding agent the React bindings for TanStack Router: hook reference, components, and a file-based routing setup on Vite. - [wpds](https://affpapa.org/en/nevibecode/skills/wpds.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 4000 installs — Feeds WordPress Design System docs to your agent through an MCP server, so UI work lands on real components and tokens instead of guesses. - [narrow-react-prop-types](https://affpapa.org/en/nevibecode/skills/narrow-react-prop-types.md) — skill · humanlayer · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that cuts React component prop types back to the contract your live code actually uses, then makes stories and tests match it instead of weakening it. - [clerk-custom-ui](https://affpapa.org/en/nevibecode/skills/clerk-custom-ui.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 55200 installs — A Clerk skill that has the agent build custom sign-in and sign-up forms with hooks, or restyle the pre-built components to fit your brand. - [clerk-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/clerk-nextjs-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 53400 installs — Provides authentication and authorization patterns for Next.js with Clerk. - [tanstack-query-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-query-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 12800 installs — A rule set for TanStack Query in React: query keys, caching, mutations, SSR. - [shaders](https://affpapa.org/en/nevibecode/skills/shaders.md) — skill · shader-effects-inc · Claude Code, Codex, Cursor +3 · 528 installs — A skill for WebGPU visuals: animated backgrounds, gradients, glass, distortion and particles from the shaders component library in React, Vue, Svelte, Solid or plain JS. - [aws-amplify](https://affpapa.org/en/nevibecode/skills/aws-amplify.md) — skill · aws · Claude Code, Codex, Cursor +3 · 6600 installs — Skill for building and deploying full-stack apps with AWS Amplify Gen2. - [senior-frontend](https://affpapa.org/en/nevibecode/skills/senior-frontend.md) — skill · Alireza Rezvani · Claude Code · 1630 installs — This skill supports React and Next.js work, from project scaffolding to bundle checks. - [bklit-ui](https://affpapa.org/en/nevibecode/skills/bklit-ui.md) — skill · bklit · Claude Code, Codex, Cursor +3 · 1200 installs — Installs Bklit UI chart components into a React or Next.js app, then shows how to compose series, axes and tooltips without hand-rolled SVG. - [antd](https://affpapa.org/en/nevibecode/skills/antd.md) — skill · ant-design · Claude Code, Codex, Cursor +3 · 6100 installs — Guides an agent through Ant Design API checks, project diagnostics, and version migrations when working with antd code. - [react-start](https://affpapa.org/en/nevibecode/skills/react-start.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 454 installs — Guides agents through TanStack Start with React. - [web-haptics](https://affpapa.org/en/nevibecode/skills/web-haptics.md) — skill · lochie · Claude Code, Codex, Cursor +3 · 812 installs — Teaches your coding agent to add tactile feedback to mobile web interfaces using the zero-dependency web-haptics library and Apple HIG rules. - [start-core](https://affpapa.org/en/nevibecode/skills/start-core.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 447 installs — This skill covers the TanStack Start foundation: the Vite plugin, router factory, root route, and server functions. - [motion-framer](https://affpapa.org/en/nevibecode/skills/motion-framer.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 5900 installs — Guides an agent through Motion and Framer Motion animations for React interfaces, from hover effects to state and layout transitions. - [diffs](https://affpapa.org/en/nevibecode/skills/diffs.md) — skill · pierrecomputer · Claude Code, Codex, Cursor +3 · 472 installs — A skill for building with @pierre/diffs: syntax-highlighted files, diffs, patches and merge conflicts inside your app. - [tanstack-start-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-start-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 9800 installs — Best practice rules for full-stack React apps built with TanStack Start. - [react-email](https://affpapa.org/en/nevibecode/skills/react-email.md) — skill · Resend · Claude Code, Codex, Cursor +3 · 12600 installs — A skill for building HTML emails from React components. - [nextjs-developer](https://affpapa.org/en/nevibecode/agents/nextjs-developer.md) — subagent · VoltAgent Community · Claude Code · 898 installs — Subagent for building full-stack Next.js 14+ apps with App Router. - [router-query](https://affpapa.org/en/nevibecode/skills/router-query.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 366 installs — Guides the integration of TanStack Router and TanStack Query, covering router context setup, loader prefetching, and SSR QueryClient isolation. - [page-mascot](https://affpapa.org/en/nevibecode/skills/page-mascot.md) — skill · nilbuild · Claude Code, Codex, Cursor +3 · 1300 installs — Puts a chibi character on your page that turns its head toward the pointer and reacts to clicks. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 22400 installs — A skill that tells the agent how to install and configure shadcn/ui components: buttons, dialogs, tables, and forms with React Hook Form and Zod. - [react-specialist](https://affpapa.org/en/nevibecode/agents/react-specialist.md) — subagent · VoltAgent Community · Claude Code · 815 installs — A subagent for improving existing React code, from performance and state flow to architecture and tests. - [beui](https://affpapa.org/en/nevibecode/skills/beui.md) — skill · starc007 · Claude Code, Codex, Cursor +3 · 844 installs — Selects and installs animated React components from beUI via MCP or shadcn registry. - [migrate-oai-app](https://affpapa.org/en/nevibecode/skills/migrate-oai-app.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 1100 installs — Guides developers migrating interactive widgets from OpenAI Apps SDK to MCP Apps SDK. - [ui-design-system](https://affpapa.org/en/nevibecode/skills/ui-design-system.md) — skill · Alireza Rezvani · Claude Code · 1076 installs — This skill builds design tokens, component structures, and responsive calculations. - [clerk](https://affpapa.org/en/nevibecode/skills/clerk.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 30000 installs — Reads your Clerk question and routes it to the right sub-skill: setup, CLI, framework patterns, billing, webhooks. - [a11y-audit](https://affpapa.org/en/nevibecode/skills/a11y-audit.md) — skill · Alireza Rezvani · Claude Code · 970 installs — Scans web projects for WCAG 2.2 Level A and AA issues, suggests fixes, then checks the result again. - [tanstack-router-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-router-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 7100 installs — A rule set for TanStack Router in React: type safety, data loading, search params, navigation. - [tailwind-css-patterns](https://affpapa.org/en/nevibecode/skills/tailwind-css-patterns.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 17700 installs — A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. - [react-component-performance](https://affpapa.org/en/nevibecode/skills/dimillian-react-component-performance.md) — skill · Dimillian · Claude Code, Codex, Cursor +3 · 1100 installs — Identifies React render hotspots, isolates fast-changing state, and eliminates re-render churn. - [gsap](https://affpapa.org/en/nevibecode/skills/mengto-gsap.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1800 installs — A skill that helps your coding agent write and debug GSAP web animations: timelines, ScrollTrigger, stagger, transforms. - [gsap-scrolltrigger-storytelling](https://affpapa.org/en/nevibecode/skills/gsap-scrolltrigger-storytelling.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for scroll-driven product storytelling: pinned scenes, progressive UI reveals and transitions between sections, built on GSAP ScrollTrigger. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=5 ## 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