# 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. 717 cards · page 10 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=10 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [react-server-components](https://affpapa.org/en/nevibecode/skills/react-server-components.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 954 installs — A skill that teaches React Server Components: which components belong on the server and where 'use client' goes. - [web-development](https://affpapa.org/en/nevibecode/skills/web-development.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for implementing, debugging and shipping a web frontend once the product direction is settled. - [progressive-hydration](https://affpapa.org/en/nevibecode/skills/progressive-hydration.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 952 installs — A skill that tells the agent how to split hydration of a server-rendered React app and defer JavaScript for non-critical sections. - [react-selective-hydration](https://affpapa.org/en/nevibecode/skills/react-selective-hydration.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 943 installs — Guides your coding agent in setting up selective hydration and streaming SSR in React 18+. - [server-side-rendering](https://affpapa.org/en/nevibecode/skills/server-side-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 942 installs — A skill that walks your agent through server-side rendering in React and tells you when SSR pays off and when static or client rendering is the better call. - [aceternity-ui](https://affpapa.org/en/nevibecode/skills/aceternity-ui.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 1500 installs — This skill gives your agent the Aceternity UI playbook: 100+ animated React components for Next.js with Tailwind. - [electron-dev](https://affpapa.org/en/nevibecode/skills/electron-dev.md) — skill · jamditis · Claude Code, Codex, Cursor +3 · 305 installs — A skill for building Electron desktop apps with React, TypeScript and Vite: IPC, tray, PTY terminals, packaging. - [tscircuit](https://affpapa.org/en/nevibecode/skills/tscircuit.md) — skill · tscircuit · Claude Code, Codex, Cursor +3 · 1100 installs — Guides your agent through electronics design in tscircuit: picking parts, routing traces, running checks. - [analytics-metrics](https://affpapa.org/en/nevibecode/skills/analytics-metrics.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 380 installs — A skill that hands your agent ready Recharts components: line, bar and pie charts plus KPI cards. - [incremental-static-rendering](https://affpapa.org/en/nevibecode/skills/incremental-static-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 918 installs — Teaches your coding agent Incremental Static Regeneration in Next.js. - [react-flow](https://affpapa.org/en/nevibecode/skills/react-flow.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 1300 installs — Provides workflow diagram patterns using @xyflow/react. - [adding-error-tracking](https://affpapa.org/en/nevibecode/skills/adding-error-tracking.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 386 installs — This skill wires Sentry into a web app: error tracking, performance traces and source maps. - [react-web](https://affpapa.org/en/nevibecode/skills/react-web.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 339 installs — Enforces test-first development for React components and pages using React Testing Library. - [static-rendering](https://affpapa.org/en/nevibecode/skills/static-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 910 installs — A skill that walks your agent through static generation: which pages can be pre-rendered to HTML at build time and how to do it in Next.js. - [wrapped-video](https://affpapa.org/en/nevibecode/skills/wrapped-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a row of data into a vertical shareable recap video. - [adding-analytics](https://affpapa.org/en/nevibecode/skills/adding-analytics.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 371 installs — Guides the AI agent in setting up PostHog analytics, page view tracking, feature flags, and session replay across web apps. - [streaming-ssr](https://affpapa.org/en/nevibecode/skills/streaming-ssr.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 883 installs — Teaches the agent to flush HTML in chunks with renderToPipeableStream and Suspense. - [adding-feature-flags](https://affpapa.org/en/nevibecode/skills/adding-feature-flags.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 361 installs — Adds feature toggles for gradual rollouts and A/B tests using PostHog or local environment variables. - [tanstack-virtual](https://affpapa.org/en/nevibecode/skills/tanstack-virtual.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 2500 installs — A skill that shows the agent how to wire up TanStack Virtual so only visible rows render in long lists, tables and grids. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/mindrally-tailwindcss.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1500 installs — Tells the agent how to write TailwindCSS: utility classes in markup, mobile-first breakpoints, dark mode through the dark: variant. - [framer-motion](https://affpapa.org/en/nevibecode/skills/pproenca-framer-motion.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 1100 installs — Optimizes React animations using Framer Motion guidelines: slashes bundle size, eliminates unnecessary re-renders, and polishes gesture or scroll transitions. - [api-design](https://affpapa.org/en/nevibecode/skills/margelo-api-design.md) — skill · margelo · Claude Code, Codex, Cursor +3 · 552 installs — This skill shapes and reviews public APIs for TypeScript, JavaScript, React, and React Native libraries before implementation. - [typescript-react-reviewer](https://affpapa.org/en/nevibecode/skills/typescript-react-reviewer.md) — skill · dotneet · Claude Code, Codex, Cursor +3 · 9000 installs — A code review skill for TypeScript and React 19 apps. - [frontend-accessibility-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-accessibility-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 863 installs — A skill with 7 accessibility rules for React: semantic markup, screen readers, keyboard support, user preferences. - [react-query](https://affpapa.org/en/nevibecode/skills/react-query.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1400 installs — Tells the agent how to fetch and cache server data in React: queries, mutations, invalidation and optimistic updates. - [tanstack-devtools](https://affpapa.org/en/nevibecode/skills/tanstack-devtools.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 2300 installs — Helps AI agents configure the unified TanStack debugging panel for React. - [react-three-fiber-game](https://affpapa.org/en/nevibecode/skills/react-three-fiber-game.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 39 installs — Structures React-hosted 3D browser games and scenes using React Three Fiber and the pmndrs stack. - [react-hook-form-zod](https://affpapa.org/en/nevibecode/skills/react-hook-form-zod.md) — skill · ovachiever · Claude Code, Codex, Cursor +3 · 722 installs — A skill that walks your agent through React Hook Form with Zod validation. - [react-testing-library](https://affpapa.org/en/nevibecode/skills/react-testing-library.md) — skill · itechmeat · Claude Code, Codex, Cursor +3 · 1400 installs — Guides coding agents to write user-centric component tests using accessible queries, user-event simulations, and async helpers. - [redux-toolkit](https://affpapa.org/en/nevibecode/skills/redux-toolkit.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1300 installs — Redux Toolkit best practices for React and Next.js applications using TypeScript. - [front-end-developer](https://affpapa.org/en/nevibecode/skills/front-end-developer.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1300 installs — Turns your agent into a senior front-end developer: React, Next.js, TypeScript, Tailwind, accessibility. - [tauri-development](https://affpapa.org/en/nevibecode/skills/tauri-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1300 installs — The skill provides guidelines for building desktop applications with Tauri. - [nextjs-typescript-tailwindcss-supabase](https://affpapa.org/en/nevibecode/skills/nextjs-typescript-tailwindcss-supabase.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code. - [webflow-code-component:component-audit](https://affpapa.org/en/nevibecode/skills/webflow-code-componentcomponent-audit.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 1000 installs — Reviews Webflow code components for architecture: what should be a prop, how state is wired, where slots are missing, and what breaks in Shadow DOM. - [webflow-cli:designer-extension](https://affpapa.org/en/nevibecode/skills/webflow-clidesigner-extension.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks the agent through the whole Designer Extension loop in Webflow: pick a template, init the project, serve it locally, bundle it for upload. - [webflow-cli:code-component](https://affpapa.org/en/nevibecode/skills/webflow-clicode-component.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 1000 installs — Configures React projects and deploys custom React components to Webflow Designer using Webflow CLI. - [webflow-code-component:component-scaffold](https://affpapa.org/en/nevibecode/skills/webflow-code-componentcomponent-scaffold.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 997 installs — Scaffolds a Webflow Code Component boilerplate with React 18+ and a .webflow.tsx definition file. - [webflow-cli:devlink](https://affpapa.org/en/nevibecode/skills/webflow-clidevlink.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 998 installs — Pulls Webflow Designer components into React and Next.js code, syncs later design edits, and shows what changed after each sync. - [webflow-code-component:convert-component](https://affpapa.org/en/nevibecode/skills/webflow-code-componentconvert-component.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 995 installs — Turns an existing React component into a Webflow Code Component: reads the props, writes the .webflow.tsx definition and flags what has to change. - [21st-cli-use](https://affpapa.org/en/nevibecode/skills/21st-cli-use.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 2000 installs — Searches, retrieves, and installs React and shadcn components or SVG logos from the 21st.dev catalog using the 21st CLI. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=11 ## 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