# 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. 803 cards · page 6 of 21 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=6 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [experience-ui-bundle-features-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-features-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5100 installs — Installs prebuilt feature packages into a Salesforce UI bundle — login, logout, protected routes, search — instead of hand-building them. - [clerk-react-router-patterns](https://affpapa.org/en/nevibecode/skills/clerk-react-router-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 15500 installs — Guides Clerk integration with React Router v7/v8, including loaders, protected routes, SSR auth, and organization switching. - [clerk-tanstack-patterns](https://affpapa.org/en/nevibecode/skills/clerk-tanstack-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 15500 installs — Walks your agent through Clerk auth in TanStack React Start: route guards, createServerFn, loaders and request middleware. - [experience-ui-bundle-agentforce-client-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-agentforce-client-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 installs — Embeds the Agentforce Conversation Client in React and Angular UI Bundle apps: detects the framework, validates agentId, wires the component into a page. - [experience-ui-bundle-site-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-site-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 installs — Generates Salesforce Digital Experience Site infrastructure for hosting React UI bundles. - [tailwind-theme-builder](https://affpapa.org/en/nevibecode/skills/tailwind-theme-builder.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 3200 installs — This skill sets up a Tailwind v4 + shadcn/ui theme with dark mode: installs deps, maps CSS variables through @theme inline, wires a theme toggle. - [i18n-expert](https://affpapa.org/en/nevibecode/skills/i18n-expert.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 2700 installs — Sets up and audits UI localization by replacing visible strings with keys and checking locale parity. - [clerk-astro-patterns](https://affpapa.org/en/nevibecode/skills/clerk-astro-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14300 installs — Walks your agent through Clerk inside Astro: middleware, protected SSR pages, API route auth and island components. - [prototype-prompt-generator](https://affpapa.org/en/nevibecode/skills/prototype-prompt-generator.md) — skill · stellarlinkco · Claude Code, Codex, Cursor +3 · 393 installs — Turns UI requirements into detailed, structured prompts for building HTML, CSS, or React prototypes. - [bencium-code-conventions](https://affpapa.org/en/nevibecode/skills/bencium-code-conventions.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — Sets Bence's conventions for React and Next.js projects, covering the stack, code style, tests and workflow. - [sanity-live-cache-components](https://affpapa.org/en/nevibecode/skills/sanity-live-cache-components.md) — skill · sanity-io · Claude Code, Codex, Cursor +3 · 527 installs — Connects next-sanity to Next.js Cache Components: sanityFetch behind one shared 'use cache' boundary, with keeping cached pages fresh. - [tanstack-start](https://affpapa.org/en/nevibecode/skills/jezweb-tanstack-start.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2500 installs — Scaffolds a full-stack TanStack Start app on Cloudflare Workers from scratch: SSR, file-based routing, D1, auth. - [tanstack-integration-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-integration-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 2900 installs — A skill that hands the agent rules for wiring TanStack Query, Router and Start together: loaders, SSR hydration, cache ownership. - [remotion-3d-ticker](https://affpapa.org/en/nevibecode/skills/remotion-3d-ticker.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 852 installs — Builds looping 3D column scroll effects for Remotion videos. - [convex-realtime](https://affpapa.org/en/nevibecode/skills/convex-realtime.md) — skill · waynesutton · Claude Code, Codex, Cursor +3 · 2900 installs — A skill for wiring React to Convex subscriptions: useQuery patterns, optimistic updates, pagination that stays live, and cutting subscription churn. - [building-admin-dashboard-customizations](https://affpapa.org/en/nevibecode/skills/building-admin-dashboard-customizations.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4400 installs — Guides AI agents in building Medusa Admin dashboard extensions, widgets, and custom UI routes. - [react-doctor](https://affpapa.org/en/nevibecode/skills/brianlovin-react-doctor.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — The skill scans a React codebase against 47+ rules and returns a 0-100 score with file paths and line numbers. - [experience-ui-bundle-project-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-project-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 3200 installs — Generates a ready-to-develop Salesforce UI bundle starter project from a template via Salesforce CLI. - [design-code](https://affpapa.org/en/nevibecode/skills/design-code.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 525 installs — This skill generates component and screen code for a requested framework. - [ui-designer](https://affpapa.org/en/nevibecode/skills/daymade-ui-designer.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 1600 installs — Extracts a design system from UI screenshots and prepares an implementation prompt for React. - [apollo-client](https://affpapa.org/en/nevibecode/skills/apollo-client.md) — skill · apollographql · Claude Code, Codex, Cursor +3 · 5600 installs — A skill that walks your agent through Apollo Client 4.x in React: queries, mutations, caching, local state and error troubleshooting. - [neon-realtime](https://affpapa.org/en/nevibecode/skills/neon-realtime.md) — skill · neondatabase · Claude Code, Codex, Cursor +3 · 6000 installs — Turns any SQL query live: the client subscribes to row changes in Lakebase Postgres and gets them in batches. - [tailwind-v4-shadcn](https://affpapa.org/en/nevibecode/skills/tailwind-v4-shadcn.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 8100 installs — Sets up Tailwind CSS v4 with shadcn/ui, Vite, and React. - [elevenlabs-agents](https://affpapa.org/en/nevibecode/skills/elevenlabs-agents.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1700 installs — Build ElevenLabs conversational voice agents with configured tools, a knowledge base, and SDK integration for an app or server. - [vitest](https://affpapa.org/en/nevibecode/skills/jezweb-vitest.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1700 installs — Detects your project type and writes a working Vitest setup: config, test setup file, utilities and a sample test. - [frontend-app-builder](https://affpapa.org/en/nevibecode/skills/frontend-app-builder.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 252 installs — This skill designs and builds frontend apps, websites, and games, then checks the result in a browser. - [dx-project-create](https://affpapa.org/en/nevibecode/skills/dx-project-create.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2600 installs — Scaffolds a new Salesforce DX project from CLI templates, moves the active session into the project folder, and connects a default org. - [nextjs-performance](https://affpapa.org/en/nevibecode/skills/nextjs-performance.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4900 installs — A Next.js optimization skill: Core Web Vitals, images and fonts, caching, streaming, bundle size. - [react-patterns](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-react-patterns.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4800 installs — Teaches your agent React 19 and Next.js App Router patterns: Server Components, Server Actions, useOptimistic, Suspense boundaries. - [tailwind-design-system](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-tailwind-design-system.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4500 installs — Creates and orchestrates a design system using Tailwind CSS v4.1+ and shadcn/ui. - [react-19-plugin-migration](https://affpapa.org/en/nevibecode/skills/react-19-plugin-migration.md) — skill · grafana · Claude Code, Codex, Cursor +3 · 4100 installs — This skill guides changes that prepare a Grafana plugin for React 19 compatibility without upgrading React itself. - [portable-text-serialization](https://affpapa.org/en/nevibecode/skills/portable-text-serialization.md) — skill · sanity · Claude Code, Codex, Cursor +3 · 2900 installs — A skill that shows the agent how to render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown and plain text. - [react-container-presentation-component](https://affpapa.org/en/nevibecode/skills/react-container-presentation-component.md) — skill (official GitHub) · github · GitHub Copilot · 65 installs — This skill scaffolds React components with the Container/Presentation pattern and follows the project’s TypeScript, Storybook, and SCSS conventions. - [sentry-nextjs-sdk](https://affpapa.org/en/nevibecode/skills/sentry-nextjs-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 3600 installs — This skill inspects your Next.js project and guides Sentry setup across browser, Node.js, and Edge runtimes. - [react-code-review](https://affpapa.org/en/nevibecode/skills/react-code-review.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4300 installs — Reviews React components and hooks before merge: composition, hook dependencies, accessibility, TypeScript types. - [experience-ui-bundle-localize](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-localize.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2200 installs — Extracts hardcoded UI strings from React or Angular UI Bundles into Salesforce Custom Labels and wires runtime i18n through the GraphQL UI API. - [nextjs-app-router](https://affpapa.org/en/nevibecode/skills/nextjs-app-router.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3900 installs — Patterns and code examples for Next.js 16+ App Router work, including components, actions, API handlers, caching and routing. - [framer-motion-animator](https://affpapa.org/en/nevibecode/skills/framer-motion-animator.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 11100 installs — Generates smooth Framer Motion animations and micro-interactions in React. - [website-builder-setup](https://affpapa.org/en/nevibecode/skills/website-builder-setup.md) — skill · tenfoldmarc · Claude Code, Codex, Cursor +3 · 580 installs — Walks you through setting up a complete web design stack in Claude Code with UI/UX Pro Max, Framer Motion, and 21st.dev Magic. - [react-patterns](https://affpapa.org/en/nevibecode/skills/jezweb-react-patterns.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that checks React 19 components for waterfalls, bundle bloat and re-renders, and suggests composition fixes. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=7 ## 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