# 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 14 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=14 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [konsta-ui](https://affpapa.org/en/nevibecode/skills/konsta-ui.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 836 installs — A skill that walks your agent through Konsta UI v5 setup in Capacitor and helps track down why components render unstyled. - [react-optimise](https://affpapa.org/en/nevibecode/skills/react-optimise.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 396 installs — A skill that walks through React app performance: React Compiler, bundle size, rendering, data fetching, Core Web Vitals. - [react-composition-patterns](https://affpapa.org/en/nevibecode/skills/react-composition-patterns.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 481 installs — Teaches coding agents clean React composition patterns. - [elements](https://affpapa.org/en/nevibecode/skills/elements.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 1100 installs — Adds and configures styled assistant-ui components in your codebase. - [shadcn-component-boundaries](https://affpapa.org/en/nevibecode/skills/shadcn-component-boundaries.md) — skill · purrfold · Claude Code, Codex, Cursor +3 · 2900 installs — Sets architectural boundaries for shadcn UI components. - [project-architecture](https://affpapa.org/en/nevibecode/skills/project-architecture.md) — skill · purrfold · Claude Code, Codex, Cursor +3 · 2900 installs — Enforces server-first boundaries in Next.js and Astro projects. - [shadcn-inertia](https://affpapa.org/en/nevibecode/skills/shadcn-inertia.md) — skill · inertia-rails · Claude Code, Codex, Cursor +3 · 432 installs — Adapts shadcn/ui components for Inertia.js Rails React applications instead of Next.js. - [faststore-storefront](https://affpapa.org/en/nevibecode/skills/faststore-storefront.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Guides AI coding agents through VTEX FastStore storefront development: React 18 components, section overrides, SCSS styling constraints, and CMS schema sync. - [vtex-io-messages-and-i18n](https://affpapa.org/en/nevibecode/skills/vtex-io-messages-and-i18n.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Keeps user-facing copy in the VTEX IO messages infrastructure instead of hardcoded strings in JSX and resolvers. - [vtex-io-render-runtime-and-blocks](https://affpapa.org/en/nevibecode/skills/vtex-io-render-runtime-and-blocks.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches the agent to expose React components as Store Framework blocks in VTEX IO: store/interfaces.json entries, composition and theme wiring. - [vtex-io-admin-react](https://affpapa.org/en/nevibecode/skills/vtex-io-admin-react.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states. - [inertia-rails-setup](https://affpapa.org/en/nevibecode/skills/inertia-rails-setup.md) — skill · inertia-rails · Claude Code, Codex, Cursor +3 · 419 installs — Detects your frontend framework and backend gems in an Inertia Rails project, offers missing dependencies, and writes instructions into CLAUDE.md. - [csrf-protection](https://affpapa.org/en/nevibecode/skills/csrf-protection.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 453 installs — A skill that walks your agent through CSRF protection: synchronizer tokens, double-submit cookies and SameSite attributes. - [tanstack-router](https://affpapa.org/en/nevibecode/skills/claude-skills-maintainers-tanstack-router.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 445 installs — Configures type-safe file-based routing in React SPAs and resolves integration issues with TanStack Query or Cloudflare Workers. - [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — Patterns for embedding charts and diagrams into React and Next.js: SSR boundaries, hydration safety, URL-backed state, and isolated rendering layers. - [docyrus-api-dev](https://affpapa.org/en/nevibecode/skills/docyrus-api-dev.md) — skill · Docyrus · Claude Code, Codex, Cursor +3 · 824 installs — This skill guides Docyrus API integration with OAuth2, data-source requests, query payloads, and external connectors. - [generative-ui](https://affpapa.org/en/nevibecode/skills/assistant-ui-generative-ui.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 1000 installs — An assistant-ui skill that lets the model assemble a UI from a component vocabulary at runtime instead of filling a layout you wrote. - [internationalization-i18n](https://affpapa.org/en/nevibecode/skills/secondsky-internationalization-i18n.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 433 installs — Sets up multi-language workflows using i18next, gettext, or native Intl APIs. - [websocket-implementation](https://affpapa.org/en/nevibecode/skills/secondsky-websocket-implementation.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 425 installs — A skill that has your agent write the WebSocket server and client: rooms, reconnection, Redis scaling. - [capacitor-react](https://affpapa.org/en/nevibecode/skills/capacitor-react.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 776 installs — Guides coding agents through building mobile apps with Capacitor and React 18+. - [bun-tanstack-start](https://affpapa.org/en/nevibecode/skills/bun-tanstack-start.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 414 installs — A skill that tells your agent how to build a TanStack Start app on the Bun runtime: routing, server functions, build config. - [mui-base](https://affpapa.org/en/nevibecode/skills/mui-base.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 328 installs — A skill with 48 rules for building headless React component libraries the MUI Base UI way. - [ink](https://affpapa.org/en/nevibecode/skills/assistant-ui-ink.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 923 installs — A skill for building chat interfaces inside the terminal: it wires the assistant-ui runtime to Ink's renderer and prints assistant text as ANSI markdown. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/existential-birds-shadcn-ui.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 351 installs — Teaches your agent how to build shadcn/ui components: Radix primitives, Tailwind, CVA variants and data-slot. - [ionic-app-upgrades](https://affpapa.org/en/nevibecode/skills/ionic-app-upgrades.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 740 installs — Walks the agent through a major Ionic upgrade: step-by-step migrations for Angular, React and Vue, plus component and CSS variable breaking changes. - [bun-react-ssr](https://affpapa.org/en/nevibecode/skills/bun-react-ssr.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 395 installs — A skill for building server-rendered React on Bun: renderToString, streaming, hydration and a hand-rolled router. - [ionic-app-creation](https://affpapa.org/en/nevibecode/skills/ionic-app-creation.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 707 installs — This skill walks an agent through creating an Ionic app with Ionic CLI, including framework, starter template, Capacitor, and Tailwind choices. - [shadcn-layouts](https://affpapa.org/en/nevibecode/skills/shadcn-layouts.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 457 installs — Teaches the agent the CSS models behind shadcn and Tailwind layouts, so height, scroll and flex/grid problems get fixed instead of guessed at. - [nextjs-architecture-expert](https://affpapa.org/en/nevibecode/agents/nextjs-architecture-expert.md) — subagent · davila7 · Claude Code · 4935 installs — A Claude subagent for Next.js architecture: App Router, Server Components, Pages Router migration and performance work. - [echarts](https://affpapa.org/en/nevibecode/skills/echarts.md) — skill · sentimony · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for building, styling and debugging Apache ECharts charts in JavaScript, React and Vue. - [react-hook-form-zod](https://affpapa.org/en/nevibecode/skills/secondsky-react-hook-form-zod.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 376 installs — Sets up type-safe React forms using React Hook Form and Zod validation. - [inngest-realtime](https://affpapa.org/en/nevibecode/skills/inngest-realtime.md) — skill · inngest · Claude Code, Codex, Cursor +3 · 797 installs — A skill that shows the agent how to push updates from durable Inngest functions into a live UI: order status, token streaming, logs and user approvals. - [thesys-generative-ui](https://affpapa.org/en/nevibecode/skills/thesys-generative-ui.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 371 installs — A skill that teaches your agent to build React components from plain-language prompts with the Thesys SDK. - [mastering-animate-presence](https://affpapa.org/en/nevibecode/skills/mastering-animate-presence.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 322 installs — Checks Motion and Framer Motion code for AnimatePresence mistakes and exit animation problems. - [pwa-development](https://affpapa.org/en/nevibecode/skills/jwynia-pwa-development.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 437 installs — A skill for React and Svelte projects that walks the agent through service workers, offline support and installable apps. - [react-flow-code-review](https://affpapa.org/en/nevibecode/skills/react-flow-code-review.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 319 installs — Walks @xyflow/react code through a review checklist: anti-patterns, wasted re-renders, typing. - [sentry-react-sdk](https://affpapa.org/en/nevibecode/skills/getsentry-sentry-react-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 579 installs — The skill scans your React app and walks you through a full Sentry setup: errors, tracing, session replay, logging and profiling. - [remotion-animation](https://affpapa.org/en/nevibecode/skills/remotion-animation.md) — skill · ncklrs · Claude Code, Codex, Cursor +3 · 441 installs — Builds timing constants, spring physics, and interpolation ranges for Remotion without creating UI components. - [gsap-awwwards-website](https://affpapa.org/en/nevibecode/skills/gsap-awwwards-website.md) — skill · rebyteai-template · Claude Code, Codex, Cursor +3 · 810 installs — This skill scaffolds a product landing template built on React 19, GSAP scroll animations and Tailwind CSS 4. - [legend-state-best-practices](https://affpapa.org/en/nevibecode/skills/legend-state-best-practices.md) — skill · LegendApp · Claude Code, Codex, Cursor +3 · 475 installs — A skill that sets the rules for @legendapp/state: observable ownership, subscriptions, effects and persistence. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=15 ## 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