luckiest-co 1.0.38 → 1.0.40

package/skills/luckiest-website-cloner/SKILL.md

@@ -1,289 +0,0 @@
----
-name: luckiest-website-cloner
-description: >-
-  Reverse-engineer and rebuild any website — including its WebGL/WebGPU/canvas
-  shader effects — into a clean local codebase. Use this whenever the user wants
-  to clone, replicate, rebuild, reverse-engineer, or copy a website or landing
-  page, especially designy sites with animated/shader/3D hero backgrounds. This
-  is the top-level coordinator: it does recon, classifies every page surface as
-  DOM vs GPU-rendered, routes plain layout to the luckiest-website-cloner-dom sub-skill and shader
-  surfaces to the luckiest-website-cloner-shaders sub-skill, scaffolds a build target on demand,
-  composites the two tracks, and runs automated visual QA. It also produces a
-  human-readable TEARDOWN.md (stack, measured design system, every effect with
-  its exact runtime params and how it works) — pass --analyze-only to stop there.
-  Trigger on "clone this site", "rebuild this page", "make a copy of this
-  website", "reverse-engineer this landing page", "clone this but the background
-  is some WebGL thing", any pixel-accurate site reproduction, AND on analysis
-  asks: "how did they build this", "tear down this site", "site teardown",
-  "break down this page", "what stack/animations does this site use", "how does
-  this effect work", "website blueprint", "steal this website's design",
-  "/site-teardown". Provide one or more target URLs.
-argument-hint: "<url1> [<url2> ...] [--analyze-only]"
-user-invocable: true
-license: MIT. See ATTRIBUTION.md
-allowed-tools: Bash, Read, Write, Edit, Glob, Grep, Skill, AskUserQuestion
-metadata:
-  version: "1.0.0"
-  listing_id: luckiest-website-cloner
-  author: luckiest
----
-
-# Clone Site
-
-You are cloning **$ARGUMENTS** into a clean local codebase. Your job is to be
-the **general contractor**: survey the whole building, decide which trades do
-which parts, hand each trade a precise scope, then assemble and inspect.
-
-The reason this skill exists — and why it is not just "run the DOM cloner" — is
-that a modern designy site is really **two different materials welded together**:
-
-- **DOM/CSS material** — text, layout, images, buttons, normal animations. A
-  DOM extractor reading `getComputedStyle()` reconstructs this faithfully.
-- **GPU material** — WebGL / WebGPU / canvas shader effects (the hero that
-  ripples, the 3D blob, the generative gradient). None of it exists in the DOM.
-  `getComputedStyle()` sees an empty `<canvas>`. Clone it as HTML and you get a
-  dead box where the best part of the site was.
-
-Getting a clone right is mostly getting the **routing** right: sending each
-surface to the tool that can actually see it. That routing is this skill's spine.
-
-## Sub-skills you coordinate
-
-You do not reimplement extraction. You dispatch to two sibling skills and stitch
-their output together. Read each one's `SKILL.md` before you drive it:
-
-- **`../luckiest-website-cloner-dom/SKILL.md`** — extracts DOM/CSS/assets/content section by
-  section, writes a spec file per component, dispatches parallel builders.
-- **`../luckiest-website-cloner-shaders/SKILL.md`** — evidence-gated capture-and-replay of a
-  single GPU surface (locks the surface, captures the frame with Spector.js /
-  WebGPU Inspector, builds a verified local baseline). Do NOT hand it the whole
-  page — hand it one locked canvas surface plus an output directory.
-
-If either sibling is not installed, tell the user which one is missing and stop;
-you cannot substitute the DOM track for a GPU surface or vice versa.
-
-## Pre-flight
-
-1. **Browser automation is required.** You need a browser you can drive from
-   the session — any of: the `playwright-cli` skill (recommended: it is the
-   only path with `addInitScript` preload, which makes surface routing and
-   motion capture far more reliable; see `references/playwright-cli-recipes.md`
-   for the one-call preload recipe, eval quirks, hidden-state capture, asset
-   lists), Playwright MCP, Chrome/Claude-in-Chrome MCP, or a built-in browser
-   pane with a JavaScript-eval tool (post-hoc probes + screenshots only, no
-   preload; see `references/builtin-browser-recipes.md`). If none can load the target (bot wall, auth), stop and say so —
-   this skill cannot clone from a fetch or a screenshot.
-   Build the injectable probe bundle with `node scripts/build-bundle.cjs`, inject
-   it, then evaluate `JSON.stringify(surfaceMap())` etc. For a first look use
-   `motionSummary()` (small); the full `motionProbe()`/`tokensProbe()` output
-   goes to a file — never dump it into the conversation.
-2. Parse `$ARGUMENTS` into one or more URLs; validate each and confirm it loads.
-   Multiple sites → keep each site's artifacts in its own `output/<hostname>/`.
-3. Decide the **output directory** now (default `output/<hostname>/`; never
-   build inside a notes vault or another project's source tree). Every
-   artifact — surface map, probes, specs, captures, the built project — goes
-   under it, not into the conversation.
-4. Parse `--analyze-only`. If present, the run ends after Phase 1 with
-   `TEARDOWN.md` (+ the probe JSON) as the deliverable. If the user keeps a
-   research folder, offer to copy it there with a `## Key Takeaways` section on
-   top. Don't ask first — run and report.
-
-## Phase 1 — Recon & Surface Routing (the part that makes this skill worth it)
-
-This runs BEFORE any building. Its product is a **surface map**: a list of every
-visual region tagged with what material it's made of and which track owns it.
-
-1. **Instrument, then load.** If your browser tool supports preload scripts,
-   inject `scripts/surface-map.js`'s `instrumentGetContext()` as an init script,
-   THEN navigate. This records the real context type each canvas requests —
-   ground truth for routing. If preload isn't available, navigate normally and
-   rely on the post-hoc probe (still reliable for the common case).
-2. **Let the page settle** (scroll top→bottom once so lazy canvases initialize),
-   then run `surfaceMap()` from `scripts/surface-map.js` in the page context
-   (browser MCP evaluate / Playwright `page.evaluate`). Save the JSON to
-   `output/<hostname>/surface-map.json`.
-3. **Read the routing summary.** For each surface:
-   - `WEBGL1 / WEBGL2 / WEBGPU` → **luckiest-website-cloner-shaders track**. This is a GPU effect
-     the DOM track literally cannot capture.
-   - `CANVAS2D` / `CANVAS_UNKNOWN` → inspect. Many 2D canvases are decorative
-     particle fields (luckiest-website-cloner-shaders) but some are charting libs better rebuilt
-     from data. Use judgment; default animated fullscreen 2D → luckiest-website-cloner-shaders.
-   - `VIDEO` → **luckiest-website-cloner-dom track**, re-embed the source `<video>`. Do not rebuild
-     a looping video as a canvas — that's wasted effort and looks worse.
-   - `SVG_ANIMATED` → luckiest-website-cloner-dom, but preserve the SMIL/CSS animation.
-   - everything else (all normal DOM) → **luckiest-website-cloner-dom track**.
-4. **Record the interaction model.** The surface map also fingerprints smooth
-   scroll (Lenis / Locomotive) and scroll-timeline CSS. Note these — they change
-   how luckiest-website-cloner-dom must rebuild scroll-driven sections. Confirm by scrolling: does
-   content change on its own as you scroll (scroll-driven) or only on click?
-5. **Probe the motion runtime** — run `scripts/motion-probe.js` (`motionProbe()`;
-   with `instrumentMotion()` preloaded when using playwright-cli) and save to
-   `motion.json`. This asks the live libraries for their real params instead of
-   reading a minified bundle: every GSAP tween + `ScrollTrigger.getAll()`
-   (trigger/pin/start/end/scrub/vars), WAAPI animations with keyframes, CSSOM
-   `@keyframes` + scroll-timelines, Lenis options, Swiper/Splide params,
-   SplitText wrappers, transition signatures, IO registrations + input listeners
-   (instrumented mode). `summary.animationStack` is the one-line answer to "what
-   makes this site move".
-6. **Probe the design system** — run `scripts/tokens-probe.js` (`tokensProbe()`)
-   at 1440, 768, and 390 → `tokens-<w>.json`. Frequency-ranked palette, type
-   scale, fonts + `@font-face` src, spacing rhythm, radii, shadows, z-layers,
-   breakpoints, `:root` custom props, section list with offsets, fixed chrome.
-   These values ARE the design tokens luckiest-website-cloner-dom writes in its foundation step.
-7. **Sweep** — scroll in ~viewport steps taking screenshots; hover the obvious
-   interactives; click tabs/accordions. Anything that moves but isn't explained
-   by `motion.json` gets tagged OBSERVED. Only now, if a specific effect is
-   still unexplained, read its source: take the bundle URL from
-   `read_network_requests`, `curl` it to the output dir, and `grep` around the
-   selector — never WebFetch a bundle (the summarizer drops exactly the numbers
-   you need).
-8. **Write the routing plan** to `output/<hostname>/ROUTING.md`: the section
-   topology top-to-bottom, each section's track, and for GPU surfaces their
-   selector + bounding box + guessed driver (three.js / unicorn-studio / etc.),
-   so the composite step knows exactly where each effect sits and at what z-index.
-9. **Write `TEARDOWN.md`** per `references/teardown.md` — stack, measured
-   design system, effects table, reveals with exact params, assets, build plan.
-   Every claim tagged CONFIRMED / OBSERVED / INFERRED. This is the briefing the
-   builders get and the whole deliverable of `--analyze-only`. **Stop here if
-   `--analyze-only`.**
-
-If the routing summary shows **no GPU surfaces**, this is a pure DOM clone —
-proceed with just the luckiest-website-cloner-dom track and skip the luckiest-website-cloner-shaders phase. Say so.
-
-## Phase 2 — Scaffold the build target (on demand)
-
-Only scaffold once you know what you're building. Choose the lightest substrate
-that fits what you found — don't force a heavy framework onto a static page:
-
-- Static/marketing page, GPU effects present → **Vite + vanilla/TS** (the
-  luckiest-website-cloner-shaders baselines are framework-free; Vite composites them cleanly).
-- App-like, component-heavy, needs routing/SSR → **Next.js + Tailwind** (matches
-  the luckiest-website-cloner-dom builder conventions).
-- User specified a stack → honor it.
-
-Scaffold into `output/<hostname>/site/`. Verify it builds empty before adding
-anything. Record the choice in `ROUTING.md`. (Rationale: the old template hard-
-wired Next.js for every clone; that's overkill for a static shader showcase and
-fights the framework-free shader baselines. Pick per target.)
-
-## Phase 3 — Run the two tracks
-
-**Choose the DOM strategy first.** If the target ships scope-attributed CSS
-(`data-v-*`, CSS Modules, styled-components hashes, `_ngcontent`) and the user
-wants fidelity over a maintainable codebase, take the **fidelity fast path**
-(`references/fidelity-fast-path.md`): captured post-hydration HTML + the site's
-own stylesheets + rewritten paths, rebuilding only behaviors. Validated at
-0.02–0.06% pixel diff in one pass. Otherwise run luckiest-website-cloner-dom's rebuild. State the
-choice in `ROUTING.md`.
-
-**Choose the DOM strategy first.** If the target ships scope-attributed CSS
-(, CSS Modules, styled-components hashes, ) and the user
-wants fidelity over a maintainable codebase, take the **fidelity fast path**
-(): captured post-hydration HTML + the site's
-own stylesheets + rewritten paths, rebuilding only behaviors. Validated at
-0.02–0.06% pixel diff in one pass. Otherwise run luckiest-website-cloner-dom's rebuild. State the
-choice in .
-
-Run them **concurrently** — they touch different files and don't depend on each
-other until composite. But note (from the research): decomposing into many small
-builders is a choice for **speed and edit-isolation**, not because a strong model
-can't hold the context. With a capable model, prefer **fewer, larger** builder
-agents scoped to a whole section over many tiny ones; split only when a section
-is genuinely independent (distinct card variants, separate interactive widgets).
-Over-splitting adds merge overhead and coordination cost for no fidelity gain.
-
-**DOM track:** Follow `../luckiest-website-cloner-dom/SKILL.md`. Feed it the section topology from
-`ROUTING.md`, `TEARDOWN.md`, and the probe JSON (`tokens-*.json` seeds the
-design tokens verbatim; `motion.json` gives each section's interaction model and
-exact animation params — builders reproduce those numbers, not approximations)
-plus the output dir. It produces the page shell, styled sections,
-downloaded assets, and leaves **placeholder mounts** where GPU surfaces belong
-(a positioned empty container with the right id/size/z-index from the surface
-map). It must not try to rebuild the effect itself.
-
-**Assets you can't obtain or rebuild:** some assets are cross-origin/blocked, or
-are brand identity you shouldn't copy into a learning clone. Resolve every asset
-through the ladder in `../luckiest-website-cloner-dom/references/asset-resolution.md` — REAL first,
-then reconstruct, then GENERATE a decorative substitute via the Higgsfield MCP
-(never for logos/brand/identity), then placeholder — and carry the tier labels
-into the report. This is optional: if Higgsfield isn't connected, tier 3 degrades
-to placeholder. Never let a generated asset be reported as the real one.
-
-**GPU track:** For each GPU surface, follow `../luckiest-website-cloner-shaders/SKILL.md` once,
-handing it: the locked surface selector, its bounding box, the guessed driver,
-and an output dir `output/<hostname>/effects/<surface-id>/`. It returns a
-self-contained, verified effect module (WebGL/WebGPU replay) that renders into a
-canvas you can mount.
-
-## Phase 4 — Composite
-
-Wire the GPU effect modules into the DOM shell's placeholder mounts. See
-`references/compositing.md` for the mount contract (sizing, DPR, z-index,
-pointer-events, teardown, reduced-motion). The composite is where most "looks
-wrong" bugs actually live — an effect that renders fine in isolation can sit at
-the wrong z-index, block clicks, or ignore DPR once mounted. Verify each mount
-in the live page, not just the isolated baseline.
-
-## Phase 5 — Automated Visual QA (not eyeballing)
-
-Do NOT declare done by looking at a screenshot. Run a real pixel diff — but
-diff the two materials differently, because GPU effects are **nondeterministic**
-(they animate; two screenshots never match pixel-for-pixel):
-
-- **DOM regions** → Playwright `toHaveScreenshot()` (pixelmatch under the hood),
-  original vs clone at 1440 / 768 / 390. Tune `maxDiffPixelRatio` / `threshold`
-  rather than demanding zero diff (anti-aliasing alone causes false diffs).
-- **GPU regions** → **mask them** in the DOM diff (Playwright `mask:` option) so
-  their animation doesn't swamp the result, and verify them separately: does the
-  effect render, animate, and respond to pointer/scroll like the original?
-
-See `references/visual-qa.md` for the exact harness, thresholds, masking, and
-the harness gotchas (no reducedMotion, no networkidle against Vite, compare
-section heights before pixels, diff per viewport slice).
-For every real discrepancy: trace it to the spec (was the value extracted wrong?)
-or the build (spec right, builder wrong?) and fix at the source.
-
-## Completion report
-
-- `TEARDOWN.md` path + the one-line stack summary (`motion.json › summary`)
-- Section topology and per-section routing (DOM vs which GPU track)
-- GPU surfaces found, their drivers, and replay fidelity (SOURCE / PARTIAL /
-  approximate — carry luckiest-website-cloner-shaders's honesty labels through; don't upgrade them)
-- Build substrate chosen and why
-- Visual QA: DOM pixel-diff pass rates per breakpoint + GPU verification notes
-- Known gaps (cross-origin canvases that blocked readback, effects only
-  approximated, anything the surface map flagged CANVAS_UNKNOWN)
-
-## Handoff
-
-After the completion report, **ask one question and act on it**:
-
-> "Clone verified (diff numbers above). Make it yours now? — re-skin with your
-> brand/copy/assets, three design directions, tweak panel on the pick."
-
-- **Yes** → invoke the `luckiest-website-cloner-remix` skill with this run's output directory
-  (`Skill: luckiest-website-cloner-remix`, args `<output-dir>`). It consumes TEARDOWN.md,
-  tokens-*.json, motion.json, and site/ directly and stops for the user's input
-  at its own checkpoints. From the user's side the whole thing is one command.
-- **No / later** → end with: `/luckiest-website-cloner-remix <output-dir>` re-enters at any time.
-
-Do not start re-skinning inside luckiest-website-cloner; luckiest-website-cloner ends at a verified copy
-and luckiest-website-cloner-remix owns everything after.
-## Guardrails
-
-Clone for migration, for recovering your own lost source, or for learning how a
-build works. Do not use it to pass off someone else's brand or design as your
-own, for phishing or impersonation, or against a site whose terms forbid
-reproduction. Logos, brand assets, and copy belong to their owners.
-
-Stop and ask the user before continuing if any of these are true:
-
-- The target looks like it exists to be impersonated: a bank or wallet login, a
-  checkout, an account or password page.
-- The page is behind a login, a paywall, or a bot wall. Never supply
-  credentials, cookies, session tokens, or a stored browser profile to get past
-  one, and never work around the block.
-- The page holds personal data about real people.
-
-Capture only what renders publicly. Do not read or copy credentials, cookies,
-local storage, or session storage from the target.

package/skills/luckiest-website-cloner-dom/SKILL.md

@@ -1,170 +0,0 @@
----
-name: luckiest-website-cloner-dom
-description: >-
-  Extract and rebuild the DOM/CSS layer of a web page — layout, typography,
-  colors, spacing, real content, assets, and normal interactions — into clean
-  components, section by section, from exact getComputedStyle() values rather
-  than guesses. This is the DOM/CSS track: it deliberately does NOT handle
-  WebGL/WebGPU/canvas shader surfaces (those go to luckiest-website-cloner-shaders). Usually
-  driven by the luckiest-website-cloner coordinator, but can be used directly when the user
-  wants to rebuild a page's markup/styling and there are no GPU-rendered
-  effects. Trigger on "rebuild this section", "extract the CSS/layout", "clone
-  the markup and styling of this page", or the DOM half of a full site clone.
-argument-hint: "<url> | <output-dir with surface-map.json + ROUTING.md>"
-user-invocable: false
-license: MIT. See ATTRIBUTION.md
-allowed-tools: Bash, Read, Write, Edit, Glob, Grep
-metadata:
-  version: "1.0.0"
-  listing_id: luckiest-website-cloner-dom
-  author: luckiest
----
-
-# DOM Clone
-
-Rebuild the DOM/CSS layer of a page as clean components whose every value is
-**measured, not estimated**. The difference between a clone that reads as
-"pixel-perfect" and one that reads as "AI slop" is almost entirely whether the
-spacing, type scale, and colors are the site's real computed values or an
-approximation. So the whole method is built to remove guessing.
-
-**Scope boundary — read this first.** This track handles DOM/CSS only. Any
-`<canvas>` painting WebGL/WebGPU/2D pixels is invisible to `getComputedStyle()`
-and belongs to `luckiest-website-cloner-shaders`. When you meet a GPU surface (the surface map
-tags them, or you see a `<canvas>` you can't style your way into), do NOT rebuild
-it — leave a **placeholder mount** (below) and move on. Rebuilding a shader as
-HTML is the classic failure that makes a clone look empty.
-
-## Inputs
-
-- Driven by luckiest-website-cloner: you get an output dir containing `surface-map.json` and
-  `ROUTING.md`. Build only the sections routed to the DOM track; leave mounts for
-  GPU surfaces.
-- Standalone: you get a URL. Do a quick recon first (screenshots + the interaction
-  sweep below). If you spot GPU `<canvas>` surfaces, tell the user those need the
-  luckiest-website-cloner-shaders track and build the DOM around them.
-
-Requires a browser MCP (Chrome/Playwright/Puppeteer). Keep large extraction
-artifacts in the output dir, not the conversation.
-
-## The method: extract → spec → build → verify
-
-### 1. Foundation first (sequential, do it yourself)
-
-Nothing can be built until the shared ground exists, because every later
-component depends on it:
-
-- **Design tokens** — run `../luckiest-website-cloner/scripts/tokens-probe.js`
-  (`tokensProbe()`) at 1440/768/390 if the coordinator hasn't already left
-  `tokens-*.json` in the output dir. Its frequency-ranked palette, type scale,
-  spacing, radii, shadows, and `:root` custom props ARE the tokens — write them
-  as CSS variables / Tailwind theme, keeping the site's own `--names` when it
-  has them. Colors and fonts wrong here poison every component.
-- **Motion params** — likewise take `motion.json` (`../luckiest-website-cloner/scripts/
-  motion-probe.js`) as the source for every GSAP/ScrollTrigger/Lenis/WAAPI
-  value a spec needs. A spec that says `scrub: 1.2, start: "top top", end:
-  "+=200%"` came from the runtime; one that says "scrubs on scroll" is a guess.
-- **Fonts** — identify actual `font-family` on headings/body/labels; wire up the
-  same families (self-hosted or Google) so metrics match.
-- **Global assets** — favicons, logos, and site-wide images to the project.
-  Resolve each through the asset ladder in `references/asset-resolution.md`:
-  download the REAL file first; only fall back to reconstructing, generating
-  (Higgsfield, for decorative assets — never brand identity), or a placeholder,
-  and label which tier was used. This keeps the clone honest about what's real.
-- **Global behaviors** — smooth-scroll library (Lenis/Locomotive), scroll-snap,
-  global keyframes. See `references/interaction-fingerprints.md` to detect and
-  reproduce these; they change how sections must be built.
-
-Verify the empty shell builds before going further.
-
-### 2. Extract each section with exact values
-
-For each DOM section top-to-bottom, use the browser to capture — don't hand-
-measure:
-
-- A section screenshot (for the builder's reference and later QA).
-- **Computed styles** for every meaningful element via `getComputedStyle()` —
-  real px/color/weight values, not "looks like `text-lg`".
-- **Real content** — verbatim text, alt text, and every image/`<img>`/background
-  image in the section, including **layered/overlay** images (a hero is often a
-  background + a foreground mockup + an icon; miss the overlay and it looks bare).
-  Resolve each asset through `references/asset-resolution.md` (REAL → RECONSTRUCT
-  → GENERATE → PLACEHOLDER), tagging any that couldn't be downloaded.
-- **All states, not just the default** — for tabs/accordions click each and
-  record per-state content; for scroll- or hover-triggered changes, capture the
-  before AND after computed styles and the transition (duration/easing) plus the
-  exact trigger. See `references/interaction-fingerprints.md`.
-
-### 3. Write a spec file — the contract
-
-Write one spec per section to `<output>/specs/<section>.spec.md` BEFORE building.
-This is the contract between measurement and construction: the builder works from
-the spec, not from its memory of a browser session, so it can't drift into
-guessing. A spec has: target file, screenshot path, **interaction model**
-(static / click / scroll / hover / time), exact computed styles per element,
-per-state content, assets with local paths, verbatim text, and responsive
-behavior at 1440 / 768 / 390. If a builder would have to invent any value, the
-spec isn't done yet.
-
-For GPU surfaces in this section, the spec says only: **placeholder mount** — a
-positioned empty container with the id, size, z-index, and pointer-events from
-the surface map, for luckiest-website-cloner-shaders to fill later. Nothing more.
-
-### 4. Build — size agents to the model, not to dogma
-
-Dispatch builders that each receive their spec inline (never "go read the spec").
-On agent granularity: splitting a page into many tiny builders is a choice for
-**speed and edit-isolation**, not a fidelity requirement — a capable model holds
-a whole section's spec fine. So prefer **one builder per section** by default,
-and split further only when a section contains genuinely independent pieces
-(three distinct card variants, separate interactive widgets) that benefit from
-parallel isolation. Over-splitting just adds merge and coordination cost.
-
-If builders run in parallel and might touch shared files, isolate them (git
-worktrees or separate output subtrees) and merge with the section topology in
-hand. Each builder verifies its own typecheck/build before finishing.
-
-### 5. Verify with a real diff
-
-After assembly, run an automated pixel diff (Playwright `toHaveScreenshot()`),
-original vs clone, at all three breakpoints — **masking any GPU placeholder
-regions** so their emptiness/animation doesn't dominate the result. Tune
-`maxDiffPixelRatio` rather than demanding zero diff (anti-aliasing causes false
-positives). For each real discrepancy, decide: was the spec value wrong
-(re-extract, fix spec) or did the builder ignore a correct spec (fix component)?
-Fix at the source, not with a compensating fudge.
-
-## Output
-
-- `site/` (or the coordinator's chosen substrate) with styled sections + mounts
-- `specs/*.spec.md` — one per section, the audit trail
-- Downloaded assets under the project's public dir
-- QA diff results per breakpoint + list of placeholder mounts left for GPU track
-
-## What not to do
-
-- Don't clone from a screenshot; extract the real DOM/CSS/content.
-- Don't rebuild a `<canvas>` shader/3D effect as HTML — leave a mount.
-- Don't approximate a computed value you could have measured.
-- Don't freeze a `<video>` or animated SVG to a static image — re-embed / keep it.
-- Don't build a click-based UI when the original is scroll-driven; settle the
-  interaction model before building (it's a rewrite, not a tweak, to change later).
-
-## Guardrails
-
-Clone for migration, for recovering your own lost source, or for learning how a
-build works. Do not use it to pass off someone else's brand or design as your
-own, for phishing or impersonation, or against a site whose terms forbid
-reproduction. Logos, brand assets, and copy belong to their owners.
-
-Stop and ask the user before continuing if any of these are true:
-
-- The target looks like it exists to be impersonated: a bank or wallet login, a
-  checkout, an account or password page.
-- The page is behind a login, a paywall, or a bot wall. Never supply
-  credentials, cookies, session tokens, or a stored browser profile to get past
-  one, and never work around the block.
-- The page holds personal data about real people.
-
-Capture only what renders publicly. Do not read or copy credentials, cookies,
-local storage, or session storage from the target.

package/skills/luckiest-website-cloner-remix/SKILL.md

@@ -1,202 +0,0 @@
----
-name: luckiest-website-cloner-remix
-description: >-
-  Turn a cloned (or any measured) website into YOUR site: re-skin it with your
-  brand, copy, and assets; generate three deliberately different design
-  directions as token/motion/shader overrides and render them side by side;
-  then put a live tweak panel on the direction you pick. This is the step after
-  /luckiest-website-cloner — it consumes the clone's TEARDOWN.md, tokens-*.json, motion.json,
-  and site/ and never re-probes. Use when the user says "/remix", "remix this
-  clone", "make this mine", "re-skin this", "give me three versions of this
-  site", "variations of this design", "add a tweak panel", "let me tune the
-  colors/spacing/motion", or has just approved a clone and wants to move from
-  copying to owning. NOT for cloning (use /luckiest-website-cloner) and NOT for building a
-  site from scratch.
-argument-hint: "<clone-dir or site-dir> [--phase reskin|directions|panel]"
-user-invocable: true
-license: MIT. See ATTRIBUTION.md
-allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
-metadata:
-  version: "1.0.0"
-  listing_id: luckiest-website-cloner-remix
-  author: luckiest
----
-
-# Remix Site
-
-A clone is a **measured design system plus a proven structure**. The teardown
-already enumerated every knob — palette, type scale, spacing rhythm, motion
-params, shader props, section order. Remixing means changing what flows
-through those knobs, in three phases that each **stop for the user's call**
-(unlike `/luckiest-website-cloner`, which runs autonomously):
-
-1. **Re-skin** — swap the three things that make it *theirs*: copy, brand, hero
-   assets. Output: a de-branded template. Non-negotiable and first.
-2. **Directions** — three deliberately different combinations of the big forks
-   (palette mood × type pairing × hero treatment × motion personality), rendered
-   side by side. The user picks one.
-3. **Tweak panel** — the chosen direction's 10–15 real knobs made live in the
-   page, with permalink state. Not 80 sliders; the ones they'll keep turning.
-
-`--phase` runs a single phase (e.g. a second re-skin for another client, or a
-panel on a site that never came from the cloner).
-
-## Inputs (the luckiest-website-cloner contract)
-
-Resolve `$ARGUMENTS` to a directory and look for:
-
-| File | Used for |
-|---|---|
-| `TEARDOWN.md` | stack, effects table, assets table, known gaps |
-| `tokens-*.json` | the measured design system — the knob list |
-| `motion.json` | exact animation params — the motion knobs |
-| `surface-map.json` | which regions are GPU (shader knobs live here) |
-| `site/` | the rebuilt project (Vite/Next) |
-| `assets/` or `site/public/assets/` | original assets, tiered |
-
-If only `site/` exists (not a clone), run `tokens-probe.js` and
-`motion-probe.js` from `../luckiest-website-cloner/scripts/` against the dev server once to
-produce the JSON — then proceed. Never re-probe when the JSON is present.
-
-## Phase 0 — Tokenize (mechanical, do it before anything)
-
-The clone's CSS is full of literal values (`#1f3bff`, `32.04px`). Nothing can be
-varied until those literals become variables. Run:
-
-```bash
-node scripts/tokenize-css.cjs <site>/src/<site>.css <tokens-1440.json> <site>/src
-```
-
-It rewrites the stylesheet so every measured token value goes through
-`var(--rx-<role>, <original>)` and writes `remix-tokens.css` (the defaults). If
-the site already exposes its own `--vars` (Nuxt/Vue sites often do), the script
-aliases those instead of inventing new names — keep the site's vocabulary.
-
-Route motion through a config too: the clone's behavior JS should read from
-`window.__remix.motion` (seeded from `motion.json` → `remix-motion.js`), and
-shader mounts from `window.__remix.shaders`. If the builder hard-coded them,
-hoist now. This is the one code change remix makes to the clone — everything
-after is data.
-
-Verify the site still renders identically (`qa/diff.mjs` against itself before
-/after: must be 0%). **Show the user the knob list** (`remix/knobs.json`) and
-stop: "These are the N things we can turn. Re-skin next?"
-
-## Phase 1 — Re-skin
-
-Ask for, in one batch: **brand** (name, logo file or "generate a placeholder
-mark", primary + accent colors or "derive from logo"), **copy** (a doc/URL to
-pull from, bullet points to expand, or "placeholder in their structure"), and
-**hero/section assets** (files, or "generate").
-
-Then:
-- **Copy** — replace every text node section by section, keeping the
-  original's *shape* (eyebrow / headline / sub / CTA / card counts). Headline
-  lengths matter for layout: match ±20% characters or the hero reflows. Note
-  any overflow in the report.
-- **Brand** — logo into the header/footer slots; primary/accent into
-  `remix-tokens.css`; favicon/OG.
-- **Assets** — resolve through `../luckiest-website-cloner-dom/references/asset-resolution.md`
-  with the roles flipped: the original's REAL assets are now the thing to
-  *remove*. Decorative (hero background, textures, ambient imagery) →
-  GENERATE via Higgsfield using the original's composition as the brief (aspect,
-  subject placement, mood) — see `references/reskin.md` for the brief
-  template. Identity (their logo, their people, their product shots) → must be
-  replaced, never kept. Fonts: if the original's are commercially licensed,
-  swap to an open pairing with matching metrics (`references/reskin.md` has
-  the lookup); if open, keep.
-- **Remove** analytics, their API endpoints, their links.
-
-Render, screenshot the hero + two sections, **stop**: "This is the template
-with your brand. Directions next?"
-
-## Phase 2 — Three directions
-
-**Ask first, one batch, before touching anything** (this is the question that
-decides whether the directions are coats of paint or actually different sites):
-
-1. **Amplitude** — *subtle* / *medium* / *big*?
-   | | moves | layer |
-   |---|---|---|
-   | subtle | palette, accent, motion timing, shader colors | `overrides.json` only |
-   | medium | + surface (radius/border/shadow), density (spacing ×), type scale + weights, grain | + `patch.css` |
-   | big | + hero treatment (photo → type-only / GPU-led / engraving), layout (grid ↔ editorial ↔ bento), section order, nav style, own hero asset per direction | + `patch.js` + generated assets |
-   If unsure, recommend **medium** — subtle reads as "same site, different coat"
-   side by side; big costs generations.
-2. **Anchors** — "any aesthetics in mind?" *none* / *describe it* / *reference
-   sites or images* / *pull from my taste library* (`/taste-vault`). With none:
-   nearest-legit / opposite / wildcard from `references/directions.md`. With
-   anchors: one direction per anchor, built *toward* it, and say which fork each
-   anchor maps to so the user sees the translation.
-
-Not five. Five converge; three deliberately different forks give a real choice.
-Each direction is **data + an optional patch layer**, scoped to
-`:root[data-rx="<slug>"]` so directions never collide:
-
-```
-remix/directions/<slug>.json
-{ "name": "...", "thesis": "one line",
-  "tokens": { "--rx-accent": "#…", "--rx-font-display": "…", "--rx-space-unit": "…" },
-  "motion": { "reveal": { "y": 22, "duration": 0.7, "ease": [.16,1,.3,1] }, "stagger": 0.08 },
-  "shaders": { "hero": { "colorFront": "#…", "intensity": 0.5 } },
-  "assets": { "hero-bg": "generated/<slug>-hero.jpg" } }
-remix/directions/<slug>.patch.css   (medium+)  surface / density / type scale under :root[data-rx="<slug>"]
-remix/directions/<slug>.patch.js    (big)      structural: hero variant, section order, layout classes
-```
-
-`apply-overrides.cjs` picks up `<slug>.patch.css` / `.patch.js` next to the
-JSON automatically. Patches must be **additive and scoped** — never edit the
-base HTML/CSS for a direction, or the other two break.
-
-Derive the three from the original's *axes*, not from taste alone — see
-`references/directions.md` for the fork table (palette mood, type pairing, hero
-treatment, density, motion personality) and the rule that each direction must
-differ on **at least three** forks. If the user has a taste library
-(`/taste-vault` or reference images), pull the directions from there. Generate
-per-direction hero assets only for the decorative layer.
-
-Apply each with `node scripts/apply-overrides.cjs <site> remix/directions/<slug>.json`
-(writes `remix-tokens.<slug>.css` + `remix-motion.<slug>.js`; the site loads
-the active set via `?rx=<slug>`). Then `node scripts/gallery.cjs <site>` writes
-`<site>/directions.html`: all directions **live side by side in iframes** (real
-shaders + motion), synced scroll, click-a-name fullscreen, and a *pick* button
-that stores the choice in `localStorage.rx-pick`. Open it in the user's browser
-(this is the deliverable — not a static contact sheet), and also render
-`remix/directions.jpg` for the report. **Stop** with the URL and one line per
-direction: thesis + what changed. The user picks (read `rx-pick` or ask).
-
-## Phase 3 — Tweak panel
-
-On the pick only. Choose **10–15 knobs** from `knobs.json` — the ones that
-matter for *this* direction (accent, display font size base, section spacing
-unit, radius, reveal distance/duration/ease, stagger, shader intensity/colors,
-hero gradient angle, grain opacity). Write `remix/panel.json`
-(`references/tweak-panel.md` has the schema: type, range, step, default, CSS
-var or motion/shader path) and inject `scripts/tweak-panel.js` into the site.
-
-The panel: fixed, collapsible, grouped (Color / Type / Space / Motion / GPU),
-writes CSS vars live, pokes `window.__remix` for motion/shader knobs and
-re-renders the affected mount, serializes state into `#rx=` so a URL is a
-permalink, and has Copy JSON / Reset / Export-as-direction. Keyboard: `` ` ``
-toggles it. It is **dev-only** — stripped from the production build.
-
-Verify: every knob visibly changes the page, permalink round-trips, reset
-returns to the direction's defaults. Screenshot with the panel open.
-
-## Completion report
-
-- Template: what was replaced (copy sections, brand slots, assets by tier —
-  GENERATED assets listed), fonts kept/swapped and why
-- Directions: the contact sheet + the three theses + which was picked
-- Panel: knob list, permalink example
-- Still theirs: anything structural you kept verbatim that the user should
-  know about (section order, interaction patterns) — a remix is legitimate
-  because the *expression* is new; say plainly what the skeleton still owes
-  to the original
-
-## Guardrails
-
-Phase 1 is mandatory before anything ships: no remix leaves with the
-original's logo, copy, people, product imagery, or licensed fonts. If the user
-asks to skip re-skinning and just "change the colors", say why that's still
-their site and do Phase 1 first.