# react-patterns

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 471 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/react-patterns/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/manutej-react-patterns

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/react-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/react-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/react-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace react-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/react-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/react-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/react-patterns/SKILL.md

## When to use it
- 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
- rewrite this class component using hooks
- help me move this form state into `useReducer`
- why does this component re-render so often

## Similar
- [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · 1100 installs
- [react-server-components](https://affpapa.org/en/nevibecode/skills/react-server-components.md) — skill · 954 installs
- [react-useeffect](https://affpapa.org/en/nevibecode/skills/react-useeffect.md) — skill · 127 installs
- [react-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/react-nextjs-patterns.md) — skill · 1100 installs
- [zustand-patterns](https://affpapa.org/en/nevibecode/skills/zustand-patterns.md) — skill · 1400 installs
- [tanstack-store](https://affpapa.org/en/nevibecode/skills/tanstack-store.md) — skill · 1800 installs

## Other versions with the same name
- [react-patterns · affaan-m](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — 4900 installs
- [react-patterns · giuseppe-trisciuoglio](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-react-patterns.md) — 4800 installs
- [react-patterns · jezweb](https://affpapa.org/en/nevibecode/skills/jezweb-react-patterns.md) — 1300 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 cards

---
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