react-nextjs-patterns — Claude Code skill: install and usage
App Router conventions for React and Next.js projects. Guides component architecture, cache boundaries, and Server Actions security.
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-codeWhat react-nextjs-patterns 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.
What it helps with
- 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 for the agent
- 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
How to install react-nextjs-patterns
1Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-code2Manually: put the files in place
~/.claude/skills/react-nextjs-patterns/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-nextjs-patterns/
1Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a codex2Manually: put the files in place
.agents/skills/react-nextjs-patterns/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a cursor2Manually: put the files in place
.cursor/skills/react-nextjs-patterns/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install duyet/codex-claude-plugins react-nextjs-patterns2Manually: put the files in place
.github/skills/react-nextjs-patterns/SKILL.md1Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a gemini-cli2Platform CLI
gemini skills install https://github.com/duyet/codex-claude-plugins --path team-agents/skills/react-nextjs-patternsManually: put the files in place
.devin/skills/react-nextjs-patterns/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-nextjs-patterns
How do I install react-nextjs-patterns in Claude Code?
Run npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-code in your terminal.
What does react-nextjs-patterns do?
It provides architecture rules for Next.js App Router, emphasizing server-first components, safe data fetching, and strict boundary checks.
What does the skill require before writing routing or caching code?
It requires inspecting the installed framework versions in package.json and consulting documentation, since default routing and caching settings shifted across major releases.
