AGENTS.md

1<!-- BEGIN:nextjs-agent-rules -->
2 
3# This is NOT the Next.js you know
4 
5This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
6 
7This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
8 
9<!-- END:nextjs-agent-rules -->
10 
11# Website Reverse-Engineer Template
12 
13## What This Is
14A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — just run `/clone-website <url1> [<url2> ...]`.
15 
16## Tech Stack
17- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
18- **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
19- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
20- **Styling:** Tailwind CSS v4 with oklch design tokens
21- **Deployment:** Vercel
22 
23## Commands
24- `npm run dev` — Start dev server
25- `npm run build` — Production build
26- `npm run lint` — ESLint check
27- `npm run typecheck` — TypeScript check
28- `npm run check` — Run lint + typecheck + build
29 
30## Code Style
31- TypeScript strict mode, no `any`
32- Named exports, PascalCase components, camelCase utils
33- Tailwind utility classes, no inline styles
34- 2-space indentation
35- Responsive: mobile-first
36 
37## Design Principles
38- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
39- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
40- **Real content** — use actual text and assets from the target site, not placeholders
41- **Beauty-first** — every pixel matters
42 
43## Project Structure
44```
45src/
46  app/              # Next.js routes
47  components/       # React components
48    ui/             # shadcn/ui primitives
49    icons.tsx       # Extracted SVG icons as React components
50  lib/
51    utils.ts        # cn() utility (shadcn)
52  types/            # TypeScript interfaces
53  hooks/            # Custom React hooks
54public/
55  images/           # Downloaded images from target site
56  videos/           # Downloaded videos from target site
57  seo/              # Favicons, OG images, webmanifest
58docs/
59  research/         # Inspection output (design tokens, components, layout)
60  design-references/ # Screenshots and visual references
61scripts/            # Asset download scripts
62```
63 
64## MOST IMPORTANT NOTES
65- When launching Claude Code agent teams, ALWAYS have each teammate work in their own worktree branch and merge everyone's work at the end, resolving any merge conflicts smartly since you are basically serving the orchestrator role and have full context to our goals, work given, work achieved, and desired outcomes.
66- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
67- After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
68 
69@docs/research/INSPECTION_GUIDE.md
70