# 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 11 of 18 - HTML: https://affpapa.org/en/nevibecode/tag/react?page=11 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [webflow-code-component:pre-deploy-check](https://affpapa.org/en/nevibecode/skills/webflow-code-componentpre-deploy-check.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 988 installs — Validates Webflow Code Components before you publish: bundle size, dependencies, props, SSR and styling. - [webflow-code-component:deploy-guide](https://affpapa.org/en/nevibecode/skills/webflow-code-componentdeploy-guide.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 987 installs — A skill that walks you through publishing a code component library to a Webflow workspace, from pre-flight checks to verifying components in Designer. - [webflow-code-component:troubleshoot-deploy](https://affpapa.org/en/nevibecode/skills/webflow-code-componenttroubleshoot-deploy.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 977 installs — Walks through failed Webflow Code Components deploys: reads the error, finds the root cause, hands you a specific fix. - [motion](https://affpapa.org/en/nevibecode/skills/motion.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that feeds your agent the Motion (Framer Motion) docs for React: drag-and-drop, scroll effects, layout transitions. - [modern-web-development](https://affpapa.org/en/nevibecode/skills/modern-web-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — A rule set for the modern web stack: TypeScript, Next.js 14, React Server Components, Supabase, GraphQL and Tailwind CSS. - [appbuilder-testing](https://affpapa.org/en/nevibecode/skills/appbuilder-testing.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 714 installs — This skill writes and runs Jest tests for Adobe App Builder actions and React components, with mocks for the Adobe SDKs. - [mastering-typescript](https://affpapa.org/en/nevibecode/skills/mastering-typescript.md) — skill · Richard Hightower · Claude Code, Codex, Cursor +3 · 790 installs — Guides enterprise TypeScript 5.9+ development with strict typing, modern toolchains, and framework setups. - [vite-bundle-optimization](https://affpapa.org/en/nevibecode/skills/vite-bundle-optimization.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 667 installs — A skill with bundle and build optimization patterns for Vite + React. - [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 1100 installs — A skill with 33 TypeScript rules for React: props, hooks, events, refs, generics and context. - [21st-registry](https://affpapa.org/en/nevibecode/skills/21st-registry.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1800 installs — Publishes React components, CSS themes and templates to 21st.dev, and manages what you already published through the 21st CLI. - [observer-pattern](https://affpapa.org/en/nevibecode/skills/observer-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 638 installs — A skill that teaches your agent the observer pattern for decoupled publish/subscribe in JavaScript and TypeScript. - [databricks-app-design](https://affpapa.org/en/nevibecode/skills/databricks-app-design.md) — skill · databricks · Claude Code, Codex, Cursor +3 · 315 installs — Design data screens for custom Databricks Apps built with AppKit/React. - [lottie](https://affpapa.org/en/nevibecode/skills/lottie.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that steers your coding agent through Lottie work: dotLottie files, lazy loading, renderer choice and reduced-motion fallbacks. - [provider-pattern](https://affpapa.org/en/nevibecode/skills/provider-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 620 installs — Teaches your agent to move shared data into React Context and hand it out through a Provider when props crawl through every layer. - [tanstack-store](https://affpapa.org/en/nevibecode/skills/tanstack-store.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1800 installs — A skill covering TanStack Store: a framework-agnostic reactive store with adapters for React, Vue, Solid, Angular and Svelte. - [figma-design-to-code](https://affpapa.org/en/nevibecode/skills/figma-design-to-code.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 30 installs — Guides an agent through implementing a Figma node in a project’s existing stack. - [typescript-refactor](https://affpapa.org/en/nevibecode/skills/typescript-refactor.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 788 installs — A skill with 47 rules for refactoring TypeScript and React/TSX: type architecture, narrowing, generics, and modern TS 6.0 / React 19 features. - [framer-motion](https://affpapa.org/en/nevibecode/skills/dylantarre-framer-motion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1700 installs — This skill guides the agent in implementing Disney's 12 animation principles with Framer Motion in React. - [react-refactor](https://affpapa.org/en/nevibecode/skills/react-refactor.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 776 installs — Architectural refactoring skill with 40 rules for React codebases. - [ionic-design](https://affpapa.org/en/nevibecode/skills/ionic-design.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1600 installs — Builds and reviews Ionic Framework UI components for Capacitor apps. - [laravel-owasp-security](https://affpapa.org/en/nevibecode/skills/laravel-owasp-security.md) — skill · AsyrafHussin · Claude Code, Codex, Cursor +3 · 990 installs — Audits Laravel 13 and React/Inertia.js codebases against the OWASP Top 10 checklist and assists with secure implementation of auth, payments, or APIs. - [frontend-designer](https://affpapa.org/en/nevibecode/skills/frontend-designer.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 335 installs — A skill that guides your agent through accessible, responsive component work: design tokens, modern CSS, patterns for React, Vue and Svelte. - [workos-widgets](https://affpapa.org/en/nevibecode/skills/workos-widgets.md) — skill · workos · Claude Code, Codex, Cursor +3 · 857 installs — Walks your agent through embedding WorkOS widgets — user management, profile, SSO connection and domain verification — and wiring token issuance on the backend. - [react-component-architecture](https://affpapa.org/en/nevibecode/skills/react-component-architecture.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 674 installs — A skill that tells your coding agent how to structure React components: function components, hooks, composition and TypeScript. - [optimized-nextjs-typescript](https://affpapa.org/en/nevibecode/skills/optimized-nextjs-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1000 installs — Sets opinionated Next.js and TypeScript standards focusing on React Server Components, Zod schemas, and Tailwind CSS styling. - [remotion-video-toolkit](https://affpapa.org/en/nevibecode/skills/remotion-video-toolkit.md) — skill · shreefentsar · Claude Code, Codex, Cursor +3 · 779 installs — A skill that teaches your AI agent to write Remotion code: animations, timing, MP4 rendering, captions, charts and 3D. - [shadcn](https://affpapa.org/en/nevibecode/skills/pproenca-shadcn.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 724 installs — A skill with 58 shadcn/ui rules that tells your agent how to add components, build forms and keep accessibility intact. - [internationalization-i18n](https://affpapa.org/en/nevibecode/skills/internationalization-i18n.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 978 installs — This skill gives the agent a rulebook for internationalization: translations, locale-aware dates and numbers, RTL layout. - [tanstack-ai](https://affpapa.org/en/nevibecode/skills/tanstack-ai.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 installs — Guides agents on TanStack AI patterns for text streaming, tool calling, and typed output in React or Solid. - [tanstack-db](https://affpapa.org/en/nevibecode/skills/tanstack-db.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 installs — This skill guides agents through TanStack DB collections, live queries, and optimistic mutations for client-side application data. - [zustand-state-management](https://affpapa.org/en/nevibecode/skills/zustand-state-management.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 959 installs — Enforces Zustand store best practices in React and TypeScript apps, covering store slices, SSR, and testing. - [react](https://affpapa.org/en/nevibecode/skills/mindrally-react.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 944 installs — This skill gives your agent a fixed React style: hooks, Server Components, Tailwind, TypeScript. - [react-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/react-nextjs-patterns.md) — skill · duyet · Claude Code, Codex, Cursor +3 · 1100 installs — App Router conventions for React and Next.js projects. - [deno-frontend](https://affpapa.org/en/nevibecode/skills/deno-frontend.md) — skill · denoland · Claude Code, Codex, Cursor +3 · 408 installs — Guides frontend development on Deno. - [catalyst-slate](https://affpapa.org/en/nevibecode/skills/catalyst-slate.md) — skill · catalystbyzoho · Claude Code, Codex, Cursor +3 · 1000 installs — Walks your agent through deploying a frontend to Catalyst Slate: scaffold the app, configure slate-config.toml, ship the build. - [storybook](https://affpapa.org/en/nevibecode/skills/storybook.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 909 installs — Enforces Storybook best practices for component libraries, covering file structure, autodocs, controls, and interaction tests. - [agency-agents-ai-specialists](https://affpapa.org/en/nevibecode/skills/agency-agents-ai-specialists.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 2100 installs — Swap in a specialist persona — frontend, backend, reviewer, UX — and let it carry the task with its own workflow. - [design-systems](https://affpapa.org/en/nevibecode/skills/design-systems.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 903 installs — Walks your agent through design tokens, a component library and accessibility rules in one project. - [operational-expert-tool-ui](https://affpapa.org/en/nevibecode/skills/operational-expert-tool-ui.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 689 installs — Sets interface rules for dispatch, warehouse and logistics tools: data density over breathing room, status visible at a glance. - [swr](https://affpapa.org/en/nevibecode/skills/mindrally-swr.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 870 installs — SWR data-fetching guidelines for React and TypeScript apps. Next: https://affpapa.org/en/nevibecode/tag/react.md?page=12 ## 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