multiclone 0.2.1 → 0.3.0

package/skills/multiclone/SKILL.md

@@ -13,12 +13,22 @@ The goal is a rebuild that a visitor can't tell apart from the original at any s
 
 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.
+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 and media, the **converted page** (below), the clone running on localhost and an offline copy of the original. Status lists all the links.
+4. **Polish the converted page; never delete or redraw it.** The first draft is the original page converted to React: same markup, same class names, the site's real CSS and its own animation scripts. It already looks and moves like the original, so check it against the original with `compare` before changing anything, then improve it section by section (layout, `@media` fixes, missing hovers). Deleting a section and writing it again from screenshots throws that fidelity away and costs half an hour; don't. 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.
+Run `start` again to resume after a crash or restart (also from inside the workspace): finished captures are reused and converted pages are never overwritten.
+
+### What the converted page looks like
+
+- `src/pages/<Page>.tsx`: the page wrappers around the section components; on mount it runs the original scripts.
+- `src/sections/<page>/<Name>/<Name>.tsx` + `<Name>.css`: one component per section, original markup as JSX, with the CSS rules only that section uses.
+- `src/styles/original/<page>/base.css`: the rest of the site's real stylesheets (shared rules), URLs pointed at `public/media`.
+- `public/original/<page>/*.js`: the site's own scripts (GSAP setups, Lottie, Webflow, sliders), unchanged; the list and order live in `src/original/<page>.ts`, run by `src/lib/original.ts`. Tracking, consent and app-runtime bundles are left out.
+- `src/original/elements.d.ts`: types for custom tags such as `dotlottie-player`.
+
+Trade-off: the original class names stay (for example Webflow's `hero_title is-large`), because the real CSS and scripts depend on them. Rename a class only together with its CSS rules and any script that queries it. To port a script to React, rewrite that behaviour in the section (the libraries are installed from npm, e.g. `gsap`), remove its entry from `src/original/<page>.ts`, then compare; one script at a time. `public/original` and `src/styles/original` are excluded from Prettier on purpose.
 
 Every command prints a short summary; details live in files. Read big things with `inspect` instead of opening whole files.
 
@@ -43,7 +53,7 @@ Run them from the terminal: `multiclone <command>`, and `multiclone <command> --
 | `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).                                                                                                                                                                                                                                                                                                                                                     |
+| `draft`        | Converts a capture into the React project: original markup as section components, real CSS split per section, original scripts kept (`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.                                                                                                                                                                                       |
@@ -90,7 +100,7 @@ Before coding, write a short plan: the sections and their components, the techni
 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.
+2. **Then each section:** read its `section.md`. If a converted section exists (`src/sections/<page>/<Name>/`), polish it in place: fix what compare flags, turn repeated markup into data plus a map where it helps, and port its script to React only when you can match the motion. Never delete it to start over. 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`;

package/templates/react-vite/index.html

@@ -6,7 +6,7 @@
     <title>{{title}}</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="mc-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/templates/react-vite/src/main.tsx

@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client';
 import { App } from '@/app/App';
 import '@/styles/index.css';
 
-const container = document.getElementById('root');
-if (!container) throw new Error('Missing #root container');
+const container = document.getElementById('mc-root');
+if (!container) throw new Error('Missing #mc-root container');
 
 createRoot(container).render(
   <StrictMode>

package/templates/react-vite/src/styles/index.css

@@ -1,4 +1,3 @@
 @import './fonts.css';
 @import './tokens.css';
 @import './base.css';
-@import './draft.css';