Two files, one repository
JCodesMore/ai-website-cloner-template ships 3 formats across 3 indexed files. The question worth asking is whether the second one says anything the first does not.
| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 9 | 0 | 10 | 47% |
| Commands | 6 | 0 | 0 | 100% |
| Section tags | 5 | 0 | 2 | 71% |
What each file covers
Sections
9 shared · 0 only in A · 10 only in B- + Website Inspection Guide
- + How to Reverse-Engineer Any Website
- + Phase 1: Visual Audit
- + Screenshots to Capture
- + Design Tokens to Extract
- + Phase 2: Component Inventory
- + Common Components to Look For
- + Phase 3: Layout Architecture
- + Phase 4: Technical Stack Analysis
- + Phase 5: Documentation Output
- This is NOT the Next.js you know
- Website Reverse-Engineer Template
- What This Is
- Tech Stack
- Commands
- Code Style
- Design Principles
- Project Structure
- MOST IMPORTANT NOTES
Commands
6 shared · 0 only in A · 0 only in B- npm run dev
- npm run build
- npm run lint
- npm run typecheck
- npm run check
- node scripts/sync-skills.mjs
Section tags
5 shared · 0 only in A · 2 only in B- + ui
- + docs
- build
- lint-format
- code-style
- architecture
- types
Line diff
JCodesMore/ai-website-cloner-template · AGENTS.md
@@ −1 @@
1<!-- BEGIN:nextjs-agent-rules -->
2
3# This is NOT the Next.js you know
@@ −66 @@
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
JCodesMore/ai-website-cloner-template · .clinerules
@@ +1 @@
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
6# This is NOT the Next.js you know
@@ +69 @@
69- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
70- After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
71
72# Website Inspection Guide
73
74## How to Reverse-Engineer Any Website
75
76This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
77
78## Phase 1: Visual Audit
79
80### Screenshots to Capture
81- [ ] Every distinct page — desktop, tablet, mobile
82- [ ] Dark mode variants (if applicable)
83- [ ] Light mode variants (if applicable)
84- [ ] Key interaction states (hover, active, open menus, modals)
85- [ ] Loading/skeleton states
86- [ ] Empty states
87- [ ] Error states
88
89### Design Tokens to Extract
90- [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
91- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
92- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
93- [ ] **Border radius** — buttons, cards, avatars, inputs
94- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
95- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
96- [ ] **Icons** — which icon library? custom SVGs? sizes?
97- [ ] **Avatars** — sizes, shapes, fallback behavior
98- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
99- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
100
101## Phase 2: Component Inventory
102
103For each distinct UI component, document:
1041. **Name** — what would you call this component?
1052. **Structure** — what HTML elements / child components does it contain?
1063. **Variants** — does it have different sizes, colors, or states?
1074. **States** — default, hover, active, disabled, loading, error, empty
1085. **Responsive behavior** — how does it change at different breakpoints?
1096. **Interactions** — click, hover, focus, keyboard navigation
1107. **Animations** — transitions, entrance/exit animations, micro-interactions
111
112### Common Components to Look For
113- Navigation (top bar, sidebar, bottom bar)
114- Cards / list items
115- Buttons and links
116- Forms and inputs
117- Modals and dialogs
118- Dropdowns and menus
119- Tabs and segmented controls
120- Avatars and user badges
121- Loading skeletons
122- Toast notifications
123- Tooltips and popovers
124
125## Phase 3: Layout Architecture
126
127- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
128- [ ] **Column layout** — how many columns at each breakpoint?
129- [ ] **Max-width** — main content area max-width
130- [ ] **Sticky elements** — header, sidebar, floating buttons
131- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
132- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
133
134## Phase 4: Technical Stack Analysis
135
136- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
137- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
138- [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
139- [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
140- [ ] **Font loading** — Google Fonts, self-hosted, system fonts
141- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF
142- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
143
144## Phase 5: Documentation Output
145
146After inspection, create these files in `docs/research/`:
1471. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
1482. `COMPONENT_INVENTORY.md` — Every component with structure notes
1493. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
1504. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
1515. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
152
@@ −1 +1 @@
1+<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
2+ Run `bash scripts/sync-agent-rules.sh` to regenerate. -->
3+
14 <!-- BEGIN:nextjs-agent-rules -->
25
36 # This is NOT the Next.js you know
@@ −66 +69 @@
6669 - After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
6770 - After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
6871
69−@docs/research/INSPECTION_GUIDE.md
72+# Website Inspection Guide
73+
74+## How to Reverse-Engineer Any Website
75+
76+This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
77+
78+## Phase 1: Visual Audit
79+
80+### Screenshots to Capture
81+- [ ] Every distinct page — desktop, tablet, mobile
82+- [ ] Dark mode variants (if applicable)
83+- [ ] Light mode variants (if applicable)
84+- [ ] Key interaction states (hover, active, open menus, modals)
85+- [ ] Loading/skeleton states
86+- [ ] Empty states
87+- [ ] Error states
88+
89+### Design Tokens to Extract
90+- [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
91+- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
92+- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
93+- [ ] **Border radius** — buttons, cards, avatars, inputs
94+- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
95+- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
96+- [ ] **Icons** — which icon library? custom SVGs? sizes?
97+- [ ] **Avatars** — sizes, shapes, fallback behavior
98+- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
99+- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
100+
101+## Phase 2: Component Inventory
102+
103+For each distinct UI component, document:
104+1. **Name** — what would you call this component?
105+2. **Structure** — what HTML elements / child components does it contain?
106+3. **Variants** — does it have different sizes, colors, or states?
107+4. **States** — default, hover, active, disabled, loading, error, empty
108+5. **Responsive behavior** — how does it change at different breakpoints?
109+6. **Interactions** — click, hover, focus, keyboard navigation
110+7. **Animations** — transitions, entrance/exit animations, micro-interactions
111+
112+### Common Components to Look For
113+- Navigation (top bar, sidebar, bottom bar)
114+- Cards / list items
115+- Buttons and links
116+- Forms and inputs
117+- Modals and dialogs
118+- Dropdowns and menus
119+- Tabs and segmented controls
120+- Avatars and user badges
121+- Loading skeletons
122+- Toast notifications
123+- Tooltips and popovers
124+
125+## Phase 3: Layout Architecture
126+
127+- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
128+- [ ] **Column layout** — how many columns at each breakpoint?
129+- [ ] **Max-width** — main content area max-width
130+- [ ] **Sticky elements** — header, sidebar, floating buttons
131+- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
132+- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
133+
134+## Phase 4: Technical Stack Analysis
135+
136+- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
137+- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
138+- [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
139+- [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
140+- [ ] **Font loading** — Google Fonts, self-hosted, system fonts
141+- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF
142+- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
143+
144+## Phase 5: Documentation Output
145+
146+After inspection, create these files in `docs/research/`:
147+1. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
148+2. `COMPONENT_INVENTORY.md` — Every component with structure notes
149+3. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
150+4. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
151+5. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
70152
