nextjs-rules

---
name: nextjs-rules
description: "Shipwright rules and check commands for Next.js, React, TypeScript, Tailwind. Use when writing, reviewing or auditing code in a project that uses this stack. FR : règles et commandes de vérification pour Next.js, React, TypeScript, Tailwind."
---
<!-- Generated by tools/build.py from the referential YAML. Do not edit by hand. -->

# Next.js, React, TypeScript, Tailwind

These rules add to the core build skills of Shipwright.

## Rules

- Server components by default; 'use client' only where interactivity is needed.
- Validate Server Action and Route Handler inputs with Zod, and check the session in each one.
- Only NEXT_PUBLIC_ variables reach the client: no secret may use that prefix.
- Images with next/image, fonts with next/font, metadata through the Metadata API (title, description, OpenGraph).
- loading.tsx, error.tsx and not-found.tsx files for every route segment that loads data.
- Security headers and CSP in next.config or middleware.
- Tailwind: colours and spacing in the config or CSS variables; no arbitrary bracket values.

## Check commands

Used by `/sw:audit`. `{pm}` is the project's package manager, `{url}` the app URL, `{host}` its host name.

| Check | Command | Passes if |
| --- | --- | --- |
| typecheck | `{pm} exec tsc --noEmit && {pm} run build` | exit code 0 |
| lint | `{pm} run lint` | exit code 0, no errors |
| test_run | `{pm} test` | exit code 0, no skipped test without a written reason |
| e2e | `{pm} exec playwright test` | exit code 0 |
| e2e_cross_browser | `{pm} exec playwright test --project=chromium --project=firefox --project=webkit` | exit code 0 on all three |
| deps_audit | `{pm} audit --audit-level=high` | no high or critical advisory |
| license_check | `npx --yes license-checker-rseidelsohn --summary --failOn 'GPL;AGPL'` | exit code 0 |
| bundle_size | `{pm} run build` | First Load JS of main routes under 200 kB (read the build output table) |
| lighthouse | `npx --yes @lhci/cli autorun --collect.url={url}` | LCP < 2.5 s, CLS < 0.1, TBT < 200 ms on mobile |
| design_token_scan | `grep -rnE '#[0-9a-fA-F]{3,8}\b\|\[[0-9]+px\]\|(bg\|text\|border)-\[#' app components src --include=*.tsx --include=*.ts --include=*.css` | no match outside the token files (tailwind config, globals.css) |
| load_test | `npx --yes autocannon -c 50 -d 30 {url}` | 0 errors, p97.5 latency under 1 s |