multiclone 0.0.0-stage → 0.2.0

package/skills/multiclone/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: multiclone
+description: Clone a website from a link into a clean React + Vite + TypeScript project with the same design, animations and effects, whatever stack the original uses. Use when the user gives a URL and asks to clone, copy, recreate, rebuild or replicate a site, page, landing page or section, or to match a site's animations, hover states or scroll effects.
+---
+
+# multiclone: clone any website from a link
+
+The goal is a rebuild that a visitor can't tell apart from the original at any scroll position, on desktop and on mobile, including the intro, the scroll motion and the hover states. It must be clean, typed React that a senior engineer would be happy to own, not a pile of the original's minified code.
+
+## Fast path (use this)
+
+1. **Ask the scope first**, in one short question: just the landing page, specific pages (which ones), or the whole site. Don't start before the user answers.
+2. **Start:** `multiclone start <url> --scope landing|pages|site [--pages /pricing,/about]`. It returns in seconds with a **progress link** (for example `http://127.0.0.1:4300/`). Give that link to the user straight away: it shows live progress and then the clone itself.
+3. **Wait for the draft:** `multiclone status --wait draft`. In about 2–3 minutes the session has a quick capture (desktop and mobile in parallel), a React project with the captured fonts, tokens and media, a **first draft** (one component and CSS module per section with the real text, links, images and video), the clone running on localhost and an offline copy of the original. Status lists all the links.
+4. **Polish, don't rewrite.** The draft is in `<workspace>/clone/src/sections/<page>/`. Compare each section with its crop in `captures/<page>/sections/<id>/`, fix layout, make it responsive and clean, add the motion and hovers. Keep the dev server running; it hot-reloads.
+5. **Deep data arrives in the background.** Other pages (scope pages/site) and the deep pass (motion map, hovers, clicks, coverage, source maps, in `captures/<page>-full`) finish while you work. Check with `multiclone status`. Use the deep capture for motion and hovers when it's done.
+6. **Compare and fix** (stage 5 below), then hand over. `multiclone stop` ends the servers; the files stay.
+
+Run `start` again to resume after a crash or restart: finished captures are reused and drafted pages are never overwritten.
+
+Every command prints a short summary; details live in files. Read big things with `inspect` instead of opening whole files.
+
+## The stages in detail
+
+The fast path runs stages 1 and 3 and a first pass of 4 for you. Use the tools below directly for anything it doesn't cover, or when you need more control.
+
+1. **Capture** the original (one call also analyses it into section bundles).
+2. **Understand** the page from `REPORT.md` and the section bundles.
+3. **Scaffold** the project from the capture: fonts, tokens, media and the mock API come along.
+4. **Rebuild** (or polish the draft) section by section, tagging elements with the `data-mc-*` markers.
+5. **Compare and fix** until it is close, then hand over the localhost link.
+
+Do not skip the measuring: the difference between a lookalike and a clone is the compare loop at the end.
+
+## Tools
+
+Run them from the terminal: `multiclone <command>`, and `multiclone <command> --help` lists the flags (use `npx multiclone` if it isn't installed globally). The same tools are available over MCP (`multiclone mcp`) for agents that prefer it.
+
+| Tool           | What it does                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `start`        | The fast path above: background session with quick capture, project, first draft, live clone, offline original, other pages and the deep pass. Returns the progress link.                                                                                                                                                                                                                                                                          |
+| `status`       | Where the session is, with all links. `--wait draft`, `--wait pages` or `--wait deep` blocks until that point.                                                                                                                                                                                                                                                                                                                                     |
+| `stop`         | Stops the session's servers. Files stay.                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `draft`        | Turns a capture into section components inside a scaffolded project (`start` runs it for you).                                                                                                                                                                                                                                                                                                                                                     |
+| `capture`      | Real Chrome loads the page per viewport, dismisses consent banners, scrolls like a visitor and records the network, every script and its source maps, the computed-style DOM snapshot, fonts, storage, the intro filmstrip, the scroll motion map, runtime animation libraries, WebGL shaders, event listeners, hover/focus/click states and CSS breakpoints. `--depth quick` keeps only what a draft needs (1–2 minutes). Then it runs `analyze`. |
+| `analyze`      | Rebuilds the derived files from a capture in an isolated worker: section bundles, design tokens, prettified code split into app and vendor, animation calls found in the code, and `REPORT.md`.                                                                                                                                                                                                                                                    |
+| `inspect`      | Pages through anything in a capture by facet: `summary`, `section`, `dom`, `styles`, `network`, `motion`, `animations`, `runtime`, `interactions`, `code`, `fonts`, `tokens`. Use `selector`, `viewport`, `query`, `offset` and `limit` to keep pages small.                                                                                                                                                                                       |
+| `serve_mirror` | Serves a capture offline on localhost. `live` mode runs the original scripts with the captured storage seeded, so the animations work. `snapshot` mode serves the frozen DOM. Captured API calls become a mock API under `/__mc/api`.                                                                                                                                                                                                              |
+| `scaffold`     | Creates the strict React 19 + Vite + TS starter. With `capture` it installs the captured fonts, `tokens.css`, the media files and a dev proxy to the mock API.                                                                                                                                                                                                                                                                                     |
+| `assets`       | Copies captured media into `public/media/<host>/…` and writes `src/content/asset-map.json` (scaffold with `capture` already does this).                                                                                                                                                                                                                                                                                                            |
+| `shoot`        | Screenshots at exact scroll offsets, scrolling like a visitor so Lenis and GSAP move. A `probe` JS expression runs after each scroll: element rects, CSS variables, computed styles. A slow page or a failed shot becomes a warning, not a failure.                                                                                                                                                                                                |
+| `compare`      | Compares the clone with the original per viewport: frames, sections aligned by `data-mc-section`, structure, scroll motion by `data-mc-track`, hovers by `data-mc-hover`, and the intro with `intro`. Writes an HTML report and returns the worst sections and frames.                                                                                                                                                                             |
+| `doctor`       | Checks Node, Chrome and headless WebGL.                                                                                                                                                                                                                                                                                                                                                                                                            |
+
+The capture folder layout is documented in [references/capture-format.md](references/capture-format.md).
+
+## 1. Capture
+
+- Run `doctor` once if this machine hasn't used multiclone before.
+- Capture with `out` next to the rebuild, for example `<workspace>/<site>-capture`. Viewports default to desktop 1440×900 and mobile 390×844; `viewports: "auto"` adds one per major CSS breakpoint.
+- Raise `settleMs` for long preloaders. Use `headed: true` and a `profile` folder for bot checks or logins: pass the check once in the window and the profile reuses it.
+- If the result looks wrong, look at `shots/` and `intro/` first. A bot wall or blank WebGL means recapture headed. `capture.json` lists any collector that failed or ran out of time; the rest of the capture is still good.
+
+## 2. Understand: read before you write
+
+Read `REPORT.md` top to bottom. It has the stack with rebuild advice, the sections table, the design tokens, the fonts, the animation calls found in the code, the motion summary and anything that was skipped or truncated. Then:
+
+- **Section bundles (`sections/<id>/`).** Each holds `section.md` (the brief), crops per viewport, a DOM outline with boxes and styles, local tokens, the motion tracks, animations, interactions, assets and the hot code that ran while it moved. A section bundle is everything needed to rebuild that section without reading the rest of the page.
+- **Stack recipes.** Load [references/stacks.md](references/stacks.md) whenever the stack includes anything beyond plain CSS.
+- **Content data (`data/`).** Hydration state and JSON scripts hold the real copy, links and image URLs. Turn them into typed content files. Never retype copy you can extract.
+- **Code (`code/`, `sources/`).** When source maps were published, `sources/` has the original source: read that first. Otherwise `code/` has the prettified app chunks with vendor libraries named. `animations-code.json` lists every `gsap.to`, `ScrollTrigger.create`, `animate()`, keyframes and shader found, with file and line.
+- **Runtime (`runtime/`).** What the libraries reported live: GSAP tweens and ScrollTriggers with their start/end, Lenis options, WAAPI animations, IntersectionObserver thresholds, WebGL shader sources, Lottie/Rive files.
+- **Motion (`motion.json`).** Every element whose transform, opacity, clip, filter, colours, size or text changes with scroll, with exact curves and a stable `id`.
+
+Use `inspect` to page through anything large instead of reading whole files.
+
+Before coding, write a short plan: the sections and their components, the technique for each moving part and why, which original CSS you'll reuse, and what can't be replicated exactly (auth, live search, third-party widgets).
+
+## 3. Scaffold
+
+- Run `scaffold` with `capture` pointing at the capture folder. It copies the captured fonts with matching `@font-face` rules, the capture `tokens.css`, the media files and the asset map. When the page called its own API, it writes `mc.config.json` so `npm run dev` proxies those paths to `multiclone serve` on port 4400.
+- Give each clone its own port so several can run at once.
+- Install only what the stack needs: `gsap`, `motion`, `three` with `@react-three/fiber`, `@rive-app/canvas` or `lottie-web`. Pin exact versions. Keep the starter's Lenis only if the original smooth-scrolls, and use the captured Lenis options.
+- If a font file couldn't be captured, use the same family from Fontsource or the closest free look-alike, and tune `size-adjust` and `letter-spacing` until line breaks match. Text that wraps differently shifts everything below it.
+
+## 4. Rebuild
+
+Work top to bottom, one section bundle at a time. For pages with many sections, hand independent sections to a sub-agent using the `section-builder` brief ([agents/section-builder.md](../../agents/section-builder.md)), one section each, after the shell is in place.
+
+1. **Shell first:** fonts, tokens, header, footer, smooth scroll and any global background.
+2. **Then each section:** read its `section.md`. If a draft exists (`src/sections/<page>/<Name>/`), polish it in place: turn repeated markup into data plus a map, rename classes to meaningful names, replace fixed widths with responsive layout, and delete wrappers that only existed for the original's framework. Otherwise rebuild it as one component under `src/sections/<page>/`. Look at it next to its crop before moving on.
+3. **Tag for compare** with the helpers in `@/lib/mc`:
+   - `<section {...mcSection('03-pricing')}>` with the section id;
+   - `{...mcTrack(id)}` on every element listed in the section's `motion.json`;
+   - `{...mcHover(id)}` on every element listed in its `interactions.json`.
+     Untagged motion and hovers count as missing in the score.
+4. **Motion:** follow the stack recipes and the captured runtime values (ScrollTrigger start/end, durations, easings). Match the curves in `motion.json`, not only the endpoints.
+5. **Heavy parts** (canvas, WebGL, Rive, video) load lazily, pause off-screen and clean up on unmount. StrictMode stays on.
+6. **Determinism:** seed anything random so the compare loop is meaningful.
+7. **Things you can't run locally:** render their visual state statically and keep a list for the hand-over.
+
+Run `npm run check` whenever a section is done.
+
+## 5. Compare and fix
+
+The full playbook is in [references/fidelity.md](references/fidelity.md).
+
+1. Serve the capture with `serve_mirror` (`live`) as the stable original (a `start` session already serves it), and run the clone. For long compare runs prefer `npm run build && npm run preview` over the dev server: it loads much faster and is what ships.
+2. Run `compare` with `original` set to the **capture folder** and `clone` to the dev URL. The capture gives compare its sections, tracks and hovers; it shoots the mirror for pixels. Add `intro: true` when the page has an intro animation.
+3. Fix in this order: missing sections, page height, the worst section, untagged tracks and hovers, then the worst frames. Open the images yourself: the score guides, it doesn't judge.
+4. Measure with `shoot` and a `probe` on both sides instead of guessing.
+5. Repeat until every section is visually right on both viewports. The score stays below 100 while anything couldn't be compared, so read `completeness` too.
+
+## Hand-over
+
+- `npm run check` is clean.
+- Give the localhost link, `npm run build && npm run preview` for production, the final score and the report path.
+- List honestly what is approximated or missing. Never claim something works that you didn't see in a screenshot or a probe.
+- Keep replies short and plain. Don't paste code into the chat.
+
+## Quality bar
+
+[references/quality.md](references/quality.md): strict TypeScript, no `any`, no non-null `!`, ESLint strictTypeChecked, Prettier, typed content data, reusable hooks, StrictMode on, accessible markup, lazy heavy parts.

package/skills/multiclone/references/capture-format.md

@@ -0,0 +1,73 @@
+# Capture folder format
+
+Everything one `capture` writes, relative to the capture folder. Files from a collector that was skipped or failed are simply missing; `capture.json` says which ones and why. Read big files with the `inspect` tool rather than whole.
+
+## Top level
+
+| File                   | What it holds                                                                                               |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `REPORT.md`            | Start here: stack, sections, tokens, fonts, animation calls, motion summary, gaps.                          |
+| `capture.json`         | Manifest: URL, final URL, viewports, page heights, stack signals, outputs per collector, budgets, failures. |
+| `network.json`         | Every response: URL, method, status, MIME type, bytes, initiator, saved file under `assets/`.               |
+| `redirects.json`       | Redirect chains.                                                                                            |
+| `websockets.json`      | WebSocket URLs and sampled frames.                                                                          |
+| `frames.json`          | Iframes and workers that were attached.                                                                     |
+| `fingerprint.json`     | Globals, DOM markers, CSS features, keyframes, canvases and videos used for stack detection.                |
+| `consent.json`         | The consent banner that was dismissed, if any.                                                              |
+| `fonts.json`           | `faces` (every @font-face with status and saved files) and `usage` (what text rendered with which font).    |
+| `storage.json`         | Cookies, localStorage and sessionStorage, seeded into the mirror.                                           |
+| `breakpoints.json`     | Media-query breakpoints found in the stylesheets.                                                           |
+| `motion.json`          | Scroll motion tracks: `id`, `path`, scroll `range`, `timeBased`, and `curves` per property.                 |
+| `motion-vars.json`     | CSS custom properties on the root that change with scroll.                                                  |
+| `animations.json`      | CSS animations and transitions from the Animation domain, with keyframes and timing.                        |
+| `animations-code.json` | Animation calls found in the code (GSAP, ScrollTrigger, Motion, WAAPI, keyframes, shaders) with file/line.  |
+| `tokens.json`          | Design scales: colours, font families, sizes, weights, spacing, radii, shadows, easings, durations.         |
+| `tokens.css`           | The same as CSS custom properties; scaffold copies it into the project.                                     |
+
+## Folders
+
+| Folder                         | What it holds                                                                                                                |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| `assets/`                      | Response bodies, named by host and path.                                                                                     |
+| `data/`                        | Hydration state and JSON scripts (`__NEXT_DATA__`, Remix, Nuxt, Apollo, Redux).                                              |
+| `dom/<viewport>.html`          | Hydrated DOM snapshot taken at the top of the page.                                                                          |
+| `snapshot/<viewport>.json`     | Computed-style DOM snapshot: nodes with stable `path`, boxes, paint order and key styles.                                    |
+| `sections-raw/<viewport>.json` | The vertical sections the page splits into (label, path, top, bottom).                                                       |
+| `shots/<viewport>-<y>.png`     | Viewport screenshots at scroll offsets.                                                                                      |
+| `intro/<viewport>-<ms>.png`    | Intro filmstrip at 0–4000 ms after load; `intro/index.json` lists the frames.                                                |
+| `scripts/`                     | Every parsed script's source; `scripts/index.json` lists URL, hash, size and source map URL.                                 |
+| `sources/`                     | Original sources recovered from source maps; `sources/index.json` maps them to scripts.                                      |
+| `code/`                        | Prettified app chunks with vendor libraries identified; `code/index.json` lists them.                                        |
+| `runtime/<viewport>.json`      | Live library state: GSAP tweens and ScrollTriggers, Lenis options, WAAPI, IntersectionObservers, WebGL shaders, Lottie/Rive. |
+| `listeners/`                   | Event listeners per element with handler locations.                                                                          |
+| `motion-code/`                 | Code that executed while each part of the page moved (coverage diff).                                                        |
+| `interactions/<viewport>.json` | Hover, focus-visible and active states, real hover crops and click results, per element.                                     |
+| `sections/<id>/`               | One bundle per section, below.                                                                                               |
+
+## Section bundles
+
+`sections/index.json` lists every section with its id (`03-pricing`), label, folder, position per viewport and counts. Each `sections/<id>/` holds:
+
+| File                     | What it holds                                                             |
+| ------------------------ | ------------------------------------------------------------------------- |
+| `section.md`             | The brief: what to build, which files to read, the markers to add.        |
+| `<viewport>.png`         | Crop of the section.                                                      |
+| `dom-<viewport>.txt`     | Indented element outline with boxes and key styles.                       |
+| `styles-<viewport>.json` | Computed styles of its elements.                                          |
+| `tokens-<viewport>.json` | Tokens used inside the section.                                           |
+| `motion.json`            | Its motion tracks (tag each element with `data-mc-track="<id>"`).         |
+| `animations.json`        | Its CSS animations and transitions.                                       |
+| `animations-code.json`   | Animation calls that target it.                                           |
+| `interactions.json`      | Its hover/focus/click states with `id` (tag with `data-mc-hover="<id>"`). |
+| `assets.json`            | Media it uses, with saved files.                                          |
+| `hot-code.json`          | Code that ran while it moved.                                             |
+
+## Markers the rebuild adds
+
+| Attribute                | Where                                                  | Read by                     |
+| ------------------------ | ------------------------------------------------------ | --------------------------- |
+| `data-mc-section="<id>"` | Root element of each rebuilt section                   | `compare` section alignment |
+| `data-mc-track="<id>"`   | Each element listed in a section's `motion.json`       | `compare` motion diff       |
+| `data-mc-hover="<id>"`   | Each element listed in a section's `interactions.json` | `compare` hover diff        |
+
+The scaffold's `@/lib/mc` helpers (`mcSection`, `mcTrack`, `mcHover`) produce these attributes.

package/skills/multiclone/references/fidelity.md

@@ -0,0 +1,54 @@
+# Fidelity playbook: from close to identical
+
+## The loop
+
+1. Serve the capture with `serve_mirror` (`live`) and run the clone's dev server.
+2. Run `compare` with `original` set to the capture folder. Compare then knows the sections, motion tracks and hover states, and shoots the mirror for pixels. Use fixed `positions` (top, the start, middle and end of each pinned or animated section, the footer) and reuse them every round. Add `intro: true` when the page animates in.
+3. Read the result in this order:
+   - **completeness:** missing sections and size mismatches cap the score below 100;
+   - **missing sections:** the clone has no `data-mc-section` with that id;
+   - **page heights**, then the **worst section** (its row shows original | clone | diff, text, fonts and height);
+   - **untagged tracks and hovers:** add `data-mc-track` / `data-mc-hover`, they count as misses;
+   - **motion:** per property error along the scroll; **hovers:** hovered values on both sides;
+   - **intro** frames, then the **worst frames**.
+4. Re-run. Stop when every section looks right by eye and the remaining diffs come from video, randomness or live data.
+
+Compare against the live URL only when the mirror misbehaves (`/__mc/misses` lists what was not captured). A URL original has no capture data, so it scores frames and auto-detected sections only.
+
+## Measuring with probes
+
+`shoot` accepts a `probe`: a JavaScript expression evaluated after each scroll. Run the same probe on both the original and the clone and compare the numbers.
+
+- **Element box:** `JSON.stringify(document.querySelector('h1').getBoundingClientRect())`
+- **Section tops:** `[...document.querySelectorAll('section')].map(s => Math.round(s.getBoundingClientRect().top + scrollY))`
+- **A runtime variable:** `getComputedStyle(document.documentElement).getPropertyValue('--intro-delay')`
+- **Animated values:** `getComputedStyle(el).transform`, `.opacity`, `.clipPath`
+- **Fonts actually used:** `[...document.fonts].filter(f => f.status === 'loaded').map(f => f.family + ' ' + f.weight)`
+
+For a value that depends on the viewport, shoot the original at several sizes, for example the `name:1440x613`, `name:1440x813` and `name:1440x1013` viewports. Then fit the formula. It is usually linear in `innerHeight` or clamped.
+
+## Common diffs and their causes
+
+| What you see                                            | Usual cause                                                                       | Fix                                                                                |
+| ------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Everything below some point is shifted                  | A section height is off: a pinned wrapper, a margin, or text wrapping differently | Probe section tops on both pages; fix the first one that differs                   |
+| Text is the right size but wraps differently            | The font isn't a close enough substitute, or the letter-spacing is off            | Tune `size-adjust`, `letter-spacing` and the weight; check `font-feature-settings` |
+| Text looks lighter or heavier                           | A variable font weight axis, or a missing `-webkit-font-smoothing: antialiased`   | Copy the root font smoothing and `font-variation-settings`                         |
+| An animation is at the wrong stage at the same scroll   | The start or end offsets or a runtime variable are wrong                          | Use the ScrollTrigger start/end in `runtime/`; probe the variable at three heights |
+| The animation matches at the ends but not in the middle | The easing or scrub smoothing differs                                             | Compare intermediate frames; copy the `ease` names and `scrub` values              |
+| Mobile layout is very different                         | The original serves a different structure below a breakpoint                      | Use the mobile DOM snapshot and mobile shots as the source, not the desktop ones   |
+| The header or nav is missing in the shots               | Fixed elements with an intro delay, or hide-on-scroll                             | Match the intro timing and the scroll-direction logic                              |
+| Images are blank in the clone                           | A lazy image never intersected, or the asset map path is wrong                    | Check `asset-map.json`; use `loading="lazy"` only below the fold                   |
+| The canvas or WebGL is blank in shots                   | Not ready at screenshot time, or no WebGL                                         | Raise `settleMs`; check `doctor`; wait for the first frame before revealing        |
+| The colours are slightly off everywhere                 | Colour space or tone mapping (WebGL), or wrong theme variables                    | Copy the renderer colour settings; check `color-scheme` and the root variables     |
+| Scores swing between runs                               | Randomness, time-based loops, video                                               | Seed the randomness; judge those frames by eye                                     |
+
+## Mobile
+
+- The mobile capture is a separate source of truth: different DOM, heights, images and sometimes animations. Compare mobile with as many positions as desktop.
+- Portrait canvases often need their own layout. Thumbnails and labels are often hidden on small screens.
+- Touch: `hover` styles must not stick on tap. Use `@media (hover: hover)` around hover effects that the original scopes that way.
+
+## When to stop
+
+Stop when both viewports look right by eye at every listed position, page heights are within about 1%, and the scroll motion feels the same when you scrub. List the remaining known gaps honestly in the hand-over.

package/skills/multiclone/references/quality.md

@@ -0,0 +1,47 @@
+# Project standards for every clone
+
+The clone should read like it was written by hand by a senior React developer.
+
+## Stack
+
+- React 19, Vite and TypeScript, starting from the `scaffold` template. StrictMode stays on.
+- ESLint `strictTypeChecked` and `stylisticTypeChecked`, react-hooks, react-refresh and Prettier.
+- `npm run check` runs the typecheck, lint, format check and build. It must be clean at hand-over.
+- Pin every dependency to an exact version. Add only what the stack needs.
+
+## TypeScript
+
+- `strict`, `noUncheckedIndexedAccess` and `exactOptionalPropertyTypes` are on.
+- No `any`. No non-null `!`. Prefer `satisfies` over `as`.
+- Content is typed data in `src/content/*.ts`, with types in `src/types/`. Components never hard-code copy that came from the original's data.
+
+## Layout of the code
+
+- `src/app/`: App and Page composition.
+- `src/components/<area>/`: layout, hero, sections and ui. One component per file.
+- `src/hooks/`: reusable behaviour: `useInView`, `useActiveSection`, `useMediaQuery`, plus scroll progress and timing hooks.
+- `src/lib/`: pure helpers and engines: math, the canvas renderer, the graph layout.
+- `src/styles/`: `index.css` for imports, `base.css`, `app.css` for your additions, and `original/` for reused compiled CSS.
+- `public/media/<host>/`: assets copied by `multiclone assets`.
+
+## Behaviour
+
+- Effects clean up everything: observers, RAF loops, listeners, GSAP contexts and WebGL resources. StrictMode runs them twice.
+- Heavy parts (canvas, WebGL, Rive, Lottie, carousels) are `lazy()` and loaded when near the viewport.
+- Media plays only in view.
+- Under `prefers-reduced-motion`, ambient motion stops and content stays readable and in place.
+
+## Accessibility
+
+- Landmarks: one `<h1>`, then headings in order.
+- Real `<button>` and `<a>` elements, alt text for meaningful images, and empty `alt` for decoration.
+- Dialogs and menus have labels, focus management, Escape to close and `aria-expanded`.
+- Visible focus styles. Split-text animations keep the readable text available to screen readers.
+
+## Hand-over checklist
+
+- [ ] `npm run check` is clean
+- [ ] `compare` on desktop and mobile; final score and report path noted
+- [ ] Page heights match within about 1%
+- [ ] The localhost link is given; `npm run build && npm run preview` works
+- [ ] A short, honest list of what is approximated or missing

package/skills/multiclone/references/stacks.md

@@ -0,0 +1,156 @@
+# Rebuild recipes by stack
+
+Use the section for each technology in the capture's stack list. Several usually apply at once, for example Remix, Tailwind, CSS scroll timelines and Lenis together.
+
+## Contents
+
+- [Frameworks and platforms](#frameworks-and-platforms)
+- [CSS scroll-driven animations](#css-scroll-driven-animations)
+- [Smooth scroll: Lenis, Locomotive, ScrollSmoother](#smooth-scroll)
+- [GSAP and ScrollTrigger](#gsap-and-scrolltrigger)
+- [Framer and Motion](#framer-and-motion)
+- [Webflow IX2](#webflow-ix2)
+- [Reveal-on-scroll libraries (AOS, Squarespace, WordPress plugins)](#reveal-on-scroll)
+- [Split text](#split-text)
+- [Sticky and pinned sections](#sticky-and-pinned-sections)
+- [Canvas drawing](#canvas-drawing)
+- [three.js, OGL and raw WebGL shaders](#webgl)
+- [Rive, Lottie, Spline](#rive-lottie-spline)
+- [Video](#video)
+- [Carousels](#carousels)
+- [Hover and interaction states](#hover-and-interaction-states)
+
+## Frameworks and platforms
+
+The original framework only matters for finding content and component boundaries. The rebuild is always Vite + React.
+
+- **Next.js:**
+  - `data/__NEXT_DATA__.json` (pages router) or `data/next-rsc-payload.json` (app router) holds page props.
+  - RSC payloads are line-based, in the form `id:JSON`. Split them on newlines and parse what you need.
+- **Remix / React Router:** `data/__remixContext.json` holds `state.loaderData`, keyed by route ID. Island props are often there in full.
+- **Nuxt:** `data/__NUXT__.json`. Vue `<Transition>` classes map to CSS transitions on mount and unmount.
+- **Webflow, Framer, Wix, Squarespace:**
+  - No useful data blob, so take content from `dom/desktop.html`.
+  - Webflow and Squarespace CSS are usually reusable.
+  - Framer and Wix CSS are not: they use generated class names and absolute layout. Rebuild their layout by hand from the screenshots and the structure files.
+- **Shopify themes, WordPress:**
+  - Each theme section is one component.
+  - The theme CSS is reusable.
+  - jQuery effects are small, so rewrite them as hooks.
+
+## CSS scroll-driven animations
+
+The capture lists them as `animation-timeline`, `scroll()`, `view()`, `view-timeline` and `animation-range`. This is the easiest case.
+
+- **Reuse the original rules as they are.** Copy the stylesheet, or the relevant rules, into `src/styles/original/`. Keep the original class names and custom property names.
+- **Rebuild the timeline structure exactly.** Named timelines (`view-timeline-name: --x`) must sit on the same kind of element. `timeline-scope` must be on a shared ancestor. Pinned wrappers need the same heights.
+- **Calibrate runtime variables.** Values on `<html style>` are set by script, often from `innerHeight`. Probe them in the original at several viewport heights, fit the formula, and set them from a hook on resize.
+- **Keep native scroll authoritative.** If Lenis is also present, it must drive the real window scroll (the default). Otherwise CSS timelines stop updating.
+
+## Smooth scroll
+
+- **Lenis** (`window.lenis`, `html.lenis` class): use the starter's `SmoothScroll` provider. Tune `lerp` (around 0.08–0.12) or `duration` by scrubbing both pages with the wheel. Copy the original's options from the bundle when you can find `new Lenis(`.
+- **Locomotive Scroll:**
+  - `data-scroll-speed` parallax becomes Lenis plus a scroll-linked translate. The offset is `(elementCenter - viewportCenter) * speed * factor`.
+  - Calibrate the factor with probes.
+- **GSAP ScrollSmoother:** Lenis gives the same feel. Map `data-speed` and `data-lag` to scroll-linked transforms.
+- **No smooth scroll in the original:** remove the provider. Adding inertia the original doesn't have is a fidelity bug.
+
+## GSAP and ScrollTrigger
+
+- Install `gsap` and register the plugins once: `ScrollTrigger`, plus `SplitText` and `Flip` if the original uses them. All GSAP plugins are free on npm.
+- **Setup:**
+  - Create timelines in `useLayoutEffect` inside `gsap.context(() => { … }, ref)`.
+  - Call `ctx.revert()` on cleanup so StrictMode's double run doesn't stack triggers.
+  - With Lenis, call `lenis.on('scroll', ScrollTrigger.update)` and drive Lenis from `gsap.ticker`.
+- **Reading the original:**
+  - Search the prettified bundle for `scrollTrigger:`, `ScrollTrigger.create`, `.timeline(`, `pin:`, `scrub:`, `start:`, `end:` and `ease:`. Copy the numbers and easing names exactly.
+  - If the code is too minified to read, use the motion map. The first and last scroll offsets where an element changes give `start` and `end`. The sampled values in between reveal the easing curve and whether it scrubs.
+- **Pinning:**
+  - `pin: true` adds pin spacing, and the page height depends on it.
+  - Compare page heights after every pinned section.
+  - Use `pinSpacing` exactly as the original does.
+- **Breakpoints:** `gsap.matchMedia()` and `ScrollTrigger.matchMedia` give mobile and desktop different timelines. Check both captures.
+
+## Framer and Motion
+
+- Use `motion/react`.
+- `whileInView` with `viewport={{ once, amount }}` covers appear effects.
+- `useScroll({ target, offset })` with `useTransform` covers scroll-linked transforms. Take the input and output ranges from the motion map.
+- Framer sites ship `data-framer-appear-id` and inline `style` starting values (opacity, transform) in the DOM snapshot. Those starting values are the `initial` state.
+- **Springs:** search the bundle for `stiffness`, `damping` and `mass`. The defaults are `stiffness: 100, damping: 10`.
+
+## Webflow IX2
+
+- Interactions are compiled into the `webflow.js` bundle as JSON (`"ix2"`, `"events"`, `"actionLists"`). Search for `actionItemGroups` to find the keyframes, durations, easings and triggers: scroll into view, while scrolling, hover, click, page load.
+- `data-w-id` on an element links it to its interaction.
+- The compiled site CSS is reusable. It contains the layout and the starting states.
+- Rebuild "while scrolling in view" interactions as scroll-linked transforms over the element's view progress, and "scroll into view" as `useInViewOnce` plus a CSS transition. Hover maps to CSS `:hover` or a small state hook.
+
+## Reveal on scroll
+
+AOS (`data-aos`), Squarespace section animations and most WordPress animation plugins are simple: a class toggles when an element enters the viewport.
+
+- Use one `useInViewOnce` hook and CSS transitions.
+- Copy the durations, delays and offsets from the attributes or the plugin CSS.
+
+## Split text
+
+Headings animate per line, word or character, and the capture flags split markers or a SplitText import.
+
+- Split in React. Render spans with `aria-hidden` and keep the full text for screen readers.
+- Stagger the spans with CSS `transition-delay` or a GSAP stagger.
+- Line splitting depends on the font, so match the fonts first.
+
+## Sticky and pinned sections
+
+- A pinned section is a tall wrapper holding a sticky, viewport-sized child. Progress is the scroll through the wrapper divided by (wrapper height − viewport height).
+- Match the wrapper heights per viewport. They are listed in the layout outline. Mobile often uses different heights or no pin at all.
+- `useScrollProgress(ref)` drives JS effects. For pure CSS effects, a view timeline on the wrapper is enough.
+
+## Canvas drawing
+
+Canvas output is produced by code, not markup.
+
+- Find the drawing code: search the scripts for `getContext('2d')`, `requestAnimationFrame` and `drawImage`. Prettify it and read the data source, which is often a JSON endpoint in the capture's `assets/`.
+- Port the logic into a typed module under `src/lib/<feature>/`: layout, renderer and input handling. Wrap it in a lazy component that owns the canvas, the resize observer, the device pixel ratio and cleanup.
+- **Make it deterministic:** seed the PRNG and fix the simulation steps. Then iterate against screenshots at the same offsets until the composition, density and colours match.
+- **Portrait screens** often need a different layout, such as a rotated or re-fit composition. Check the mobile shots.
+
+## WebGL
+
+- **Locate the shaders:** search for `gl_FragColor`, `precision highp float`, `void main` and `#version 300 es`. Then find the uniforms (`uTime`, `uMouse`, `uScroll`) and how they are driven.
+- **Port the shaders word for word** into `.glsl` strings. Rebuild only the JavaScript around them.
+- **three.js:**
+  - Use `@react-three/fiber` with `@react-three/drei`, or plain three in a component.
+  - Copy the camera FOV and position, the renderer settings (`toneMapping`, `outputColorSpace`, `antialias`) and the material parameters from the bundle. These are what make colours match.
+  - Models (`.glb`, `.gltf`) and textures are in the capture, so reuse them.
+- **OGL or raw WebGL:** write a small component that owns the program, buffers and RAF loop.
+- **Mobile:** many sites drop to a still image or a cheaper scene. Mirror what the mobile capture shows.
+- **Verification:** headless Chrome renders with SwiftShader. Screenshots are correct but slow, so allow a longer settle.
+
+## Rive, Lottie, Spline
+
+- **Rive:** reuse the captured `.riv` with `@rive-app/canvas`.
+  - Find the artboard, the state machine name and the input names in the bundle (`stateMachines:`, `artboard:`), and drive the inputs the same way: scroll, hover or in view.
+  - Pause it off-screen.
+- **Lottie:** reuse the JSON or `.lottie` with `lottie-web` or `@lottiefiles/dotlottie-react`. Match `loop`, `autoplay` and any scroll-scrubbed `goToAndStop`.
+- **Spline:** reuse the `.splinecode` URL with `@splinetool/react-spline`, lazy-loaded.
+
+## Video
+
+- Reuse the captured files and posters with `muted`, `playsInline`, `loop` and `preload="metadata"`.
+- Play only in view and pause off-screen. Under reduced motion, show the poster.
+- Range-request videos are re-downloaded whole at capture time. If one is missing, the mirror's misses list shows it.
+- In compare, video frames always differ, so judge those frames by eye.
+
+## Carousels
+
+- Use the original library (Swiper, Splide) when it is detected, or `embla-carousel-react`.
+- Copy the breakpoints, slides per view, gap, speed and autoplay timing from the init call in the bundle.
+
+## Hover and interaction states
+
+- `fingerprint.json → hoverRules` lists the `:hover` rules found in the stylesheets. Reused CSS brings them along for free.
+- JS hover effects, such as magnetic buttons, cursor followers and tilt cards, are in the scripts. Search for `mousemove` and `pointermove`.
+- Rebuild menus, dropdowns and dialogs with real semantics: a native `<dialog>`, `aria-expanded`, a focus trap and Escape to close.

package/templates/react-vite/.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+package-lock.json
+public
+src/styles/original

package/templates/react-vite/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 100
+}

package/templates/react-vite/eslint.config.js

@@ -0,0 +1,38 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import { reactRefresh } from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig(
+  globalIgnores(['dist', 'node_modules']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.strictTypeChecked,
+      tseslint.configs.stylisticTypeChecked,
+      reactHooks.configs.flat['recommended-latest'],
+      reactRefresh.configs.vite(),
+    ],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/restrict-template-expressions': ['error', { allowNumber: true }],
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    files: ['eslint.config.js'],
+    extends: [js.configs.recommended],
+    languageOptions: { globals: globals.node },
+  },
+);

package/templates/react-vite/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/react-vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-vite/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --port {{previewPort}} --strictPort",
+    "typecheck": "tsc -b",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "npm run typecheck && npm run lint && npm run format:check && vite build"
+  },
+  "dependencies": {
+    "lenis": "1.3.27",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@types/node": "26.6.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "eslint": "10.14.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.7",
+    "globals": "17.13.0",
+    "prettier": "3.9.10",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.1",
+    "vite": "8.3.5"
+  }
+}

package/templates/react-vite/src/app/App.tsx

@@ -0,0 +1,15 @@
+import { SmoothScroll } from '@/providers/SmoothScroll';
+import { Page } from '@/app/Page';
+import { routes } from '@/app/routes';
+
+// Links are plain anchors (full page loads), so the route is read once per load.
+const path = window.location.pathname.replace(/\/+$/, '') || '/';
+const Current = routes[path] ?? Page;
+
+export function App() {
+  return (
+    <SmoothScroll>
+      <Current />
+    </SmoothScroll>
+  );
+}

package/templates/react-vite/src/app/Page.tsx

@@ -0,0 +1,11 @@
+/**
+ * Fallback page. `multiclone draft` writes real pages to src/pages and sections to src/sections,
+ * then lists them in src/app/routes.ts.
+ */
+export function Page() {
+  return (
+    <main id="main" style={{ padding: '4rem', fontFamily: 'system-ui, sans-serif' }}>
+      <p>multiclone is capturing the page. The first draft appears here in a minute or two.</p>
+    </main>
+  );
+}

package/templates/react-vite/src/app/routes.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from 'react';
+import { Page } from '@/app/Page';
+
+/** Path → page component. `multiclone draft` regenerates this file for every drafted page. */
+export const routes: Partial<Record<string, ComponentType>> = {
+  '/': Page,
+};