# 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 2 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=2 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [flow](https://affpapa.org/en/nevibecode/skills/flow.md) — skill · react · Claude Code, Codex, Cursor +3 · 1100 installs — Runs Flow type checking in a React project and reports errors with file locations. - [nextjs-app-router-patterns](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-patterns.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 32529 installs — This skill covers Next.js App Router patterns for rendering, routing, and data fetching. - [react](https://affpapa.org/en/nevibecode/skills/react.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 16300 installs — This skill turns json-render JSON specs into React component trees. - [chakra-ui-builder](https://affpapa.org/en/nevibecode/skills/chakra-ui-builder.md) — skill · chakra-ui · Claude Code, Codex, Cursor +3 · 3500 installs — Build responsive, accessible interfaces with Chakra UI v3, add the library to a project, and shape its theme. - [frontend-design](https://affpapa.org/en/nevibecode/skills/bytedance-frontend-design.md) — skill · bytedance · Claude Code, Codex, Cursor +3 · 3700 installs — The skill picks an aesthetic direction before the agent writes any code. - [ai-elements](https://affpapa.org/en/nevibecode/skills/vercel-ai-elements.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 20400 installs — React component library for AI interfaces: messages, conversation history, prompt inputs, tool call displays. - [agentation](https://affpapa.org/en/nevibecode/skills/agentation.md) — skill · benjitaylor · Claude Code, Codex, Cursor +3 · 13600 installs — Adds a visual feedback toolbar to a Next.js project and, on request, wires it to your coding agent over MCP. - [chakra-ui-refactor](https://affpapa.org/en/nevibecode/skills/chakra-ui-refactor.md) — skill · chakra-ui · Claude Code, Codex, Cursor +3 · 2800 installs — Reviews components against Chakra UI v3 patterns and converts markup from HTML, Tailwind, or styled-components. - [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/openai-figma-code-connect-components.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 2700 installs — Maps published Figma design components to codebase implementations using Figma Code Connect. - [power-apps-code-app-scaffold](https://affpapa.org/en/nevibecode/skills/power-apps-code-app-scaffold.md) — skill (official GitHub) · github · GitHub Copilot · 8700 installs — Scaffolds a Power Apps Code App using React and TypeScript. - [react-vite-dashboard](https://affpapa.org/en/nevibecode/skills/react-vite-dashboard.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 5500 installs — This skill converts Stitch designs into production React and Vite dashboards. - [opentui](https://affpapa.org/en/nevibecode/skills/anomalyco-opentui.md) — skill · anomalyco · Claude Code, Codex, Cursor +3 · 3700 installs — Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment. - [frontend-design](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 4800 installs — Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. - [interaction-design](https://affpapa.org/en/nevibecode/skills/interaction-design.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 16146 installs — This skill helps design microinteractions, transitions, and feedback states. - [design-system-patterns](https://affpapa.org/en/nevibecode/skills/design-system-patterns.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 15953 installs — Guides the design of design tokens, theme switching, and component library architecture. - [next](https://affpapa.org/en/nevibecode/skills/next.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 8600 installs — Converts JSON specs into Next.js apps with routes, layouts, SSR, and metadata. - [react-best-practices](https://affpapa.org/en/nevibecode/skills/mastra-ai-react-best-practices.md) — skill · mastra-ai · Claude Code, Codex, Cursor +3 · 2800 installs — 27 React performance and quality rules, priority-ordered: from eliminating request waterfalls to strict typing. - [devtools](https://affpapa.org/en/nevibecode/skills/devtools.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 8300 installs — Debug panel for json-render apps: component tree, state editor, actions log, streaming patches, and element picker. - [react-state-management](https://affpapa.org/en/nevibecode/skills/react-state-management.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 15286 installs — Helps choose and structure React state management for local, global, server, URL, and form data. - [chakra-ui-migrate](https://affpapa.org/en/nevibecode/skills/chakra-ui-migrate.md) — skill · chakra-ui · Claude Code, Codex, Cursor +3 · 1800 installs — A migration skill that guides projects from Chakra UI v2 to v3. - [directives](https://affpapa.org/en/nevibecode/skills/directives.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 8000 installs — Pre-built directives for json-render: formatting, math, string handling, i18n. - [e2e-tests-studio](https://affpapa.org/en/nevibecode/skills/e2e-tests-studio.md) — skill · mastra-ai · Claude Code, Codex, Cursor +3 · 2500 installs — A skill that automatically generates Playwright E2E tests when you modify playground components. - [typescript-write](https://affpapa.org/en/nevibecode/skills/typescript-write.md) — skill · metabase · Claude Code, Codex, Cursor +3 · 2100 installs — Skill for writing and editing TypeScript and JavaScript code to Metabase standards. - [web-component-design](https://affpapa.org/en/nevibecode/skills/web-component-design.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 13167 installs — This skill helps design reusable components for React, Vue, and Svelte. - [premium-frontend-ui](https://affpapa.org/en/nevibecode/skills/premium-frontend-ui.md) — skill (official GitHub) · Utkarsh Patrikar · GitHub Copilot · 4900 installs — Guides GitHub Copilot when building animated web interfaces. - [react-modernization](https://affpapa.org/en/nevibecode/skills/react-modernization.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 12625 installs — This skill upgrades React codebases, moves class components to hooks, and guides React 18 adoption. - [opentui](https://affpapa.org/en/nevibecode/skills/opentui.md) — skill · msmps · Claude Code, Codex, Cursor +3 · 64500 installs — Guides coding agents through building OpenTUI terminal interfaces, from choosing Core, React, or Solid to handling input, animations, and tests. - [material-ui-nextjs](https://affpapa.org/en/nevibecode/skills/material-ui-nextjs.md) — skill · mui · Claude Code, Codex, Cursor +3 · 727 installs — A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. - [presentation](https://affpapa.org/en/nevibecode/skills/presentation.md) — skill · iii-hq · Claude Code, Codex, Cursor +3 · 3500 installs — Turns a technical-spec directory into an interactive web presentation. - [dependency-upgrade](https://affpapa.org/en/nevibecode/skills/dependency-upgrade.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 11079 installs — This skill plans major dependency upgrades, checks compatibility, and stages changes with tests. - [web-artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-web-artifacts-builder.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces. - [mcp](https://affpapa.org/en/nevibecode/skills/mcp.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 5800 installs — This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code. - [artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-artifacts-builder.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A skill designed for generating multi-component claude.ai HTML artifacts. - [design-motion-principles](https://affpapa.org/en/nevibecode/skills/design-motion-principles.md) — skill · kylezantos · Claude Code, Codex, Cursor +3 · 12700 installs — Builds or audits UI motion with rules based on project context and interaction frequency. - [magic-ui](https://affpapa.org/en/nevibecode/skills/magic-ui.md) — skill · magicuidesign · Claude Code, Codex, Cursor +3 · 1200 installs — The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. - [material-ui-theming](https://affpapa.org/en/nevibecode/skills/material-ui-theming.md) — skill · mui · Claude Code, Codex, Cursor +3 · 607 installs — Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. - [improve-react](https://affpapa.org/en/nevibecode/skills/improve-react.md) — skill · millionco · Claude Code, Codex, Cursor +3 · 2500 installs — Audits an entire React codebase with React Doctor and drafts self-contained implementation plans for other agents. - [expo-dom](https://affpapa.org/en/nevibecode/skills/expo-dom.md) — skill · expo · Claude Code, Codex, Cursor +3 · 21000 installs — Runs web code in a webview on native platforms and renders as-is on web. - [streamdown](https://affpapa.org/en/nevibecode/skills/streamdown.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 3200 installs — Renders Markdown in React components with streaming support for AI agents, Shiki syntax highlighting, Mermaid diagrams, and KaTeX math rendering. - [debugging-streamlit](https://affpapa.org/en/nevibecode/skills/debugging-streamlit.md) — skill · streamlit · Claude Code, Codex, Cursor +3 · 493 installs — Runs Streamlit full-stack debugging with hot-reload, dedicated session logs, and Playwright UI screenshot helpers for testing frontend and backend changes. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=3 ## 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