clone-website

Files (13)

• AGENTS.md
• SKILL.md
• design-tokens.js · scripts/
• sniper-css.js · scripts/
• package.json · templates/nextjs-app-router/
• globals.css · templates/nextjs-app-router/src/app/
• layout.tsx · templates/nextjs-app-router/src/app/
• page.tsx · templates/nextjs-app-router/src/app/
• Navbar.tsx · templates/nextjs-app-router/src/components/sections/
• useScrollReveal.ts · templates/nextjs-app-router/src/hooks/
• utils.ts · templates/nextjs-app-router/src/lib/
• tailwind.config.ts · templates/nextjs-app-router/
• tsconfig.json · templates/nextjs-app-router/

SKILL.md (first lines)

# Clone Website

Clone any website into a modern component codebase with pixel-perfect fidelity. One command. Full pipeline.

## Usage

/invoke the skill body then run:

```
clone-website <target-url> [--stack nextjs|vite|vue|svelte|plain] [--mobile] [--no-video]
```

Or invoke the module directly:

```
node /Users/saiyaganti/ox/src/website-cloner.js clone <url> --stack nextjs
```

## 5-Phase Pipeline

```
Phase 1 → Reconnaissance    Screenshots, design token extraction, interaction + animation sweep
Phase 2 → Foundation        Download fonts, images, videos (yt-dlp for streams); write tokens
Phase 3 → Component Specs   Per-section spec files with EXACT getComputedStyle() values
Phase 4 → Parallel Build    Builder agents in worktrees, one per section/component
Phase 5 → Assembly & QA     Merge worktrees, wire page, run visual diff vs original
```

### Phase 1 — Reconnaissance

1. Launch headless browser, navigate to `<url>`
2. Take full-page screenshot + viewport screenshots (desktop + mobile @375px)
3. Extract design tokens via `scripts/design-tokens.js` + `scripts/sniper-css.js`
4. Walk the DOM; classify sections by semantic landmark (`<header>`, `<main>`, `<section>`, `<footer>`)
5. Detect interactions: forms, modals, carousels, tabs, dropdowns, accordions, tooltips, menus
6. Detect animations: GSAP, Framer Motion, Lottie, CSS keyframes, Lenis, Locomotive Scroll
7. Detect scroll behavior: sticky, parallax, IntersectionObserver triggers
8. Save results to `docs/research/recon.json`

### Phase 2 — Foundation

1. Write `globals.css` with extracted design tokens as CSS custom properties
2. Download all images (`<img src>`, CSS `background-image`) → `public/images/`
3. Download all fonts (`@font-face`, `font-display: swap`) → `public/fonts/`
4. Download videos: iframes (Vimeo/YouTube → yt-dlp) and direct URLs → `public/videos/`
5. Extract SVGs as inline React components → `src/components/icons.tsx`
6. Run `extractDesignTokens` → `toTailwind(tokens)` → inject into `tailwind.config.ts`

### Phase 3 — Component Specs

For each section, write `docs/research/components/<section>.md` containing:

```
## <SectionName>
- **Position:** <static | sticky | fixed>
- **Z-index:** <int>
- **Layout:** <flexbox | grid | block | absolute>
- **Computed styles:** <exact getComputedStyle dump>
- **Responsive:** <breakpoint classes>
- **Interactions:** <hover/click/focus states>
- **Animations:** <keyframes, transitions, timing functions>
- **Content:** <real text + asset paths>
```

Builder agents MUST receive the spec inlined — never guess.

### Phase 4 — Parallel Build

- Spawn one builder agent per section in its own git worktree branch
- Each builder reads ONLY its section spec + design tokens
- Two-agent pattern: **Builder** (writes code) → **Evaluator** (reviews, does NOT write)
- Builder MUST NOT evaluate its own output
- Worktrees merge back into `main` after all builds complete

### Phase 5 — Assembly & QA

1. Assemble section components into `page.tsx` in original DOM order
2. Wire up shared providers: Framer Motion, Lenis, Embla Carousel
3. Run visual diff (`scripts/visual-diff.js`) against original screenshots
4. QA checklist (see Quality Checklist below)
5. Report: invisible sections, broken images, console errors, TypeScript errors

## Design Token Extraction

Use `scripts/sniper-css.js` and `scripts/design-tokens.js` to extract:

| Token Type | Source | Method |
|---|---|---|
| Colors | `color`, `background-color`, `border-color`, gradient stops | `getComputedStyle` |
| Fonts | `font-family`, `@font-face` rules, font files | `document.styleSheets` |
| Spacing | `margin`, `padding`, `gap` values | `getComputedStyle` |
| Shadows | `box-shadow` (ALL layers) | `getComputedStyle.boxShadow` |
| Border-radius | `border-radius`, `border-start-end-radius` etc | `getComputedStyle` |
| Breakpoints | `@media` queries | `CSSRuleList` |
| Typography | `font-size`, `line-height`, `letter-spacing`, `font-weight` | `getComputedStyle` |

### sniping-css.js

```js
import { extractComputedStyles, extractTypography, extractBoxShadow, extractBackground, extractAnimations } from './scripts/sniper-css.js';
```

## Asset Extraction

- **Images:** `<img srcset>` and CSS `url()` — download at `srcset` resolutions
- **Videos:** `@playwright/mcp` browser + `yt-dlp` for Vimeo/YouTube/HLS; direct `download()` for MP4
- **SVGs:** Extract as React components with `import { ReactComponent as Icon }` pattern
- **Fonts:** `@font-face` → WOFF2, `font-display: swap`, preconnect to CDN
- **Favicon:** All sizes via `<link rel="icon">` + `apple-touch-icon`

## Animation Detection

| Library | Detection Selector | Output |
|---|---|---|
| GSAP | `gsap.`, `_gsap`, `transform3d` in inline styles | Extract timeline config |
| Framer Motion | `motion-*` classes, `data-framer-*` attrs | Translate to `motion.*` |
| Lottie | `<lottie-player>`, `bodymuffin` class | Embed `<lottie-player>` tag |
| CSS Keyframes | `@keyframes`, `animation` property | Export as `.animate-*` |
| CSS Transitions | `transition`, `transition-*` | Tailwind `transition-*` |

From SAI141003/ox, MIT.

More from SAI141003/ox