Cline rules

1<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
2     Run `bash scripts/sync-agent-rules.sh` to regenerate. -->
3 
4<!-- BEGIN:nextjs-agent-rules -->
5# This is NOT the Next.js you know
6 
7This 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/` before writing any code. Heed deprecation notices.
8<!-- END:nextjs-agent-rules -->
9 
10# Website Reverse-Engineer Template
11 
12## What This Is
13A 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> ...]`.
14 
15## Tech Stack
16- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
17- **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
18- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
19- **Styling:** Tailwind CSS v4 with oklch design tokens
20- **Deployment:** Vercel
21 
22## Commands
23- `npm run dev` — Start dev server
24- `npm run build` — Production build
25- `npm run lint` — ESLint check
26- `npm run typecheck` — TypeScript check
27- `npm run check` — Run lint + typecheck + build
28 
29## Code Style
30- TypeScript strict mode, no `any`
31- Named exports, PascalCase components, camelCase utils
32- Tailwind utility classes, no inline styles
33- 2-space indentation
34- Responsive: mobile-first
35 
36## Design Principles
37- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
38- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
39- **Real content** — use actual text and assets from the target site, not placeholders
40- **Beauty-first** — every pixel matters
41 
42## Project Structure
43```
44src/
45  app/              # Next.js routes
46  components/       # React components
47    ui/             # shadcn/ui primitives
48    icons.tsx       # Extracted SVG icons as React components
49  lib/
50    utils.ts        # cn() utility (shadcn)
51  types/            # TypeScript interfaces
52  hooks/            # Custom React hooks
53public/
54  images/           # Downloaded images from target site
55  videos/           # Downloaded videos from target site
56  seo/              # Favicons, OG images, webmanifest
57docs/
58  research/         # Inspection output (design tokens, components, layout)
59  design-references/ # Screenshots and visual references
60scripts/            # Asset download scripts
61```
62 
63## MOST IMPORTANT NOTES
64- 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.
65- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
66- After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
67 
68# Website Inspection Guide
69 
70## How to Reverse-Engineer Any Website
71 
72This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
73 
74## Phase 1: Visual Audit
75 
76### Screenshots to Capture
77- [ ] Every distinct page — desktop, tablet, mobile
78- [ ] Dark mode variants (if applicable)
79- [ ] Light mode variants (if applicable)
80- [ ] Key interaction states (hover, active, open menus, modals)
81- [ ] Loading/skeleton states
82- [ ] Empty states
83- [ ] Error states
84 
85### Design Tokens to Extract
86- [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
87- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
88- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
89- [ ] **Border radius** — buttons, cards, avatars, inputs
90- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
91- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
92- [ ] **Icons** — which icon library? custom SVGs? sizes?
93- [ ] **Avatars** — sizes, shapes, fallback behavior
94- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
95- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
96 
97## Phase 2: Component Inventory
98 
99For each distinct UI component, document:
1001. **Name** — what would you call this component?
1012. **Structure** — what HTML elements / child components does it contain?
1023. **Variants** — does it have different sizes, colors, or states?
1034. **States** — default, hover, active, disabled, loading, error, empty
1045. **Responsive behavior** — how does it change at different breakpoints?
1056. **Interactions** — click, hover, focus, keyboard navigation
1067. **Animations** — transitions, entrance/exit animations, micro-interactions
107 
108### Common Components to Look For
109- Navigation (top bar, sidebar, bottom bar)
110- Cards / list items
111- Buttons and links
112- Forms and inputs
113- Modals and dialogs
114- Dropdowns and menus
115- Tabs and segmented controls
116- Avatars and user badges
117- Loading skeletons
118- Toast notifications
119- Tooltips and popovers
120 
121## Phase 3: Layout Architecture
122 
123- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
124- [ ] **Column layout** — how many columns at each breakpoint?
125- [ ] **Max-width** — main content area max-width
126- [ ] **Sticky elements** — header, sidebar, floating buttons
127- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
128- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
129 
130## Phase 4: Technical Stack Analysis
131 
132- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
133- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
134- [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
135- [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
136- [ ] **Font loading** — Google Fonts, self-hosted, system fonts
137- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF
138- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
139 
140## Phase 5: Documentation Output
141 
142After inspection, create these files in `docs/research/`:
1431. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
1442. `COMPONENT_INVENTORY.md` — Every component with structure notes
1453. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
1464. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
1475. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
148