agentleFS
Sign inStart free
maroffomaroffo/claude-forge/skills/react-nextjs/SKILL.md

react-nextjs

Skill17 starsChanged 50 days agoMITView on GitHub

React + Next.js App Router development. Use when working with .tsx/.jsx files, next.config, or user asks about Server Components, data fetching, state management, forms, or React testing.

1 other project uses a version of this.

Adopted by

Most recently taken up by

The file

Create a free account to mount
Files
SKILL.md

ABOUTME: React + Next.js App Router development with Server Components, TypeScript

ABOUTME: Patterns for data fetching, state management, forms, testing, and styling

React + Next.js

Quick Reference

npm run dev && npm run build && npm run test && npm run typecheck

See also: _AST_GREP.md, _PATTERNS.md, source-control

Version (determine, don't assume)

See ../_LANG_COMMON.md. Fetch the truth:

jq -r '.dependencies.react, .dependencies.next' package.json 2>/dev/null   # project React + Next
cat .nvmrc 2>/dev/null                                                     # project Node
node -v                                                                    # local Node
npm view react version && npm view next version                            # latest upstream

Pre-Commit Verification (MANDATORY)

make check && make test-e2e must pass (enforced by the pre-commit-gate hook; see ../_LANG_COMMON.md). What make check expands to for a Next.js app:

npm run lint         # ESLint
npm run typecheck    # tsc --noEmit
npm run test         # Vitest unit tests
npm run build        # Next.js production build
npm audit --omit=dev # Dependency CVEs

Project Structure

src/
├── app/                    # App Router
├── components/ui/          # Primitives
├── features/*/             # Feature modules
├── lib/                    # Utils
├── stores/                 # Zustand
└── types/

Organize by feature, not technical layer.

Server vs Client Components

Default to Server. Client only when needed.

ServerClient
Fetch data, DB accessonClick, onChange
Sensitive datauseState, useEffect
Large deps, SEOBrowser APIs

Key Patterns

State: TanStack Query (server state), Zustand (global client), nuqs (URL state).

Forms: Server Action + useActionState + Zod validation. useFormStatus for pending UI.

Performance: next/image with priority, dynamic() for lazy loading, React Compiler for auto-memoization.

Testing: Vitest + React Testing Library (unit), Playwright (E2E).

For detailed code examples (forms, Zustand, testing, performance), see references/react-patterns.md.

Checklist

  • No any, no unnecessary 'use client'
  • Server/Client correctly separated
  • Forms: useActionState + useFormStatus
  • useOptimistic for mutations
  • Images: next/image + priority

Libraries: TanStack Query, Zustand, nuqs, Zod, Vitest + Playwright

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free