# react-nextjs-patterns

App Router conventions for React and Next.js projects. Guides component architecture, cache boundaries, and Server Actions security.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 15
- Author: duyet
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/duyet/codex-claude-plugins/tree/HEAD/team-agents/skills/react-nextjs-patterns/SKILL.md
- Updated: 2026-10-19
- HTML: https://affpapa.org/en/nevibecode/skills/react-nextjs-patterns

## What it does

The skill instructs the agent to inspect `package.json` releases first, because caching behaviors and routing rules differ across framework majors. Components stay on the server by default, pushing `"use client"` down to isolated leaf nodes rather than layouts.

Server Actions are treated like public API endpoints. Every mutation requires inline authentication, permission checks, and payload validation. Personal user records must stay clear of shared cache stores, while slow blocks stream via Suspense.

Banning manual memoization hooks like `useMemo` without profiling metrics — or when running React Compiler — will force you to rethink legacy optimization habits. Modules meant solely for backend execution must import `server-only` to prevent leaks across boundaries.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install duyet/codex-claude-plugins react-nextjs-patterns
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/duyet/codex-claude-plugins --path team-agents/skills/react-nextjs-patterns
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add duyet/codex-claude-plugins --skill react-nextjs-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/duyet/codex-claude-plugins/tree/HEAD/team-agents/skills/react-nextjs-patterns/SKILL.md

## When to use it
- audit Server Actions for missing authorization and validation
- move client boundaries down to minimal leaf components
- prevent personal user data from entering shared caches
- clean up redundant state-syncing effects and unmeasured memo hooks

## Example prompts
- Review this Server Action for input validation and auth checks
- Refactor this page to server components with Suspense streaming
- Audit our App Router components against unneeded memoization

## Similar
- [nextjs-app-router-patterns](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-patterns.md) — skill · 32529 installs
- [react-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — skill · 4900 installs
- [nextjs-migration-helper](https://affpapa.org/en/nevibecode/commands/nextjs-migration-helper.md) — command · 237 installs
- [nextjs-developer](https://affpapa.org/en/nevibecode/skills/nextjs-developer.md) — skill · 5800 installs
- [nextjs-cache-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-cache-architecture.md) — skill · 5000 installs
- [nextjs-app-router](https://affpapa.org/en/nevibecode/skills/nextjs-app-router.md) — skill · 3900 installs

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