# 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. 649 cards · page 3 of 17 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=3 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [design-taste-frontend-v1](https://affpapa.org/en/nevibecode/skills/design-taste-frontend-v1.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — The original v1 frontend taste skill for clean React and Tailwind CSS output. - [react-expert](https://affpapa.org/en/nevibecode/skills/reactjs-react-expert.md) — skill · reactjs · Claude Code, Codex, Cursor +3 · 1300 installs — Researches React APIs and internals directly against tests, commits, and pull requests. - [extract-design](https://affpapa.org/en/nevibecode/skills/extract-design.md) — skill · Manavarya09 · Claude Code, Codex, Cursor +3 · 2900 installs — This skill analyzes a website URL and generates files describing its design system. - [remotion](https://affpapa.org/en/nevibecode/skills/calesthio-remotion.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1200 installs — Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. - [frontend-design](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-design.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 2600 installs — Teaches the agent to create memorable interfaces instead of generic layouts: picks an aesthetic direction, checks accessibility, writes clean code. - [design-guide](https://affpapa.org/en/nevibecode/skills/design-guide.md) — skill · paperclipai · Claude Code, Codex, Cursor +3 · 366 installs — This skill defines Paperclip rules for UI components, tokens, typography, and status systems. - [fullstack-dev](https://affpapa.org/en/nevibecode/skills/fullstack-dev.md) — skill · MiniMax-AI · Claude Code, Codex, Cursor +3 · 3400 installs — Guides full-stack backend architecture and frontend integration. - [lottie-bodymovin](https://affpapa.org/en/nevibecode/skills/lottie-bodymovin.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Applies Disney's 12 animation principles to Lottie vector animations. - [video-toolkit](https://affpapa.org/en/nevibecode/skills/video-toolkit.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. - [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion-best-practices.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1500 installs — This skill gives coding agents Remotion guidance for React projects, from animation and audio to compositions and video parameters. - [nextjs-developer](https://affpapa.org/en/nevibecode/skills/nextjs-developer.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · 5800 installs — Configures Next.js 14+ application architecture using App Router, React Server Components, and Server Actions. - [react-expert](https://affpapa.org/en/nevibecode/skills/react-expert.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · 5500 installs — A skill for React 18+, Next.js App Router, and create-react-app work. - [react-nextjs-development](https://affpapa.org/en/nevibecode/skills/react-nextjs-development.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 2000 installs — Walks a React or Next.js 14+ build through eight phases, from scaffolding to a Vercel deploy. - [react-pdf](https://affpapa.org/en/nevibecode/skills/react-pdf.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 2300 installs — Renders PDF documents from JSON specs using @react-pdf/renderer. - [zustand](https://affpapa.org/en/nevibecode/skills/zustand.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1900 installs — This skill integrates Zustand into json-render to sync application state. - [tamagui](https://affpapa.org/en/nevibecode/skills/tamagui.md) — skill · tamagui · Claude Code, Codex, Cursor +3 · 595 installs — Teaches coding agents Tamagui v3 flat style grammar and token conventions. - [frontend-dev-guidelines](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-dev-guidelines.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1500 installs — Sets strict React and TypeScript conventions for feature structure, Suspense data fetching, MUI styling, and performance-focused reviews. - [react19-test-patterns](https://affpapa.org/en/nevibecode/skills/react19-test-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 1200 installs — A migration reference for updating test files to work with React 19. - [remotion](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that turns JSON timeline specs into ready-made video compositions via Remotion. - [kumo-design](https://affpapa.org/en/nevibecode/skills/kumo-design.md) — skill · cloudflare · Claude Code, Codex, Cursor +3 · 1500 installs — Cloudflare product design rules for coding agents: guides layout, typography, dialogs, and animations in Kumo UI dashboards. - [react19-concurrent-patterns](https://affpapa.org/en/nevibecode/skills/react19-concurrent-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 1100 installs — Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions. - [frontend-developer](https://affpapa.org/en/nevibecode/skills/frontend-developer.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1300 installs — Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. - [radix-ui-design-system](https://affpapa.org/en/nevibecode/skills/radix-ui-design-system.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1300 installs — Builds accessible design systems and headless UI components with Radix UI primitives. - [write-example](https://affpapa.org/en/nevibecode/skills/write-example.md) — skill · tldraw · Claude Code, Codex, Cursor +3 · 445 installs — Guides coding agents through creating SDK examples for tldraw, enforcing folder naming, frontmatter fields, and React component conventions. - [zustand-5](https://affpapa.org/en/nevibecode/skills/zustand-5.md) — skill · prowler-cloud · Claude Code, Codex, Cursor +3 · 911 installs — Zustand 5 state management patterns for Claude Code: basic stores, selectors, persist middleware, and slice composition. - [react-email](https://affpapa.org/en/nevibecode/skills/vercel-labs-react-email.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1400 installs — Turns JSON email specs into HTML or plain-text output with React Email. - [image-to-ui](https://affpapa.org/en/nevibecode/skills/image-to-ui.md) — skill · UIZZE · Claude Code, Codex, Cursor +3 · 63500 installs — Turn a screenshot, mockup, or sketch into working interface code. - [react19-source-patterns](https://affpapa.org/en/nevibecode/skills/react19-source-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 967 installs — A reference for moving React source files to React 19, covering API changes, refs, context, and props. - [frontend-ui-dark-ts](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-ui-dark-ts.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1100 installs — Build dark-themed React interfaces with Tailwind CSS and Framer Motion. - [react-joyride](https://affpapa.org/en/nevibecode/skills/react-joyride.md) — skill · gilbarbara · Claude Code, Codex, Cursor +3 · 686 installs — Teaches the agent to create step-by-step tours and onboarding flows in React apps using React Joyride v3. - [feature-sliced-design](https://affpapa.org/en/nevibecode/skills/feature-sliced-design.md) — skill · feature-sliced · Claude Code, Codex, Cursor +3 · 23600 installs — This skill helps organize frontend code with Feature-Sliced Design and check import boundaries. - [react-audit-grep-patterns](https://affpapa.org/en/nevibecode/skills/react-audit-grep-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 854 installs — Verified grep pattern library for auditing React projects before upgrading to React 18.3.1 or 19. - [libraries-dev](https://affpapa.org/en/nevibecode/skills/libraries-dev.md) — skill · Jakubantalik · Claude Code, Codex, Cursor +3 · 1000 installs — Selects and integrates Libraries.dev React UI effects for AI interfaces, covering loaders, voice glows, animated borders, and bot avatars. - [create-mcp-app](https://affpapa.org/en/nevibecode/skills/create-mcp-app.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 2700 installs — Walks the agent through building an MCP App: an MCP tool paired with an HTML resource whose UI the host renders next to the tool result. - [xstate](https://affpapa.org/en/nevibecode/skills/xstate.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches AI assistants how to hook @xstate/store into json-render's state interface. - [jotai](https://affpapa.org/en/nevibecode/skills/jotai.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Turns a Jotai atom into json-render's state backend: install the packages, wrap the atom, share one store with your app. - [redux](https://affpapa.org/en/nevibecode/skills/redux.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — A Redux adapter for json-render: it points the renderer at a store slice instead of its own state. - [react18-dep-compatibility](https://affpapa.org/en/nevibecode/skills/react18-dep-compatibility.md) — skill (official GitHub) · github · GitHub Copilot · 764 installs — Checks minimum dependency versions for React 18.3.1 and React 19. - [react-19](https://affpapa.org/en/nevibecode/skills/react-19.md) — skill · prowler-cloud · Claude Code, Codex, Cursor +3 · 671 installs — Skill for React 19 with React Compiler: no manual memoization, server components first, ref as a prop. - [react18-batching-patterns](https://affpapa.org/en/nevibecode/skills/react18-batching-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 754 installs — Diagnoses and fixes React 18 automatic batching bugs in class components. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=4 ## 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