Skip to main content
affpapa.org
RU EN
skill CX Codex

react-development — Claude Code skill: React guidance from react.dev

A skill that feeds your coding agent React patterns: components, hooks, state and effects, taken from the official react.dev docs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill react-development -a claude-code
Open on GitHub

What react-development does

The skill gives the agent a reference for React work: functional components, JSX, props, useState, useEffect, updating objects and arrays in state, composing components. The examples come from react.dev, wired in through Context7. Ask for a form, a todo list or a data fetch and the agent works from those examples instead of guessing.

Install is one command with npx skills add. The file lands in the platform's skills folder: ~/.claude/skills/react-development/SKILL.md for Claude, .cursor/skills/react-development/SKILL.md for Cursor, .agents/skills/react-development/SKILL.md for Codex. GitHub Copilot uses gh skill install instead.

The coverage runs through hooks, state, context and performance, but the examples stop partway into data fetching with useEffect — for deeper topics the agent falls back on its own knowledge. This is React itself, not a framework on top of it. In a Next.js or Remix project expect it to cover the base layer only.

What it helps with

  • write a form with controlled inputs and a submit handler
  • convert a class component to hooks
  • render a list with keys and a delete action
  • pull repeated logic into a custom hook
  • fix an effect that fires on every render

Example prompts for the agent

  • Write a form component with name and email fields using useState
  • Convert this class component to hooks
  • Show me how to fetch user data in useEffect with error handling

How to install react-development

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill react-development -a claude-code

2Manually: put the files in place

~/.claude/skills/react-development/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-development/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about react-development

How do I install react-development in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill react-development -a claude-code. The skill file ends up at ~/.claude/skills/react-development/SKILL.md.

What does react-development do?

It hands the agent React examples and rules: components, JSX, props, the useState and useEffect hooks, state updates and performance work. The material follows the official react.dev documentation.

Which platforms does the skill support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each one has its own install command and its own folder for the skill file.

Similar skills

Everything for Frontend and UI →
react-component-architecture aj-geddes A skill that tells your coding agent how to structure React components: function components, hooks, composition and TypeScript. Useful once a shared component library starts growing. CX Codex +1 674installs react-patterns jezweb A skill that checks React 19 components for waterfalls, bundle bloat and re-renders, and suggests composition fixes. Useful while writing or reviewing code. CX Codex +1 1,300installs react-composition-2026 patterns.dev A skill that pushes your agent away from boolean props and rigid component APIs toward compound components, explicit variants and children. CX Codex +1 1,100installs tanstack-store tanstack-skills A skill covering TanStack Store: a framework-agnostic reactive store with adapters for React, Vue, Solid, Angular and Svelte. Useful when your agent writes state with @tanstack/store. CX Codex +1 1,800installs compound-pattern patterns.dev Teaches the agent the compound component pattern for shared implicit state. Useful for tabs, accordions and dropdowns whose parts must coordinate without explicit props. CX Codex +1 1,000installs react-component-generator OneWave-AI A skill that generates React components in TypeScript with props, hooks and accessibility. Useful when building new UI elements or refactoring old ones. CX Codex +1 318installs

From the same set31

react-patterns A skill that hands your agent ready React recipes: hooks, component composition, state management and fewer wasted re-renders. CX Codex +1 471installs SQLAlchemy ORM Expert A SQLAlchemy 2.0+ skill for customer support backends: ticket models, sessions, async queries and PostgreSQL. Useful when you build on FastAPI. CX Codex +1 470installs pandas A skill that brings pandas expertise to support operations: SLA compliance, agent metrics, PostgreSQL pulls. Useful when you need to dig through tickets and build a report. CX Codex +1 469installs database-management-patterns A reference skill for PostgreSQL and MongoDB work: schema design, indexing, transactions, replication and sharding. CX Codex +1 466installs tailwind-css A Tailwind CSS skill covering utility classes, responsive variants, dark mode and production optimization. Handy when you build UI and want to stay in your markup. CX Codex +1 461installs vector-database-management A skill for Pinecone, Weaviate and Chroma: indexes, embeddings, similarity search and RAG. Useful when you need semantic search in a project. CX Codex +1 459installs performance-benchmark-specialist Sets up benchmarks for shell tools: warmup runs, statistics, and target checks like <100ms and >90% cache hit rate. CX Codex +1 456installs PostgreSQL Database Administration A PostgreSQL administration skill: schema design, indexing, backups and query tuning. Useful when the agent writes SQL for a ticketing system or reporting. CX Codex +1 452installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor