# 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 18 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=18 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [frontend-ui-dark-ts](https://affpapa.org/en/nevibecode/skills/frontend-ui-dark-ts.md) — skill · Microsoft · Claude Code, GitHub Copilot · 5 installs — A skill for building dark React interfaces with Tailwind CSS: custom theming, glassmorphism, Framer Motion animations. - [magicpath](https://affpapa.org/en/nevibecode/plugins/magicpath.md) — plugin (official OpenAI) · MagicPathAI · Codex, ChatGPT · ★ 7596 — Connects Codex with MagicPath to search, inspect, create, and sync UI components using the CLI. - [remotion](https://affpapa.org/en/nevibecode/plugins/remotion.md) — plugin (official OpenAI) · Remotion · Codex, ChatGPT · ★ 7596 — Helps build programmatic videos using React with animations, audio, captions, and 3D scenes. - [build-web-apps](https://affpapa.org/en/nevibecode/plugins/build-web-apps.md) — plugin (official OpenAI) · OpenAI · Codex, ChatGPT · ★ 7596 — Build web app frontends, create visual assets, and test interfaces in a browser. - [zustand-store-ts](https://affpapa.org/en/nevibecode/skills/zustand-store-ts.md) — skill · Microsoft · Claude Code, GitHub Copilot · 3 installs — A skill that sets the pattern for Zustand stores in TypeScript: separate state and action types, subscribeWithSelector, individual selectors. - [Arc UI](https://affpapa.org/en/nevibecode/mcp/arc-ui.md) — MCP server · kuratlielia · Claude Code, Codex, Cursor +5 · ★ 968 — Connects your AI agent to the Arc UI library docs for motion-ready React components. - [i18n-localization](https://affpapa.org/en/nevibecode/skills/i18n-localization.md) — skill · davila7 · Claude Code · 251 installs — A Claude skill covering internationalization and localization: translation keys, locale files, RTL layout and a checker script. - [nextjs-migration-helper](https://affpapa.org/en/nevibecode/commands/nextjs-migration-helper.md) — command · davila7 · Claude Code · 237 installs — A Claude slash command that walks a Next.js project from Pages Router to App Router, from JavaScript to TypeScript, and from class components to hooks. - [webcomponents-react-mcp-server](https://affpapa.org/en/nevibecode/mcp/webcomponents-react-mcp-server.md) — MCP server · UI5 · Claude Code, Codex, Cursor +5 · ★ 543 — Connects an AI agent to API references and guides for UI5 Web Components for React. - [react-useeffect](https://affpapa.org/en/nevibecode/skills/react-useeffect.md) — skill · davila7 · Claude Code · 127 installs — A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary. - [UI Beats](https://affpapa.org/en/nevibecode/mcp/ui-beats.md) — MCP server · nikhils4 · Claude Code, Codex, Cursor +5 · ★ 234 — Searches the UI Beats catalog for animated React components, reads their props, and retrieves shadcn install commands directly inside coding agents. - [affectUI](https://affpapa.org/en/nevibecode/mcp/affectui.md) — MCP server · flohoeller · Claude Code, Codex, Cursor +5 · ★ 234 — MCP server to discover and embed animated React components for AI software. - [shadcn](https://affpapa.org/en/nevibecode/rules/shadcn.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down how a team builds with shadcn/ui: folder layout, typed props, CVA variants, forms on React Hook Form and Zod. - [react](https://affpapa.org/en/nevibecode/rules/sanjeed5-react.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down React conventions for a team: pure components, hook rules, feature-based structure. - [react-native](https://affpapa.org/en/nevibecode/rules/react-native.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets mandatory React Native practices: feature-first layout, functional components, hooks and typing. - [mobx](https://affpapa.org/en/nevibecode/rules/mobx.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that lays out MobX state in React: one RootStore, explicit observables, and observer only on leaf components. - [material-ui](https://affpapa.org/en/nevibecode/rules/material-ui.md) — rule · sanjeed5 · Cursor · ★ 3579 — This rule tells Cursor how to write React code with Material-UI: folder layout, theme setup, styling and component style. - [chakra-ui](https://affpapa.org/en/nevibecode/rules/chakra-ui.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to build Chakra UI v2 interfaces: token-first theming, component recipes, style props instead of CSS. - [ant-design](https://affpapa.org/en/nevibecode/rules/ant-design.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to build UI with Ant Design v6.x: tokens for theming, the grid for layout, accessible components. - [microcharts](https://affpapa.org/en/nevibecode/mcp/microcharts.md) — MCP server · ganapativs · Claude Code, Codex, Cursor +5 · ★ 205 — Generates tiny SVG charts with automatic alt summaries directly from natural language. - [domscribe](https://affpapa.org/en/nevibecode/plugins/domscribe.md) — plugin · patchorbit · Claude Code · ★ 195 — Click an element in the browser, describe the change in words, and the agent finds the file and line. - [Keyline Icons](https://affpapa.org/en/nevibecode/mcp/keyline-icons.md) — MCP server · keyline-icons · Claude Code, Codex, Cursor +5 · ★ 178 — Lets an agent look up an icon by name and hand back its SVG source or a React import. - [Hyperiux Vault](https://affpapa.org/en/nevibecode/mcp/hyperiux-vault.md) — MCP server · Hyperiux-Immersion-Labs · Claude Code, Codex, Cursor +5 · ★ 101 — Search and inspect React and Next.js interaction effects, then request source through an AI client. - [Watermelon UI](https://affpapa.org/en/nevibecode/mcp/watermelon-ui.md) — MCP server · WatermelonCorp · Claude Code, Codex, Cursor +5 · ★ 97 — MCP server that searches React, Tailwind CSS, and shadcn components. - [plumb-mcp](https://affpapa.org/en/nevibecode/mcp/plumb-mcp.md) — MCP server · tathagat22 · Claude Code, Codex, Cursor +5 · ★ 81 — Bidirectional MCP server for Figma and code: transforms layouts into React, verifies rendered UI against the source, and drafts Figma designs from prompts. - [aicanvas](https://affpapa.org/en/nevibecode/mcp/aicanvas.md) — MCP server · aicanvas-me · Claude Code, Codex, Cursor +5 · ★ 68 — Finds animated, shadcn-compatible React components and brings them into your codebase. - [Carbon MCP](https://affpapa.org/en/nevibecode/mcp/carbon-mcp.md) — MCP server · carbon-design-system · Claude Code, Codex, Cursor +5 · ★ 40 — Carbon MCP gives AI clients access to Carbon components, tokens, icons, charts, docs, and code examples. - [Starwind UI MCP Server](https://affpapa.org/en/nevibecode/mcp/starwind-ui-mcp-server.md) — MCP server · starwind-ui · Claude Code, Codex, Cursor +5 · ★ 35 — Hands the agent current Starwind UI v3 knowledge: component search, install commands, docs and a v2-to-v3 migration path. - [Vlak](https://affpapa.org/en/nevibecode/mcp/vlak.md) — MCP server · Noord-Ventures · Claude Code, Codex, Cursor +5 · ★ 33 — MCP server for the Vlak design system. - [Talivia Revenue Analytics](https://affpapa.org/en/nevibecode/mcp/talivia-revenue-analytics.md) — MCP server · talivia-group · Claude Code, Codex, Cursor +5 · ★ 32 — Connects your AI agent to Talivia to track web traffic directly to payments. - [UICapsule](https://affpapa.org/en/nevibecode/mcp/uicapsule.md) — MCP server · kyh · Claude Code, Codex, Cursor +5 · ★ 32 — Remote MCP server holding a catalog of React components that move in unusual ways. - [churnkey](https://affpapa.org/en/nevibecode/mcp/churnkey.md) — MCP server · churnkey · Claude Code, Codex, Cursor +5 · ★ 23 — Wires an AI agent into Churnkey so it can read sessions, retention analytics and DSR requests with a Data API key. - [webcomponents-mcp-server](https://affpapa.org/en/nevibecode/mcp/webcomponents-mcp-server.md) — MCP server · UI5 · Claude Code, Codex, Cursor +5 · ★ 20 — An MCP server that feeds UI5 Web Components docs into your AI assistant. - [marmo-ui](https://affpapa.org/en/nevibecode/mcp/marmo-ui.md) — MCP server · mahmoudilyan · Claude Code, Codex, Cursor +5 · ★ 19 — Wires your agent to live Marmo UI component APIs so it builds dashboards from real props instead of guessing them. - [matchcn](https://affpapa.org/en/nevibecode/mcp/matchcn.md) — MCP server · francesco0242 · Claude Code, Codex, Cursor +5 · ★ 17 — Discovers shadcn UI components across external registries by behavior and layout description rather than exact package names. - [wasp](https://affpapa.org/en/nevibecode/plugins/wasp.md) — plugin · wasp-lang · Claude Code · ★ 14 — Gives Claude the Wasp framework docs and conventions, so the agent builds full-stack apps on React, Node.js and Prisma without guessing. - [Bestax](https://affpapa.org/en/nevibecode/mcp/bestax.md) — MCP server · allxsmith · Claude Code, Codex, Cursor +5 · ★ 13 — An MCP server that gives agents access to the bestax-bulma React component library: props, code examples, Bulma v1 CSS variables and ready-made prompts. ## 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