# 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 12 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=12 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [tab-navigation](https://affpapa.org/en/nevibecode/skills/tab-navigation.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 674 installs — A skill for designing tabs: when they fit, how the strip and panel are built, and how keyboard navigation should behave. - [coordinated-data-views](https://affpapa.org/en/nevibecode/skills/coordinated-data-views.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 668 installs — A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways. - [domain-expert-configuration](https://affpapa.org/en/nevibecode/skills/domain-expert-configuration.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 660 installs — Guides coding agents to build settings panels, solver controls, and constraint editors tailored for non-developer domain experts. - [ai-model-web](https://affpapa.org/en/nevibecode/skills/ai-model-web.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 913 installs — Directs frontend apps to run AI models via @cloudbase/js-sdk straight from the browser without setting up a Node.js proxy. - [nextjs-react-redux-typescript-cursor-rules](https://affpapa.org/en/nevibecode/skills/nextjs-react-redux-typescript-cursor-rules.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 842 installs — Development guidelines for Next.js, React, Redux Toolkit, and TypeScript. - [countdown-video](https://affpapa.org/en/nevibecode/skills/countdown-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1700 installs — A skill for building countdown videos: frame-accurate timers, digit roll transitions, mm:ss or dd:hh:mm:ss formatting. - [vite](https://affpapa.org/en/nevibecode/skills/mindrally-vite.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 820 installs — Supplies your coding agent with vetted Vite recipes for HMR, chunk splitting, framework plugins, and Vitest setups. - [neo4j-nvl-skill](https://affpapa.org/en/nevibecode/skills/neo4j-nvl-skill.md) — skill · neo4j-contrib · Claude Code, Codex, Cursor +3 · 716 installs — Renders Neo4j graphs in browsers with Canvas or WebGL2, covering React 19 wrappers and interaction handlers. - [state-management](https://affpapa.org/en/nevibecode/skills/state-management.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 783 installs — A skill that hands your agent ready patterns for TanStack Query v5 and Zustand v5: fetching, caching, mutations, optimistic updates and client stores. - [web-motion-design](https://affpapa.org/en/nevibecode/skills/web-motion-design.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that tells your agent how to build CSS animations, JS transitions and React or Vue motion using Disney's 12 animation principles. - [real-time-features](https://affpapa.org/en/nevibecode/skills/real-time-features.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 543 installs — Equips coding assistants with architectural patterns for WebSockets, Server-Sent Events, and long polling. - [instantdb](https://affpapa.org/en/nevibecode/skills/instantdb.md) — skill · instantdb · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that steers the agent through building apps on InstantDB: schema, permissions, queries, file storage. - [code-slop](https://affpapa.org/en/nevibecode/skills/code-slop.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 769 installs — Flags synthetic AI patterns in PHP/Laravel and TypeScript/React codebases. - [three-js](https://affpapa.org/en/nevibecode/skills/three-js.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 798 installs — Guides agent development for Three.js and React Three Fiber with TypeScript standards, render optimization, and resource disposal. - [distinctive-frontend](https://affpapa.org/en/nevibecode/skills/distinctive-frontend.md) — skill · podo · Claude Code, Codex, Cursor +3 · 588 installs — Generates web interfaces with bold visual identity, replacing generic AI palettes and fonts with distinct themes like Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism. - [agents-sdk](https://affpapa.org/en/nevibecode/skills/agents-sdk.md) — skill (official OpenAI) · Cloudflare · Codex, ChatGPT · 22 installs — Guides building AI agents on Cloudflare Workers with persistent state, durable workflows, and MCP support. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/tanstack-query-2.md) — skill · community · Claude Code, Codex, Cursor +3 · 457 installs — Delivers 41 performance rules for TanStack Query v5. - [tanstack-ranger](https://affpapa.org/en/nevibecode/skills/tanstack-ranger.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1300 installs — Headless utilities for accessible single and multi-range sliders. - [react-flow-advanced](https://affpapa.org/en/nevibecode/skills/react-flow-advanced.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 631 installs — Guides your coding agent through complex React Flow implementations, including nested sub-flows, dagre layouts, drag-and-drop, and undo/redo history. - [frontend-tailwind-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-tailwind-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 464 installs — Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. - [gsap](https://affpapa.org/en/nevibecode/skills/mindrally-gsap.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 769 installs — Tells your agent how to write GSAP animations: transforms over left/top, stagger, timelines, ScrollTrigger. - [styled-components-best-practices](https://affpapa.org/en/nevibecode/skills/styled-components-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 762 installs — Guides AI coding assistants on CSS-in-JS architecture in React: style isolation, file structure, TypeScript theme typing, and ThemeProvider setup. - [frontend-testing](https://affpapa.org/en/nevibecode/skills/frontend-testing.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 508 installs — Guides frontend testing setups with Jest, Vitest, React Testing Library, and Cypress. - [seo-best-practices](https://affpapa.org/en/nevibecode/skills/agent-skills-seo-best-practices.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 724 installs — This skill audits web app SEO and guides work on metadata, JSON-LD, sitemaps, Open Graph, and Core Web Vitals. - [electron-best-practices](https://affpapa.org/en/nevibecode/skills/electron-best-practices.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 820 installs — A skill that steers an AI agent through Electron apps with React: security defaults, typed IPC, packaging and signing. - [anime-js](https://affpapa.org/en/nevibecode/skills/anime-js.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 736 installs — A skill that gives your agent rules for writing Anime.js animations: timelines, stagger, SVG morphing and performance. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/mindrally-tanstack-query.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 724 installs — A skill that tells your agent how to handle server state in React with TanStack Query v5: query keys, queryOptions, mutations, v4 migration. - [solidity](https://affpapa.org/en/nevibecode/skills/solidity.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 721 installs — A skill for writing and reviewing Solidity contracts: reentrancy defenses, gas optimization, testing, and React frontend wiring. - [accessibility-compliance](https://affpapa.org/en/nevibecode/skills/aj-geddes-accessibility-compliance.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 482 installs — This skill guides accessibility work for WCAG 2.1/2.2, keyboard navigation, screen readers and a11y checks in web interfaces. - [web-performance-optimization](https://affpapa.org/en/nevibecode/skills/aj-geddes-web-performance-optimization.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 482 installs — A skill for speeding up web apps: code splitting, lazy loading, caching, compression and monitoring. - [animate](https://affpapa.org/en/nevibecode/skills/onewave-ai-animate.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 394 installs — Creates animated videos and motion graphics from natural language prompts. - [frontend-state-management](https://affpapa.org/en/nevibecode/skills/frontend-state-management.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 480 installs — A skill that guides your agent through frontend state management: Redux, MobX, Zustand or the Context API. - [vercel-development](https://affpapa.org/en/nevibecode/skills/vercel-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 712 installs — A rule set that steers your coding agent toward Next.js App Router, React Server Components and the Vercel AI SDK. - [react-router-v7](https://affpapa.org/en/nevibecode/skills/react-router-v7.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 572 installs — A skill that gives your agent React Router v7 practices: when to reach for a loader, a Form or a fetcher, and how nested routes fit together. - [data-viz-2025](https://affpapa.org/en/nevibecode/skills/data-viz-2025.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 304 installs — A skill for React, Next.js and TypeScript projects: helps build interactive charts, dashboards and data stories with Tailwind CSS. - [ionic-app-development](https://affpapa.org/en/nevibecode/skills/ionic-app-development.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 1200 installs — Guides coding agents through Ionic Framework development, covering 80+ UI components, CLI commands, and page lifecycle hooks for existing apps. - [ionic-expert](https://affpapa.org/en/nevibecode/skills/ionic-expert.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that hands your agent a working reference for Ionic Framework: components, CLI, theming, navigation and Angular, React, Vue patterns. - [vtex-io-react-apps](https://affpapa.org/en/nevibecode/skills/vtex-io-react-apps.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for VTEX IO frontend work: it guides React components under the react builder, theme block registration and Site Editor setup. - [stripe](https://affpapa.org/en/nevibecode/skills/stripe.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 704 installs — Integration rules for Stripe in TypeScript, React and Next.js: server-side payments, subscriptions, webhooks. - [monorepo](https://affpapa.org/en/nevibecode/skills/monorepo.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 694 installs — A skill that hands your agent a rulebook for monorepos built on TypeScript, React, Next.js and Expo with Turbo. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=13 ## 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