luckiest-co 1.0.13 → 1.0.15

package/skills/luckiest-website-cloner-remix/scripts/tweak-panel.js

@@ -0,0 +1,169 @@
+/**
+ * tweak-panel.js — live knobs for a remixed site. Dev-only; strip from prod.
+ *
+ * Usage (in main.ts, after remix-loader):
+ *   import { mountTweakPanel } from './remix/tweak-panel.js';
+ *   import panel from '../remix/panel.json';
+ *   if (import.meta.env.DEV) mountTweakPanel(panel);
+ *
+ * panel.json:
+ *   { "title": "...", "slug": "<direction>",            // slug: only mount when this direction is active (optional)
+ *     "presets": { "name": { "<knob id>": value, ... } },  // one-click states layered on the direction
+ *     "knobs": [
+ *       { "id": "--rx-color-1", "label": "Accent", "group": "Color", "type": "color", "default": "#1f3bff" },
+ *       { "id": "--p-h1-scale", "label": "Display scale", "group": "Type", "type": "number", "default": 1, "min": .7, "max": 1.6, "step": .02 },
+ *       { "id": "--p-radius", "label": "Radius", "group": "Space", "type": "length", "default": "0px", "min": 0, "max": 24, "step": 1, "unit": "px" },
+ *       { "id": "motion.reveal.duration", "label": "Reveal", "group": "Motion", "type": "number", "default": .7, "min": .1, "max": 2, "step": .05 },
+ *       { "id": "shaders.hero.colorFront", "label": "Paper tint", "group": "GPU", "type": "color", "default": "#9FADBC" },
+ *       { "id": "--font-sans", "label": "Body face", "group": "Type", "type": "select", "options": [...], "labels": [...], "default": "..." } ] }
+ *
+ * Knob ids starting with "--" are CSS custom properties (set live on :root).
+ * Dotted ids are paths into window.__remix (motion.* / shaders.*); the panel
+ * calls __remix.apply({motion:{...}}) and dispatches 'rx:change' so behaviors
+ * and shader mounts re-read. State lives in location.hash as #rx=<b64 json>
+ * → any URL is a permalink. ` toggles, / focuses search. Copy JSON exports an
+ * overrides file you can feed back to apply-overrides.cjs as a new direction.
+ */
+export function mountTweakPanel(config) {
+  const rx = window.__remix || (window.__remix = { apply() {} });
+  if (config.slug && rx.slug && rx.slug !== config.slug) return null;
+  const knobs = config.knobs || [];
+  const presets = config.presets || {};
+  const state = {};
+
+  /* ---- state ---- */
+  const b64 = (s) => btoa(unescape(encodeURIComponent(s))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  const unb64 = (s) => decodeURIComponent(escape(atob(s.replace(/-/g, '+').replace(/_/g, '/'))));
+  const read = () => { try { const m = location.hash.match(/rx=([A-Za-z0-9_-]+)/); return m ? JSON.parse(unb64(m[1])) : {}; } catch { return {}; } };
+  const write = () => { history.replaceState(null, '', location.pathname + location.search + (Object.keys(state).length ? '#rx=' + b64(JSON.stringify(state)) : '')); };
+  const setPath = (obj, dotted, v) => { const p = dotted.split('.'); let o = obj; for (let i = 0; i < p.length - 1; i++) o = o[p[i]] = o[p[i]] || {}; o[p[p.length - 1]] = v; return obj; };
+  const applyOne = (k, v) => {
+    if (k.id.startsWith('--')) document.documentElement.style.setProperty(k.id, typeof v === 'number' && k.unit ? v + k.unit : String(v));
+    else rx.apply(setPath({}, k.id, v));
+  };
+  const set = (k, v, persist = true) => { if (v === k.default) delete state[k.id]; else state[k.id] = v; applyOne(k, v); if (persist) write(); };
+
+  /* ---- UI ---- */
+  const css = `
+    #rx-panel{--w:320px;position:fixed;top:12px;right:12px;z-index:2147483000;width:var(--w);max-height:calc(100vh - 24px);display:flex;flex-direction:column;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8e8e8;background:rgba(14,14,16,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
+    #rx-panel[hidden]{display:none}
+    #rx-panel header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
+    #rx-panel header b{font-weight:600;letter-spacing:.02em} #rx-panel header span{opacity:.5;font-size:10px;margin-left:auto;white-space:nowrap}
+    #rx-panel .tools{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
+    #rx-panel .tools input[type=search]{flex:1;min-width:90px;background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:4px 7px;font:inherit}
+    #rx-panel .tools select{background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:4px 6px;font:inherit;max-width:120px}
+    #rx-panel .body{overflow:auto;flex:1}
+    #rx-panel details{border-bottom:1px solid rgba(255,255,255,.06)}
+    #rx-panel summary{cursor:pointer;padding:8px 12px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;font-size:10px;user-select:none;display:flex;justify-content:space-between}
+    #rx-panel summary i{font-style:normal;opacity:.6}
+    #rx-panel label{display:grid;grid-template-columns:1fr 112px;align-items:center;gap:8px;padding:5px 12px} #rx-panel label.hide{display:none}
+    #rx-panel label small{opacity:.5;display:block;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    #rx-panel label.dirty > div:first-child{color:#9fe1ff}
+    #rx-panel input[type=range]{width:100%;accent-color:#9fe1ff}
+    #rx-panel input[type=color]{width:100%;height:24px;border:0;background:none;padding:0;cursor:pointer}
+    #rx-panel input[type=text],#rx-panel input[type=number],#rx-panel label select{width:100%;background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:3px 6px;font:inherit}
+    #rx-panel .val{opacity:.6;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
+    #rx-panel .range-row{display:grid;grid-template-columns:1fr 48px;gap:6px;align-items:center}
+    #rx-panel footer{display:flex;gap:6px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
+    #rx-panel footer button,#rx-panel .tools button{flex:1;background:rgba(255,255,255,.08);color:inherit;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 8px;font:inherit;cursor:pointer;white-space:nowrap}
+    #rx-panel footer button:hover,#rx-panel .tools button:hover{background:rgba(255,255,255,.14)}
+    #rx-panel .grip{position:absolute;left:-6px;top:0;bottom:0;width:12px;cursor:ew-resize}`;
+  const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style);
+  // Knob ids, labels, group names and preset keys come from the overrides JSON,
+  // which is derived from the CLONED site's own token names. None of it is
+  // trusted, so every one of them is set as text, never as markup.
+  const tag = (name, text, cls) => { const n = document.createElement(name); if (text != null) n.textContent = String(text); if (cls) n.className = cls; return n; };
+  const el = document.createElement('aside'); el.id = 'rx-panel';
+  el.appendChild(tag('div', null, 'grip'));
+  const head = document.createElement('header');
+  head.append(tag('b', config.title || 'Tweaks'), tag('span', `${rx.slug || 'base'} · ${knobs.length} knobs · \` toggle`));
+  el.appendChild(head);
+
+  // tools: search, presets, collapse, randomize
+  const tools = document.createElement('div'); tools.className = 'tools';
+  const search = document.createElement('input'); search.type = 'search'; search.placeholder = 'filter knobs  ( / )';
+  const presetSel = document.createElement('select');
+  presetSel.appendChild(new Option('presets…', ''));
+  for (const name of Object.keys(presets)) presetSel.appendChild(new Option(name, name));
+  const collapse = document.createElement('button'); collapse.textContent = 'collapse';
+  const rnd = document.createElement('button'); rnd.textContent = 'shuffle'; rnd.title = 'randomize every knob within its range (colors stay)';
+  tools.append(search, presetSel, collapse, rnd); el.appendChild(tools);
+
+  const body = document.createElement('div'); body.className = 'body'; el.appendChild(body);
+  const groups = [...new Set(knobs.map((k) => k.group || 'Knobs'))];
+  const inputs = new Map();
+  const num = (v) => (typeof v === 'number' ? v : parseFloat(v));
+  const unitOf = (k) => k.unit ?? (k.type === 'length' ? String(k.default).replace(/[\d.\-]/g, '') || 'px' : '');
+  const show = (e, v) => { const { k, input, val, lab } = e; if (input.type === 'color') input.value = toHex(v); else if (input.type === 'range') input.value = num(v); else input.value = String(v); if (val) val.textContent = v; lab.classList.toggle('dirty', v !== k.default); };
+  for (const g of groups) {
+    const d = document.createElement('details'); d.open = true;
+    const items = knobs.filter((x) => (x.group || 'Knobs') === g);
+    const sum = document.createElement('summary');
+    sum.append(document.createTextNode(String(g)), tag('i', items.length));
+    d.appendChild(sum);
+    for (const k of items) {
+      const lab = document.createElement('label'); lab.dataset.q = (k.label + ' ' + k.id + ' ' + g).toLowerCase();
+      const name = tag('small', k.id); name.title = String(k.id);
+      const head = document.createElement('div');
+      head.append(document.createTextNode(String(k.label || k.id)), name);
+      lab.appendChild(head);
+      const cell = document.createElement('div'); let input, val;
+      if (k.type === 'color') { input = document.createElement('input'); input.type = 'color'; input.oninput = () => set(k, input.value); }
+      else if (k.type === 'length' || k.type === 'number') {
+        cell.className = 'range-row';
+        input = document.createElement('input'); input.type = 'range'; input.min = k.min ?? 0; input.max = k.max ?? 100; input.step = k.step ?? 1;
+        val = document.createElement('div'); val.className = 'val';
+        const unit = unitOf(k);
+        input.oninput = () => { const v = k.type === 'length' ? `${input.value}${unit}` : +input.value; val.textContent = v; set(k, v); lab.classList.toggle('dirty', v !== k.default); };
+        val.ondblclick = () => { const n = prompt(k.label, String(state[k.id] ?? k.default)); if (n != null) { const v = k.type === 'length' ? (/[a-z%]$/i.test(n) ? n : n + unit) : +n; set(k, v); show(inputs.get(k.id), v); } };
+        cell.append(input, val);
+      }
+      else if (k.type === 'select') { input = document.createElement('select'); (k.options || []).forEach((o, i) => { const op = document.createElement('option'); op.value = o; op.textContent = (k.labels || [])[i] || o; input.appendChild(op); }); input.onchange = () => set(k, input.value); }
+      else { input = document.createElement('input'); input.type = 'text'; input.onchange = () => set(k, input.value); }
+      if (!cell.className) cell.appendChild(input);
+      lab.appendChild(cell); d.appendChild(lab);
+      const e = { k, input, val, lab }; inputs.set(k.id, e); show(e, k.default);
+      lab.oncontextmenu = (ev) => { ev.preventDefault(); set(k, k.default); show(e, k.default); };
+    }
+    body.appendChild(d);
+  }
+
+  const foot = document.createElement('footer');
+  const btn = (t, fn, title) => { const b = document.createElement('button'); b.textContent = t; b.title = title || ''; b.onclick = fn; foot.appendChild(b); return b; };
+  const exportJson = () => { const o = { name: (config.slug || config.title || 'tweak') + '-' + Date.now().toString(36), thesis: 'exported from tweak panel', tokens: {}, motion: {}, shaders: {} };
+    for (const [id, v] of Object.entries(state)) { if (id.startsWith('--')) o.tokens[id] = v; else setPath(o, id, v); } return JSON.stringify(o, null, 2); };
+  btn('Copy JSON', () => { navigator.clipboard?.writeText(exportJson()); flash('copied JSON'); }, 'overrides file for apply-overrides.cjs');
+  btn('Copy link', () => { navigator.clipboard?.writeText(location.href); flash('link copied'); }, 'permalink with this state');
+  btn('Reset', () => { for (const id of Object.keys(state)) delete state[id]; for (const e of inputs.values()) { applyOne(e.k, e.k.default); show(e, e.k.default); } write(); flash('reset'); });
+  el.appendChild(foot); document.body.appendChild(el);
+  const flash = (t) => { const h = el.querySelector('header span'); const old = h.textContent; h.textContent = t; setTimeout(() => (h.textContent = old), 900); };
+
+  // tools behavior
+  search.oninput = () => { const q = search.value.trim().toLowerCase(); el.querySelectorAll('label').forEach((l) => l.classList.toggle('hide', !!q && !l.dataset.q.includes(q))); };
+  collapse.onclick = () => { const open = [...el.querySelectorAll('details')].some((d) => d.open); el.querySelectorAll('details').forEach((d) => (d.open = !open)); collapse.textContent = open ? 'expand' : 'collapse'; };
+  presetSel.onchange = () => { const p = presets[presetSel.value]; if (!p) return; for (const e of inputs.values()) { const v = p[e.k.id] ?? e.k.default; set(e.k, v, false); show(e, v); } write(); flash('preset: ' + presetSel.value); presetSel.value = ''; };
+  rnd.onclick = () => { for (const e of inputs.values()) { const k = e.k; let v; if (k.type === 'number' || k.type === 'length') { const lo = k.min ?? 0, hi = k.max ?? 100, st = k.step ?? 1; const r = lo + Math.round(Math.random() * ((hi - lo) / st)) * st; v = k.type === 'length' ? `${+r.toFixed(3)}${unitOf(k)}` : +r.toFixed(3); } else if (k.type === 'select') v = k.options[Math.floor(Math.random() * k.options.length)]; else continue; set(e.k, v, false); show(e, v); } write(); flash('shuffled'); };
+  // resize grip
+  const grip = el.querySelector('.grip'); let drag = null;
+  grip.onmousedown = (e) => { drag = { x: e.clientX, w: el.offsetWidth }; e.preventDefault(); };
+  window.addEventListener('mousemove', (e) => { if (drag) el.style.setProperty('--w', Math.max(260, Math.min(640, drag.w + (drag.x - e.clientX))) + 'px'); });
+  window.addEventListener('mouseup', () => (drag = null));
+
+  /* ---- restore from URL ---- */
+  Object.assign(state, read());
+  for (const [id, v] of Object.entries(state)) { const e = inputs.get(id); if (!e) continue; applyOne(e.k, v); show(e, v); }
+
+  window.addEventListener('keydown', (e) => {
+    const typing = /input|textarea|select/i.test(document.activeElement?.tagName || '');
+    if (e.key === '`' && !typing) el.hidden = !el.hidden;
+    if (e.key === '/' && !typing) { e.preventDefault(); el.hidden = false; search.focus(); }
+  });
+  return { state, el, set: (id, v) => { const e = inputs.get(id); if (e) { set(e.k, v); show(e, v); } } };
+}
+
+function toHex(c) {
+  if (/^#[0-9a-f]{6}$/i.test(c)) return c;
+  if (/^#[0-9a-f]{3}$/i.test(c)) return '#' + [...c.slice(1)].map((x) => x + x).join('');
+  const m = String(c).match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/); if (!m) return '#000000';
+  return '#' + [m[1], m[2], m[3]].map((v) => (+v).toString(16).padStart(2, '0')).join('');
+}

package/skills/luckiest-website-cloner-shaders/ATTRIBUTION.md

@@ -0,0 +1,11 @@
+# Attribution
+
+See `../luckiest-website-cloner/ATTRIBUTION.md`. Luckiest edition of the
+open-source site-clone skill collection, MIT licensed.
+
+`vendor/web-shader-extractor/` is vendored unmodified from the
+**web-shader-extractor** skill in the
+[lixiaolin94/skills](https://github.com/lixiaolin94/skills) repository by
+**lixiaolin94**, with a 2D-Canvas extraction contribution by
+[Huazi](https://github.com/HeyHuazi). Licensed **MIT**. Update it by re-pulling
+upstream rather than hand-editing it.

package/skills/luckiest-website-cloner-shaders/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 1.0.0
+
+First Luckiest edition of `luckiest-website-cloner-shaders`. Renamed from the upstream site-clone
+collection, guardrails added to every entry point, recipes added for running the
+probes from an in-app browser pane, frontmatter normalized to the Luckiest
+package format. See ATTRIBUTION.md.

package/skills/luckiest-website-cloner-shaders/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chase Hannegan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,129 @@
+---
+name: luckiest-website-cloner-shaders
+description: >-
+  Extract, reproduce, and locally replay a single WebGL / WebGPU / Canvas /
+  shader / animated-3D visual effect from a web page — the GPU-rendered surface
+  that DOM/CSS cloning is blind to. Use whenever a page has a WebGL/WebGPU/canvas
+  shader background, animated 3D hero, generative gradient, particle field, or
+  Unicorn Studio / Spline / Three.js effect that must be captured and rebuilt as
+  a runnable local module. This is the GPU track of a site clone (driven by
+  luckiest-website-cloner) but also stands alone. Trigger on "extract this shader", "clone the
+  WebGL background", "port this canvas effect", "rebuild this animated hero",
+  "reproduce this Three.js scene locally". NOT for ordinary DOM/CSS cloning
+  (use luckiest-website-cloner-dom).
+argument-hint: "<url> | <locked surface: selector + rect + driver + output-dir>"
+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-shaders
+  author: luckiest
+---
+
+# Shader Extract
+
+Capture one GPU-rendered surface and rebuild it as a verified, runnable local
+effect module. The governing principle — inherited from the vendored engine this
+skill wraps — is **evidence before implementation**: capture what the page's GPU
+pipeline actually does (shaders, uniforms, pass order, textures, timing) and
+match it, rather than eyeballing the visual and hand-tuning a lookalike. A
+lookalike drifts; a capture-matched baseline is faithful and honest about its
+gaps.
+
+## This skill = intake adapter + a vendored evidence-gated engine
+
+The heavy machinery lives in **`vendor/web-shader-extractor/`** — an
+evidence-gated state machine (surface lock → source/runtime trace → capture →
+verified baseline → projectize) by lixiaolin94 (MIT; see `ATTRIBUTION.md`). Do
+not reimplement it. This wrapper does two things the vendored engine assumes were
+done elsewhere:
+
+1. **Intake** — accept a *pre-locked* surface from the luckiest-website-cloner coordinator so
+   you skip straight to capture instead of re-scouting the whole page.
+2. **Capture backends** — make the concrete, research-verified capture tools
+   explicit (`references/capture-backends.md`): **Spector.js** for WebGL1/2 and
+   **WebGPU Inspector** for WebGPU. These are what actually recover a frame; the
+   vendored policy files describe the *discipline*, these describe the *tools*.
+
+## Router: how you were invoked
+
+**Driven by luckiest-website-cloner (common):** you receive a locked surface — selector,
+bounding box, guessed driver (three.js / unicorn-studio / spline / regl / raw
+WebGL), and an output dir like `output/<host>/effects/<surface-id>/`. The surface
+is already attributed, so skip scouting. Go straight to:
+
+1. Read `vendor/web-shader-extractor/SKILL.md` and its `references/replay-policy.md`
+   — that is the operating manual for capture → baseline → projectize.
+2. Pick the capture backend by surface type (`references/capture-backends.md`):
+   WEBGL1/2 → Spector.js; WEBGPU → WebGPU Inspector.
+3. Run the vendored state flow from `CAPTURE_MINIMUM_TRUTH` onward, writing
+   evidence and the baseline into the given output dir.
+4. Return a **mount-contract module** (see below) plus the honesty label.
+
+**Standalone (user hands you a URL):** you must lock the surface first. Run the
+full vendored flow from `INTAKE` (read `vendor/web-shader-extractor/SKILL.md`).
+The `luckiest-website-cloner` script `scripts/surface-map.js` is a fast way to enumerate and
+classify canvases if you want a head start, but the vendored `TARGET_LOCK` gate
+is authoritative.
+
+## Non-negotiables (carried from the vendored engine)
+
+- **Honest labels.** Every implementation-critical fact is `SOURCE`, `PARTIAL`,
+  or `GUESS`; unlabeled = `GUESS`. The final module carries a fidelity verdict.
+  Never quietly upgrade a `BEHAVIOR_REBUILD` (lookalike) to sound like a source
+  replay.
+- **No compensation tuning.** Don't nudge brightness, speed, offsets, noise
+  scale, or color to mask missing pipeline evidence. A visible gap gets recorded
+  in `known-gaps.md`, not fudged away.
+- **Baseline before projectize.** Get a faithful, verified capture-baseline
+  running first; only then refactor it into an editable module. Don't overwrite a
+  verified baseline for cleanup.
+- **Cross-origin honesty.** If the canvas is cross-origin/tainted and pixel or
+  shader readback is blocked, say so and fall back to a captured poster frame —
+  don't invent a shader you couldn't read.
+
+## Output contract (so luckiest-website-cloner can mount it)
+
+Beyond the vendored `output/` layout (capture-baseline, editable-project,
+qa-report, known-gaps), expose the effect through the mount lifecycle the
+coordinator composites against:
+
+```js
+export function mount(canvasEl, opts) { /* start renderer + rAF loop */ return handle }
+export function unmount(handle)        { /* cancel rAF, loseContext, free GPU */ }
+export function resize(handle, w, h, dpr) { /* resize drawing buffer + viewport */ }
+```
+
+Also emit a **poster frame** (a captured still) as a fallback for reduced-motion
+and for the case where reconstruction only reached poster fidelity. Report the
+fidelity label so the coordinator carries it into the final clone report
+unchanged.
+
+## Where to read next
+
+- `references/capture-backends.md` — Spector.js (WebGL) and WebGPU Inspector
+  (WebGPU): what each captures, how to drive it, what's reliable vs guesswork.
+- `vendor/web-shader-extractor/SKILL.md` — the full state machine + reference
+  router (surface discovery, target lock, evidence policy, replay policy, QA,
+  Three.js/TSL reconstruction, Unicorn Studio / shaders.com adapters).
+- `ATTRIBUTION.md` — upstream authorship and MIT license.
+
+## 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-shaders/references/capture-backends.md

@@ -0,0 +1,89 @@
+# Capture backends
+
+The vendored engine tells you the *discipline* (lock the surface, capture the
+truth, verify before projectizing). This file names the *tools* that actually
+recover a GPU frame, and what each gives you vs. what remains guesswork. Pick by
+surface type from the surface map.
+
+## WebGL1 / WebGL2 → Spector.js
+
+Spector.js (BabylonJS, first-party, actively maintained; works with any
+WebGL1/WebGL2 engine — Three.js, Babylon, regl, raw GL) captures a **complete
+frame as a full ordered command list**, each command annotated with its visual
+state and GL context info. That gives you, per frame:
+
+- the executed GL commands in **draw/pass order** (reconstruct the render graph),
+- **shader programs** (GLSL source), attributes, VAOs,
+- **uniforms** and uniform buffers bound at each draw,
+- textures, framebuffers, and render state.
+
+How to drive it:
+
+- Inject the Spector.js script (CDN or bundled) into the page via the browser
+  tool. Programmatic capture: `new SPECTOR.Spector()` then `captureCanvas(canvas)`
+  or `captureNextFrame(canvas)`; the result is the command tree you serialize to
+  evidence. `startCapture` / `stopCapture` bracket a specific interaction.
+- Capture a representative frame — for a time-driven effect, one steady-state
+  frame; for an interactive one, capture at a known pointer/scroll state and
+  record that state alongside.
+
+**Reliable:** shader source, per-draw uniforms, command/pass order, textures,
+state. This is real evidence, label `SOURCE`.
+**Still guesswork:** how uniforms are *driven over time* (the JS that animates
+them frame to frame) — Spector shows one frame's values, not the update function.
+Recover the drive loop from source/source-maps when possible; otherwise the
+timing/coupling is `PARTIAL` or `GUESS`. Spector captures and inspects; it does
+**not** auto-replay — you reconstruct the runnable module from its evidence.
+
+## WebGPU → WebGPU Inspector
+
+WebGPU Inspector (brendan-duncan; browser extension, RenderDoc-style, engine-
+independent within WebGPU) captures a frame's **full command stream** — render-
+pass output images, textures, buffer data, render state, and the uniform/storage
+buffers bound to each draw/dispatch. It also gives a **live view of every GPU
+object** with live shader (WGSL) editing and texture inspection, and — the part
+that matters most for porting — it can **serialize a capture into a self-contained
+HTML or binary file that replays offline** without a local server.
+
+How to drive it:
+
+- Install the extension (Chrome Web Store / Firefox Add-ons). Open its panel on
+  the target, Capture a frame, inspect passes/buffers/shaders, then Record →
+  export the self-contained replay file into your output dir as the baseline
+  evidence.
+- Use the WGSL shaders + bound buffer layouts as the source of truth for the
+  reconstructed module.
+
+**Reliable:** WGSL shaders, pass structure, bound buffers, and a replayable
+capture file. Label `SOURCE`.
+**Still guesswork:** same as WebGL — the per-frame update logic driving the
+buffers is not in a single capture; recover it from source or mark `PARTIAL`.
+
+## Canvas2D → source + operation trace
+
+No GPU pipeline. Recover the 2D drawing from the JS source (the vendored engine's
+source-analysis path). If the source is minified/unavailable, trace the sequence
+of Canvas2D operations and rebuild from observed behavior — explicitly a
+`BEHAVIOR_REBUILD` (approximate), never claimed as source.
+
+## Platform drivers (short-circuits)
+
+If the surface map's `driver` says a known platform, prefer its structured
+definition over raw frame capture — it's higher fidelity and less work:
+
+- **Unicorn Studio** — has a project export/definition; use the vendored
+  `references/unicorn-studio.md` adapter.
+- **Spline** — scene has an exportable URL/definition; embed or re-export rather
+  than pixel-capture.
+- **shaders.com / TSL** — structured shader definitions; vendored
+  `references/shaders-com.md` + `references/three-shader-reconstruction.md`.
+
+Fall back to Spector.js / WebGPU Inspector only when no structured definition is
+reachable.
+
+## Hard blocker: cross-origin / tainted canvas
+
+If the canvas is cross-origin without CORS, pixel readback and some capture paths
+are blocked by the browser. Don't fabricate a shader you couldn't read — capture
+a **poster frame** (screenshot) as the fallback deliverable and record the
+limitation in `known-gaps.md`. Honest poster > invented lookalike.

package/skills/luckiest-website-cloner-shaders/vendor/web-shader-extractor/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: web-shader-extractor
+description: >
+  Use when a user gives or references a webpage URL and wants to extract,
+  reproduce, port, or locally replay a WebGL, WebGPU, Canvas, shader-like,
+  animated background, interactive 3D, or web visual effect. Locks the target
+  rendering surface group, records shader/resource/render graph/timing/input
+  evidence, builds an evidence-matched local baseline, then projectizes it.
+  Do not use for ordinary DOM/CSS page cloning.
+---
+
+# Web Shader Extractor
+
+Index for WebGL / WebGPU / Canvas rendering investigation and local replay.
+Start from the target visual. Lock the surface group. Trace source or runtime facts. Build a runnable baseline. Then projectize.
+
+## Router Contract
+
+This file is the index. Do not treat it as the full operating manual. Before task action, read:
+
+- `references/operating-contract.md`
+- `references/recon-kernel.md`
+
+Then load only the focused references needed by the current state.
+Keep large evidence, captures, and generated outputs out of the conversation.
+Store them in the user's output directory.
+
+## Use This For
+
+- Extracting a webpage WebGL, WebGPU, Canvas2D, OffscreenCanvas, shader, or animated canvas effect.
+- Replaying an animated background, product shader, interactive WebGL scene, or Canvas visual locally.
+- Building an evidence-matched baseline first, then an editable project.
+- Investigating target-bound shader/render graph/timing/resource/input facts.
+
+Do not use this for ordinary DOM/CSS cloning, static screenshots, generic website copying, unrelated JavaScript deobfuscation, or product UI redesign.
+Use it only when the task has a shader/canvas target.
+
+## Core Rules
+
+- Target-bound before framework-bound: a global Three.js, platform, or shader signature is only a hypothesis until tied to the target surface group.
+- Evidence before implementation: source, runtime objects, frame captures, source maps, and public structured definitions outrank visual fitting.
+- Baseline before projectization: never overwrite a verified baseline for cleanup, simplification, or native conversion.
+- Honest labels: implementation-critical facts are `SOURCE`, `PARTIAL`, or `GUESS`; unlabeled values are treated as `GUESS`.
+- No compensation tuning: do not adjust brightness, time, color, offsets, or noise to mask missing pipeline evidence.
+- Gate artifacts are transition guards: if the required artifact is missing, incomplete, or has placeholders in gate-critical fields, the state has not advanced.
+- Ask only for product scope changes or external access/permission blockers.
+- Use plain records: state the fact, evidence path, current unknown, and next action. Avoid metaphor, broad claims, and unsupported conclusions.
+
+## State Router
+
+Use the Recon Kernel state flow:
+
+```text
+INTAKE -> CAPABILITY_SNAPSHOT -> QUICK_SCOUT -> SURFACE_ATTRIBUTION
+-> TARGET_LOCK_GATE
+   - provisional/failed -> REFINE_SCOUT
+   - attributed -> targeted owner/backend/source probe -> TARGET_LOCK_GATE
+   - locked -> SCOPE_CHECK
+-> TRACE_ROUTE_SELECT -> SOURCE_TRACE -> CAPTURE_MINIMUM_TRUTH
+-> REPLAY_READY_GATE
+   - not ready -> SOURCE_TRACE / CAPTURE_MINIMUM_TRUTH
+   - ready -> RAW_REPLAY
+-> BASELINE_RUN -> BASELINE_VERIFY
+-> BASELINE_VERIFIED -> PROJECTIZE -> PROJECT_VERIFY -> PACKAGE
+```
+
+`TARGET_LOCKED` must precede deep source/bundle work.
+Before lock, only narrow source probes tied to `nextProbe` are allowed.
+`REPLAY_READY` must precede implementation.
+`BASELINE_VERIFIED` must precede projectization.
+
+## Reference Router
+
+Load only what the current state needs:
+
+| Need | Read |
+|---|---|
+| Global contract, fact labels, completion states | `references/operating-contract.md` |
+| Kernel, initial protocol, state flow, autonomy, budgets | `references/recon-kernel.md` |
+| Surface discovery and visual attribution | `references/surface-discovery.md` |
+| Lock criteria, target-bound evidence, scope, Three.js binding | `references/target-lock.md` |
+| Evidence labels, ledgers, unknown classes, sensitive data | `references/evidence-policy.md` |
+| Tool capability selection | `references/tool-capability-matrix.md` |
+| WebGL, WebGPU, and Canvas2D capture facts | `references/capture-backends.md` |
+| Source maps, bundle slices, config, encoded definitions | `references/source-analysis.md` |
+| Replay readiness, routes, baseline, stack choice, projectization | `references/replay-policy.md` |
+| QA, failure routing, severity, mismatch signatures | `references/qa-failure-policy.md` |
+| Three.js shader injection or TSL reconstruction | `references/three-shader-reconstruction.md` |
+| Unicorn Studio target | `references/unicorn-studio.md` |
+| shaders.com / TSL target | `references/shaders-com.md` |
+
+## Tool And Artifact Policy
+
+Tools are replaceable capabilities, not prerequisites. First record the available capability profile:
+
+```text
+navigate, runtime-eval, preload-script, network-metadata, network-body,
+source-map, canvas-screenshot, interaction, frame-capture-webgl,
+frame-capture-webgpu, local-run, multi-frame-compare
+```
+
+Use `scripts/fetch-rendered-dom.mjs` only as an optional inventory helper when Playwright is already available.
+Use `scripts/scan-bundle.sh` only on target-bound bundle slices or a precise `nextProbe`.
+Script output is hypothesis evidence. It never satisfies Surface Attribution, Target Lock, Replay Ready, or QA gates by itself.
+
+Use bundled templates as schemas, not free-form notes:
+
+- `templates/scout-card.json`
+- `templates/replay-manifest.json`
+- `templates/run-state.json`
+- `templates/qa-report.md`
+- `templates/known-gaps.md`
+- `templates/extraction-report.md`
+
+## Platform Adapters
+
+Load platform references only after target-bound evidence points there:
+
+- Unicorn Studio: `references/unicorn-studio.md`
+- shaders.com / TSL: `references/shaders-com.md`
+- Three.js shader injection or TSL: `references/three-shader-reconstruction.md`
+
+If no adapter fits, follow generic WebGL, WebGPU, or Canvas2D capture in `references/capture-backends.md`.