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

react-patterns · manutej — Claude Code skill: React patterns guide

A skill that hands your agent ready React recipes: hooks, component composition, state management and fewer wasted re-renders.

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

What react-patterns does

The skill covers modern React: functional components, built-in hooks, composition and state strategies. It walks through useState, useReducer and useContext with code samples and rules like functional updates and lazy initialization. There is a section on server and client components, forms, side effects and async work.

Performance gets its own part: memoization and tracking down unnecessary re-renders. Reach for it when you are converting class components to functional ones or pulling shared logic into custom hooks. It advises keeping state as local as possible and not storing derived values in it — worth checking your own components against that.

Install runs through npx skills add with an agent flag, and the skill file lands in that platform's skills directory.

What it helps with

  • model complex state transitions with useReducer
  • extract shared logic into a custom hook
  • cut unnecessary re-renders with memoization
  • convert a class component to hooks
  • split server and client components

Example prompts for the agent

  • rewrite this class component using hooks
  • help me move this form state into useReducer
  • why does this component re-render so often

How to install react-patterns

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about react-patterns

How do I install react-patterns in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a claude-code. The skill is placed at ~/.claude/skills/react-patterns/SKILL.md.

What does react-patterns do?

It gives your agent recipes for hooks, component composition, state management and performance work in React apps.

Which platforms does the skill support?

Besides Claude it installs into Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own install command.

Similar skills

Everything for Frontend and UI →

react-patterns by other authors comes first.

react-patterns affaan-m A skill for Claude and other AI editors that steers the agent toward idiomatic React 18/19: hooks discipline, server/client boundaries, forms, data fetching. CX Codex +1 4,900installs react-patterns giuseppe-trisciuoglio Teaches your agent React 19 and Next.js App Router patterns: Server Components, Server Actions, useOptimistic, Suspense boundaries. Useful when the app is already on React 19. CX Codex +1 4,800installs 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 typescript-react-patterns agent-skills A skill with 33 TypeScript rules for React: props, hooks, events, refs, generics and context. Useful when the agent writes components and fights type errors. CX Codex +1 1,100installs react-server-components patterns.dev A skill that teaches React Server Components: which components belong on the server and where 'use client' goes. Useful in Next.js App Router. CX Codex +1 954installs react-useeffect davila7 A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary. 127installs react-nextjs-patterns duyet App Router conventions for React and Next.js projects. Guides component architecture, cache boundaries, and Server Actions security. CX Codex +1 1,100installs zustand-patterns OrchestKit A reference for Zustand 5.x state management: slices, middleware, Immer, useShallow, persistence and devtools. Useful when you want to drop Redux without the boilerplate. CX Codex +1 1,400installs 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

From the same set31

rest-api-design-patterns A reference skill for designing REST APIs: resource modeling, versioning, pagination, HATEOAS and HTTP method semantics. CX Codex +1 525installs asyncio-concurrency-patterns A skill on Python concurrency: event loops, coroutines, tasks, semaphores and locks. Useful when you are writing an async service or client. CX Codex +1 489installs rust-systems-programming A skill on systems Rust: ownership, borrowing, threads, async, unsafe and performance. Useful when you write low-level code or port C/C++. CX Codex +1 485installs api-gateway-patterns A skill for building API gateways on Kong: routing, rate limiting, auth, load balancing. Useful when your microservices exist but lack a single entry point. CX Codex +1 481installs 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 react-development A skill that feeds your coding agent React patterns: components, hooks, state and effects, taken from the official react.dev docs. CX Codex +1 464installs

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