# 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 9 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=9 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [micro-interaction](https://affpapa.org/en/nevibecode/skills/micro-interaction.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2500 installs — A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. - [react](https://affpapa.org/en/nevibecode/skills/pedro-nauck-react.md) — skill · Pedro Nauck · Claude Code, Codex, Cursor +3 · 448 installs — Guidance for building and reviewing React 19 components and hooks with React Compiler in mind. - [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a screenshot, mockup or Figma export into working front-end code, then renders it and compares the result against the image. - [tanstack-pacer](https://affpapa.org/en/nevibecode/skills/tanstack-pacer.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 3900 installs — A skill that tells your agent how to wire up TanStack Pacer: debouncing, throttling, rate limiting, queues and batching in one package. - [tanstack-start](https://affpapa.org/en/nevibecode/skills/tanstack-start.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 3900 installs — Guides agents through building full-stack React apps with TanStack Start, streaming SSR, and type-safe server functions. - [langsmith-custom-apps](https://affpapa.org/en/nevibecode/skills/langsmith-custom-apps.md) — skill · langchain-ai · Claude Code, Codex, Cursor +3 · 398 installs — Walks you through the LangSmith Custom App lifecycle: scaffolding, local dev, push, and handing the source to someone outside your org. - [page-transition-animation](https://affpapa.org/en/nevibecode/skills/page-transition-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2300 installs — A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation. - [stock-evaluator-v3](https://affpapa.org/en/nevibecode/skills/stock-evaluator-v3.md) — skill · sundial-org · Claude Code, Codex, Cursor +3 · 374 installs — Skill for full stock evaluation before you buy: applies eight legendary investor frameworks, runs technical and fundamental checks, builds a 60+ metric dashboard, and gives a clear buy, hold, or sell call. - [markstream-install](https://affpapa.org/en/nevibecode/skills/markstream-install.md) — skill (official GitHub) · github · GitHub Copilot · 18 installs — Configures Markstream streaming Markdown renderers across React, Vue, Svelte, and Angular projects. - [no-use-effect](https://affpapa.org/en/nevibecode/skills/alejandrobailo-no-use-effect.md) — skill · alejandrobailo · Claude Code, Codex, Cursor +3 · 729 installs — Enforces a zero-useEffect policy across React and React Native components, redirecting logic to derived state, handlers, and dedicated libraries. - [airflow-plugins](https://affpapa.org/en/nevibecode/skills/airflow-plugins.md) — skill · astronomer · Claude Code, Codex, Cursor +3 · 594 installs — This skill walks your agent through building Airflow 3.1+ plugins with FastAPI endpoints, React pages and custom UI tabs. - [ui-design-system](https://affpapa.org/en/nevibecode/skills/samhvw8-ui-design-system.md) — skill · samhvw8 · Claude Code, Codex, Cursor +3 · 3200 installs — A skill for reviewing and building React interfaces with TailwindCSS, Radix UI and shadcn/ui. - [storybook-story-writing](https://affpapa.org/en/nevibecode/skills/storybook-story-writing.md) — skill · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 673 installs — Writes and edits Storybook stories for your components: CSF3 format, every meaningful state, a build that passes. - [markdown](https://affpapa.org/en/nevibecode/skills/markdown.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4300 installs — Tells the agent how to wire markdown rendering for assistant messages in assistant-ui: which renderer to use, how to highlight code, and how to add math or diagrams. - [next-best-practices](https://affpapa.org/en/nevibecode/skills/next-best-practices.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 383 installs — A skill that hands your agent a set of Next.js rules: file conventions, RSC boundaries, async APIs, metadata, error handling. - [frontend-react-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-react-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 1200 installs — A skill with 33 React performance rules: fewer wasted re-renders, leaner bundles, cleaner component composition. - [auditing-performance](https://affpapa.org/en/nevibecode/skills/auditing-performance.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 476 installs — A skill that audits app performance: bundle size, rendering, database queries and Core Web Vitals. - [react-flow](https://affpapa.org/en/nevibecode/skills/framara-react-flow.md) — skill · framara · Claude Code, Codex, Cursor +3 · 821 installs — A skill that guides coding agents through React Flow (@xyflow/react): custom nodes and edges, state, layout, typing and debugging. - [laravel-inertia-react](https://affpapa.org/en/nevibecode/skills/laravel-inertia-react.md) — skill · AsyrafHussin · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that hands your agent ready rules for Inertia pages, useForm handling and shared data across Laravel and React. - [shadcn](https://affpapa.org/en/nevibecode/skills/pedronauck-shadcn.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 369 installs — Guides AI agents through shadcn/ui and Radix UI best practices. - [react-data-fetching](https://affpapa.org/en/nevibecode/skills/react-data-fetching.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches your agent modern React data fetching: parallel requests, caching, deduplication, Suspense. - [react-render-optimization](https://affpapa.org/en/nevibecode/skills/react-render-optimization.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that teaches your agent React rendering patterns: kills unnecessary re-renders, fixes memoization and state design. - [presentational-container-pattern](https://affpapa.org/en/nevibecode/skills/presentational-container-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches agents the presentational and container pattern to split data fetching from React UI. - [react-composition-2026](https://affpapa.org/en/nevibecode/skills/react-composition-2026.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that pushes your agent away from boolean props and rigid component APIs toward compound components, explicit variants and children. - [hooks-pattern](https://affpapa.org/en/nevibecode/skills/hooks-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that teaches your agent React Hooks and helps pull repeated stateful logic into custom hooks. - [web-accessibility](https://affpapa.org/en/nevibecode/skills/hoodini-web-accessibility.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 454 installs — A skill that steers your coding agent toward accessible web UI: ARIA patterns, keyboard focus handling, screen reader support, all following WCAG 2.1. - [tanstack](https://affpapa.org/en/nevibecode/skills/tanstack.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 360 installs — Get focused guidance for React changes involving TanStack Query, Router, or Form. - [react-mcp](https://affpapa.org/en/nevibecode/skills/react-mcp.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 installs — A skill for wiring @assistant-ui/react-mcp into an app: users connect their own MCP servers in the browser and the tools show up in chat. - [observability](https://affpapa.org/en/nevibecode/skills/assistant-ui-observability.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 installs — Wires Langfuse, LangSmith or Helicone into assistant-ui AI SDK backend routes and renders collected spans with the experimental @assistant-ui/react-o11y. - [motion](https://affpapa.org/en/nevibecode/skills/motiondivision-motion.md) — skill · motiondivision · Claude Code, Codex, Cursor +3 · 717 installs — This skill guides Motion and CSS animation work, finds docs and examples, and helps inspect performance issues. - [zustand](https://affpapa.org/en/nevibecode/skills/pedronauck-zustand.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 353 installs — A skill that feeds your coding agent Zustand patterns: domain stores, selector hooks, middleware and persistence. - [copilots](https://affpapa.org/en/nevibecode/skills/copilots.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 3900 installs — An assistant-ui skill that teaches the agent to read page state, click rendered components and mutate their state through React hooks. - [ui-web](https://affpapa.org/en/nevibecode/skills/ui-web.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 393 installs — Design skill enforcing WCAG 2.1 AA accessibility, Tailwind CSS tokens, dark mode contrast, and glassmorphic UI patterns. - [nextjs-app-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-app-architecture.md) — skill · aurorascharff · Claude Code, Codex, Cursor +3 · 485 installs — A skill that keeps a Next.js 16 App Router codebase on one architecture: pages compose, features fetch. - [render-props-pattern](https://affpapa.org/en/nevibecode/skills/render-props-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks through the render props pattern in React and tells you when a hook is the better call. - [client-side-rendering](https://affpapa.org/en/nevibecode/skills/client-side-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks through client-side rendering in React: when CSR fits, and when your page loses on SEO and first paint. - [hoc-pattern](https://affpapa.org/en/nevibecode/skills/hoc-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — Teaches your AI assistant the Higher-Order Component pattern to share logic across React components. - [compound-pattern](https://affpapa.org/en/nevibecode/skills/compound-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — Teaches the agent the compound component pattern for shared implicit state. - [nextjs](https://affpapa.org/en/nevibecode/skills/nextjs.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 50 installs — Guidance for building and debugging Next.js App Router projects. - [ui-testing](https://affpapa.org/en/nevibecode/skills/ui-testing.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 364 installs — An accessibility and visual QA checklist for components: detects invisible buttons, failing contrast ratios, and small touch targets. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=10 ## 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