# 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 7 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=7 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [sentry-react-sdk](https://affpapa.org/en/nevibecode/skills/sentry-react-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 3100 installs — Walks a React project through full Sentry setup: it scans your dependencies, proposes a feature set, and writes the config. - [nextjs-data-fetching](https://affpapa.org/en/nevibecode/skills/nextjs-data-fetching.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3700 installs — Provides Next.js App Router data fetching patterns, covering Server Components, ISR caching strategies, and SWR or React Query client integration. - [mantine-custom-components](https://affpapa.org/en/nevibecode/skills/mantine-custom-components.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 3600 installs — Teaches AI agents to build custom components for Mantine 9.x and React 19. - [vite-flare-starter](https://affpapa.org/en/nevibecode/skills/vite-flare-starter.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1200 installs — Clones the vite-flare-starter template and configures it into your own Cloudflare Workers app, with React, Hono, D1 and Drizzle, auth and Workers AI already in place. - [mantine-combobox](https://affpapa.org/en/nevibecode/skills/mantine-combobox.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 3500 installs — Teaches the agent to build dropdowns, autocompletes and multiselects on Mantine's Combobox primitives. - [typegpu](https://affpapa.org/en/nevibecode/skills/typegpu.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 1600 installs — A skill that helps the agent write TypeGPU code: shaders, buffers, pipelines and the @typegpu/react hooks, with the type plumbing handled. - [mobile-responsiveness](https://affpapa.org/en/nevibecode/skills/mobile-responsiveness.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 1400 installs — Provides mobile-first responsive design patterns, touch gesture handlers, fluid typography rules, and safe area handling for web apps. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/tanstack-query.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 9900 installs — A skill that tells your agent how to use TanStack Query v5: caching, invalidation, mutations and optimistic updates. - [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2600 installs — A skill for building MP4, GIF and WebM videos in React, where every frame is a pure function of useCurrentFrame, so renders stay deterministic. - [threejs-r3f](https://affpapa.org/en/nevibecode/skills/threejs-r3f.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1000 installs — A skill covering Three.js and React Three Fiber: scene setup, hooks, postprocessing and performance rules. - [gsap](https://affpapa.org/en/nevibecode/skills/athevon-gsap.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 997 installs — This skill helps an agent write GSAP animations with timelines, staggered effects, and ScrollTrigger. - [r3f-interaction](https://affpapa.org/en/nevibecode/skills/r3f-interaction.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 3300 installs — Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. - [framer-motion](https://affpapa.org/en/nevibecode/skills/athevon-framer-motion.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 990 installs — Guides coding agents on Framer Motion and Motion patterns in React: layout transitions, gestures, and DOM-direct motion values. - [responsive-patterns](https://affpapa.org/en/nevibecode/skills/responsive-patterns.md) — skill · OrchestKit · Claude Code, Codex, Cursor +3 · 1600 installs — Supplies container query guidelines, fluid typography rules, and CSS subgrid patterns for React components. - [craft-design-engineering](https://affpapa.org/en/nevibecode/skills/craft-design-engineering.md) — skill · gustavo-fior · Claude Code, Codex, Cursor +3 · 479 installs — A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. - [web-frameworks](https://affpapa.org/en/nevibecode/skills/web-frameworks.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 372 installs — A skill group for full-stack work: it gives the agent references for Next.js, Turborepo monorepos and RemixIcon so it stops guessing at project structure. - [nextjs-react-typescript](https://affpapa.org/en/nevibecode/skills/nextjs-react-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 5200 installs — A skill that sets code style for Next.js App Router, React, TypeScript, Shadcn UI and Tailwind. - [yyl-remotion-video](https://affpapa.org/en/nevibecode/skills/yyl-remotion-video.md) — skill · ttfake92-lab · Claude Code, Codex, Cursor +3 · 503 installs — Turns an article, script or notes into a Remotion project and renders mp4. - [playwright-core](https://affpapa.org/en/nevibecode/skills/playwright-core.md) — skill · testdino-hq · Claude Code, Codex, Cursor +3 · 778 installs — Provides battle-tested Playwright patterns for E2E, API, and component tests in TypeScript and JavaScript. - [zustand-patterns](https://affpapa.org/en/nevibecode/skills/zustand-patterns.md) — skill · OrchestKit · Claude Code, Codex, Cursor +3 · 1400 installs — A reference for Zustand 5.x state management: slices, middleware, Immer, useShallow, persistence and devtools. - [react-pdf](https://affpapa.org/en/nevibecode/skills/molefrog-react-pdf.md) — skill · molefrog · Claude Code, Codex, Cursor +3 · 751 installs — Builds PDF documents using the @react-pdf/renderer library. - [mantine-form](https://affpapa.org/en/nevibecode/skills/mantine-form.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for building forms with @mantine/form: validation rules, zod and valibot schemas, nested fields and arrays. - [motion-dev-animations](https://affpapa.org/en/nevibecode/skills/motion-dev-animations.md) — skill · Motion Dev Standards · Claude Code, Codex, Cursor +3 · 594 installs — Generates GPU-accelerated Motion.dev animations for React, Next.js, Svelte, and Astro. - [react-hook-form](https://affpapa.org/en/nevibecode/skills/react-hook-form.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 3000 installs — Optimizes client-side forms using React Hook Form 7.82.0 and prevents unnecessary re-renders across field subscriptions, validation, and controlled UI inputs. - [sentry-tanstack-start-sdk](https://affpapa.org/en/nevibecode/skills/sentry-tanstack-start-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 1900 installs — Configures Sentry SDK in TanStack Start React applications. - [nextjs-app-router-fundamentals](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-fundamentals.md) — skill · wsimmonds · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that walks the agent through Next.js App Router: Pages Router migration, nested layouts, metadata, dynamic routes. - [r3f-fundamentals](https://affpapa.org/en/nevibecode/skills/r3f-fundamentals.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 2100 installs — Skill that teaches the agent to build React Three Fiber scenes: Canvas, typed JSX, render-loop hooks, and resource ownership. - [posthog-analytics](https://affpapa.org/en/nevibecode/skills/posthog-analytics.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 809 installs — A skill for wiring PostHog product analytics into your project: event tracking, user identification, feature flags and dashboards. - [sentry-react-router-framework-sdk](https://affpapa.org/en/nevibecode/skills/sentry-react-router-framework-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 1800 installs — Guides the setup of error monitoring and tracing in React Router v7 framework apps. - [emilkowal-animations](https://affpapa.org/en/nevibecode/skills/emilkowal-animations.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 2800 installs — A set of 58 web animation rules based on Emil Kowalski's work for React and Framer Motion. - [frontend-enhancer](https://affpapa.org/en/nevibecode/skills/frontend-enhancer.md) — skill · ailabs-393 · Claude Code, Codex, Cursor +3 · 968 installs — A Next.js skill with ready React components, six color palettes, CSS animations and section templates. - [frontend-testing-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-testing-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 2200 installs — A set of 6 testing guidelines that prioritizes Playwright E2E workflows over isolated React component tests and heavy mocking. - [r3f-postprocessing](https://affpapa.org/en/nevibecode/skills/r3f-postprocessing.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that walks the agent through postprocessing in React Three Fiber: glow on chosen meshes, depth of field, SSAO. - [foundry-hosted-agent-copilotkit](https://affpapa.org/en/nevibecode/skills/foundry-hosted-agent-copilotkit.md) — skill (official GitHub) · github · GitHub Copilot · 29 installs — Connects a CopilotKit React frontend to a Microsoft Agent Framework agent in Microsoft Foundry via the AG-UI protocol. - [frontend-design](https://affpapa.org/en/nevibecode/skills/cline-frontend-design.md) — skill · cline · Claude Code, Codex, Cursor +3 · 7300 installs — The skill makes the agent pick a bold visual direction before writing code, then hold it through every detail. - [assistant-ui](https://affpapa.org/en/nevibecode/skills/assistant-ui.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 7200 installs — Guides AI chat interface development in React: package selection, runtime adapters, and state architecture for assistant-ui. - [no-use-effect](https://affpapa.org/en/nevibecode/skills/no-use-effect.md) — skill · Factory-AI · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that stops the agent from writing useEffect in React code and points to five replacements. - [react-2026](https://affpapa.org/en/nevibecode/skills/react-2026.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1900 installs — Guides stack choices for new and migrating React projects. - [ai-ui-patterns](https://affpapa.org/en/nevibecode/skills/ai-ui-patterns.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that tells your agent how to build React chat interfaces: streaming responses, conversation state, error handling. - [r3f-loaders](https://affpapa.org/en/nevibecode/skills/r3f-loaders.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 1800 installs — Guides 3D asset loading and reuse in React Three Fiber. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=8 ## 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