3,031 mods tagged React that install into Codex, measured the same four ways as everything else here: what each costs in tokens on every session, what a security scan found and why, whether it is the original, and what changed.
Philotheephilix/reactbits.dev-skill
Skill Claude CodeCodex
Use when adding an animated UI component, text effect, cursor/hover effect, or WebGL/canvas background to a React project via React Bits (reactbits.dev) — or when asked to recall/write a React Bits component's code, props, or install steps from memory instead of fetching it.
MCP server Claude CodeCodexCursor +2
MCP server for daisyUI React components — search docs, props, and code examples from any AI coding assistant 🌼. Runs locally from the daisyui-mcp-server npm package.
Skill Codex
Audit and port complete React applications to Beast BTSX → TSRX → Octane while preserving behavior, route contracts, and styling. Use for migrations from Vite, Create React App, React Router, TanStack Router, Remix, or Next.js. Tailwind is the default target; pure CSS is optional. Do not use for routine Beast…
Skill Codex
Highest-priority for all Next.js-related tasks involving full-stack web development. Use this skill whenever writing, reviewing, refactoring, debugging, or planning Next.js code using App Router, Server Components, Client Components, API Routes, Server Actions, data fetching, caching, revalidation, routing…
thomascasali/claude-kb-workflow
Skill Claude CodeCodex
Crea presentazioni interattive per lezioni scolastiche ITIS usando React via CDN, dark theme, simulatori interattivi, e quiz. Due approcci consolidati: CDN-based (zero build, HTML puri) e Build-based (Vite+TS+Tailwind). Deploy su GitHub Pages. Progetto di riferimento: presentazione-vpn (Mar 2026).
MCP server Claude CodeCodexCursor +2
MCP server for HeroUI component documentation via Model Context Protocol. Runs locally from the @heroui/react-mcp npm package.
Skill Claude CodeCodex
R-Code can be available as a local MCP server named r-code. Use it only when the user asks you to delegate a focused investigation to R-Code's own Agent.
Skill Claude CodeCodex
Extend this cloned Helios example app — add new controls, scenes, knobs, image flows, or features on top of @reactor-models/helios (pinned to ^0.9.0) without breaking the patterns the existing code already uses. Covers the SDK's connection / events / messages model, the phase-based UI architecture, the state snapshot…
Skill Claude CodeCodex
Convert a selected shadcncraft Figma frame, component, or full page into production React + shadcn/ui code via the official Figma MCP. Use this whenever the user wants to turn a Figma design into code, implement a frame, "generate code from this design", "convert this Figma component", "build this screen from Figma"…
Skill Claude CodeCodex
Builds, fixes, styles, and composes UI with the Gravity UI design system — the React ecosystem of @gravity-ui/ packages (uikit, charts, table, navigation, date-components, icons, and more). Routes to the correct package when look-alikes exist, applies theming and required setup, and prevents invented component APIs.…
Skill Claude CodeCodex
Scaffolds necessary Next.js App Router file conventions and route-level SEO metadata (page.tsx, layout.tsx, error.tsx, not-found.tsx, loading.tsx, default.tsx, global-error.tsx, metadata, generateMetadata, canonical, robots, openGraph, twitter) for a given route path. Checks existing files, reads them for context, and…
Skill Codex
Consolidate shared UI, split multi-responsibility files or extract packages. Not for redesign (chiaroscuro), typography (typecase) or behaviour-preserving cleanup (unslop).
verygoodsecurity/collect-js-react
Skill Claude CodeCodex
Help VGS customers integrate, implement, migrate, troubleshoot, or review the public @vgs/collect-js-react wrapper. Use when users ask to add VGS Collect to React apps, create cards with Card Management Platform through VGSCollectSession, configure VGSCollectSession or VGSCollectForm, render secure React field…
vanessamarely/ai-playbook-reposito
Skill Claude CodeCodex
Audit React components for WCAG 2.2 compliance and suggest fixes. Use when the user wants an accessibility review of existing React component code (as opposed to running automated CI checks or building new components).
Skill Claude CodeCodex
Scaffold a new TodoMVC feature — component file, test file, and wiring — from a short description. Use when the user asks to "add feature X" and an existing file/component doesn't already own it.
Skill Claude CodeCodex
Initialize vowel.to voice agent in React applications (React 19+, Next.js, TanStack Router, React Router) with complete setup including adapters, providers, hooks, and custom actions. Use when setting up voice agent integration, configuring navigation adapters, implementing custom voice actions, or integrating state…
Skill Claude CodeCodex
How to implement internationalization (i18n) in React applications using react-i18next and i18next. Use this skill whenever the user wants to add multi-language support to a React app, translate UI content, set up i18next configuration, use the useTranslation hook, withTranslation HOC, Trans component, handle…
Skill Claude CodeCodex
React component design conventions focusing on Server/Client component boundaries, composition patterns, and data flow. Auto-triggers when writing or modifying React components to ensure correct RSC patterns and optimal component architecture.
Skill Claude CodeCodex
React Query v4 (TanStack Query) best practices, patterns, and troubleshooting. Use when working with useQuery, useMutation, query invalidation, caching, WebSocket integration, or any async state management in React. Based on TkDodo's comprehensive blog series.
jcarroll2007/Frontend-Agent-Skills
Skill Claude CodeCodex
How to architect frontend features in React + TypeScript apps. Use when planning or building a new frontend feature — deciding structure, component breakdown, data fetching, state, and file placement.
Skill Claude CodeCodex
Estrutura a arquitetura de um app React Native seguindo Clean Architecture — camadas, fluxo de dados unidirecional, módulos coesos e limites claros. Use ao criar módulos/features, definir estrutura de pastas ou organizar o fluxo dados→UI.
olakunlevpn/olakunlevpn-react-skills
Skill Claude CodeCodex
Use when writing, reviewing, or refactoring React or Next.js code — components, hooks, state management, testing, performance, TypeScript patterns, server components, or project structure. Always apply these standards to all React work.
hollaugo/prompt-circle-marketplace
Skill Codex
Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.
Skill Claude CodeCodex
Cursor rules for building custom frontends with Momen.app as headless BaaS with GraphQL API, actionflows, AI agents, and Stripe integration.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: