luckiest-co 1.0.13 → 1.0.15

package/skills/luckiest-website-cloner-remix/references/directions.md

@@ -0,0 +1,82 @@
+# Directions — three forks, not five shades
+
+A "direction" is an overrides file (tokens + motion + shaders + assets). Three
+is the number: two is a coin flip, five converges into blends. Each direction
+must differ from the others on **at least three** of the forks below, and the
+set should span the axis the user cares about (ask one question if unclear:
+"louder or quieter than the original?").
+
+## The forks
+
+| Fork | What changes | Knobs it touches |
+|---|---|---|
+| **Palette mood** | dark / light / tinted-neutral / saturated | `--rx-color-bg`, `--rx-color-text`, accent, surface tints |
+| **Type pairing** | grotesk-only / serif display + grotesk text / mono-led / expressive display | `--rx-font-1..n`, display size + tracking |
+| **Hero treatment** | photo / illustration / generated art / pure type / GPU-led | hero asset key, shader props, overlay gradient |
+| **Density** | airy (×1.25 spacing) / original / compact (×0.8) | `--rx-space-*`, max-widths, radii |
+| **Motion personality** | still (reveals only) / original / springy (shorter, overshoot ease) / cinematic (longer, bigger travel) | `motion.reveal.{y,duration,ease}`, stagger, shader speed |
+| **Surface** | flat / bordered / elevated (shadows) / glass | radius, shadow, border color, backdrop |
+
+## Deriving three from the original
+
+Read the original's position on each fork from `TEARDOWN.md`. Then:
+
+1. **Nearest-legit** — keeps the original's strongest fork (the thing that
+   made the user pick this site) and flips three others. Safe pick.
+2. **Opposite** — flips the original's defining fork (dark→light, serif→mono,
+   photo→type). Shows the skeleton survives a different skin.
+3. **Wildcard** — pulled from the user's taste library (`/taste-vault`,
+   reference images, a named site) rather than from the original. The one
+   that might be *better* than the source.
+
+Name each with a two-word slug (`editorial-quiet`, `night-signal`,
+`paper-brutal`) and a one-line thesis. The thesis is the test: if you can't
+say why a viewer would *feel* different, it's a shade, not a direction.
+
+## Rendering the contact sheet
+
+Screenshot each direction's hero + one content section at 1440, compose
+three columns with slug + thesis captions → `remix/directions.png`. Present
+only that plus three lines. Don't pre-argue for one; the user's reaction to
+the sheet is the data.
+
+## Overrides file checklist
+
+- tokens: only keys that change (the base supplies the rest)
+- motion: full objects for what changes (`reveal`, `stagger`, `nav`) so the
+  behaviors read one shape
+- shaders: per-mount props; keep the library, change the props
+- assets: per key; generated files under `remix/generated/<slug>-*.ext`
+- `thesis` filled in
+
+## Amplitude — ask before deriving
+
+Ask the user first: **subtle / medium / big**, and **any aesthetics in mind?**
+
+| Amplitude | What moves | Files |
+|---|---|---|
+| subtle | palette, accent, motion timing, shader colors | `<slug>.json` |
+| medium | + radius/border/shadow, spacing scale, type scale + weights, grain | + `<slug>.patch.css` |
+| big | + hero treatment, layout (grid ↔ editorial ↔ bento), section order, nav style, own hero asset | + `<slug>.patch.js` + generated assets |
+
+Subtle side by side reads as "the same site in three coats" — say so when
+recommending; default to **medium** unless the user is exploring brand identity
+(then big). A direction file may declare `"amplitude": "medium"` explicitly.
+
+**Patch rules.** `patch.css` is scoped under `:root[data-rx="<slug>"]` and only
+*adds* rules. `patch.js` default-exports `function (rx) {}` and may reorder
+sections, swap a hero variant (e.g. hide the image layer, enlarge the headline),
+or add layout classes — never delete content, never touch the base files.
+Everything must be reversible by loading `?rx=base`.
+
+**Big-direction hero recipes for a photo-hero skeleton:**
+- *type-only* — hide the image + shader layers, headline to 2× size, one rule
+- *GPU-led* — hide the image, full-bleed GrainGradient/Dithering behind the type
+- *engraving* — regenerate the art as B/W line engraving, hard 2-column split
+- *product* — the cutout asset becomes the focal object, painting removed
+
+**Patch gotcha (Tailwind / utility sites):** font sizes usually live on the
+inner `<span>`s (`text-[64px]`), not the `h1`. A `h1 span { font-size: 108% }`
+patch *replaces* that with 108 % of the h1's 16 px base and collapses the
+headline. Scale display type via the `h1`'s own size or `letter-spacing` /
+`line-height`, never via child spans.

package/skills/luckiest-website-cloner-remix/references/reskin.md

@@ -0,0 +1,84 @@
+# Re-skin — making the template yours
+
+The order matters: **copy → brand → assets → fonts → scrub**. Copy first because
+headline length drives layout; everything after is fitting into that.
+
+## Copy: keep the shape, change the words
+
+Walk `TEARDOWN.md`'s section list top to bottom. For each section record its
+*shape* before touching it: eyebrow? headline lines? sub length? CTA count?
+card count and per-card fields? That shape is the template; the words are not.
+
+- Headlines: match the original's character count ±20 % or the hero reflows.
+  If the user's message genuinely needs more, reduce the display size knob
+  (`--rx-size-1`) rather than letting it wrap to a third line.
+- Cards/lists: same count as the original unless the grid obviously tolerates
+  fewer (3→2 breaks most grids; 6→4 usually doesn't). Say so in the report.
+- Microcopy (buttons, labels, footer) — replace every string; a leftover
+  "Book a demo" or their product name is the #1 tell of a lazy remix.
+- Sources, in order of preference: the user's doc/URL → the user's bullets
+  expanded in the original's register → honest placeholders in the structure
+  (`[Headline about X]`) — never their copy paraphrased.
+
+## Brand
+
+- Logo → header + footer slots + favicon + OG image. If none exists, generate a
+  **simple wordmark** in the site's display font as a placeholder and label it
+  PLACEHOLDER — never generate a logo and present it as final brand work.
+- Colors: primary → whatever role the original's accent played (`--rx-color-n`
+  with the highest `uses` among non-neutrals); neutrals usually stay. If the
+  user gives only a logo, sample its two dominant colors and propose.
+
+## Assets: flip the ladder
+
+In `/luckiest-website-cloner` the REAL original asset was the goal. Here it's the thing to
+remove. Per asset in the teardown's table:
+
+| Original role | Action |
+|---|---|
+| Decorative (hero background, ambient texture, abstract art, section bg) | GENERATE — brief below |
+| Product/UI screenshots | Replace with the user's, or a generated *abstract* stand-in clearly not a product |
+| Photos of people, testimonials, avatars | Replace with the user's or remove the block |
+| Their logo / brand marks / partner logos | Remove or replace with the user's partners |
+| Icons (generic UI) | Keep |
+| Textures/noise SVGs generated in code | Keep |
+
+**Generation brief template** (Higgsfield; reuse the original's *composition*,
+not its content):
+
+```
+Aspect <W:H from the original file>. Subject placement: <where the original
+put its focal mass — e.g. "figure right third, empty sky left two-thirds">.
+Mood: <from the direction, or the original's if pre-direction>. Style: <one
+phrase — "painterly landscape", "studio product on seamless", "abstract
+gradient mesh">. Must leave <region> clean for overlaid text. No text, no
+logos, no recognizable brands.
+```
+Generate at ≥ the original's served resolution. Keep the original's filename
+slot (`hero-bg.jpg` → the mount / `<img data-rx-asset="hero-bg">` stays the
+same) so directions can swap it by key.
+
+## Fonts
+
+Keep open-license fonts. Swap commercially licensed ones for metric-compatible
+open pairs — match x-height and width so the measured sizes still fit:
+
+| Licensed | Open stand-in |
+|---|---|
+| Neue Haas Grotesk / Helvetica Neue | Inter (tracking −0.01em) or Instrument Sans |
+| PP Cirka / editorial serif display | Instrument Serif, Fraunces, Newsreader |
+| GT America / Söhne / ABC Diatype | Inter, Geist, Manrope |
+| Founders Grotesk | Archivo, Work Sans |
+| Monument Extended / PP Neue Machina | Unbounded, Syncopate |
+| Tiempos / Canela | Fraunces, Source Serif 4, Cormorant |
+| SF Mono / Berkeley Mono | Geist Mono, JetBrains Mono, IBM Plex Mono |
+
+After a swap, re-measure the hero headline height and adjust `--rx-size-1`
+until it matches the original's within a line.
+
+## Scrub
+
+Remove: analytics (GA/PostHog/Plausible), their API endpoints and forms'
+`action`s, their social links, their legal pages, `<meta>` descriptions/OG,
+sitemap/robots, any `data-*` that carries their ids. Grep the built output for
+their domain and brand name — zero hits before Phase 1 is done.

package/skills/luckiest-website-cloner-remix/references/tweak-panel.md

@@ -0,0 +1,72 @@
+# Tweak panel — the knobs you'll actually turn
+
+Built on the picked direction only. 10–15 knobs. The test for including one:
+*would the user change this twice in the next hour?* Accent yes; the 7th
+spacing step no.
+
+## The --p-* pattern (how a patch becomes tweakable)
+
+A knob can only drive what is already a variable. So when you write a
+direction's `patch.css`, declare every decision as a `--p-*` custom property
+with its default in the `:root[data-rx="<slug>"]` block, and reference it in
+the rules (`filter: grayscale(var(--p-hero-gray)) contrast(var(--p-hero-contrast))`).
+The panel then sets `--p-*` on `:root` live. Validated pattern: hero processing
+(gray/contrast/brightness/invert/blur), overlay gradient (alpha/angle/reach),
+scanlines, figure transform (scale/x/y/opacity), grain opacity, grid
+size/alpha, hairline weight/style, radius, shadow, display tracking/leading/
+weight, body leading, section rhythm multiplier, content max-width, CTA colors,
+footer colors. Use `zoom` (not `transform: scale`) for display scale so the
+layout reflows.
+
+"Aggressive" is fine — 60–80 knobs is workable **if** they are grouped
+(Color / Type / Space / Hero / Texture / Motion / GPU / Footer), searchable,
+and every group can collapse. The panel ships with a filter box, presets,
+collapse-all, shuffle-within-ranges, right-click-to-reset per knob,
+double-click a value to type it, and a resize grip.
+
+## panel.json schema
+
+```json
+{ "title": "Night Signal", "slug": "night-signal",
+  "presets": { "as picked": {}, "inverted": { "--rx-color-bg": "#0a0a0a", "--p-hero-invert": 1 } },
+  "knobs": [
+    { "id": "--rx-color-1",            "label": "Accent",          "group": "Color",  "type": "color",  "default": "#1f3bff" },
+    { "id": "--rx-color-bg",           "label": "Page",            "group": "Color",  "type": "color",  "default": "#ffffff" },
+    { "id": "--rx-font-1",             "label": "Display font",    "group": "Type",   "type": "select", "options": ["Inter","Instrument Serif","Geist Mono"], "default": "Inter" },
+    { "id": "--rx-size-1",             "label": "Display size",    "group": "Type",   "type": "length", "default": "80px", "min": 40, "max": 140, "step": 1, "unit": "px" },
+    { "id": "--rx-space-2",            "label": "Section gap",     "group": "Space",  "type": "length", "default": "128px", "min": 48, "max": 240, "step": 4, "unit": "px" },
+    { "id": "--rx-radius-1",           "label": "Radius",          "group": "Space",  "type": "length", "default": "4px", "min": 0, "max": 32, "step": 1, "unit": "px" },
+    { "id": "motion.reveal.y",         "label": "Reveal travel",   "group": "Motion", "type": "number", "default": 22, "min": 0, "max": 80, "step": 1 },
+    { "id": "motion.reveal.duration",  "label": "Reveal duration", "group": "Motion", "type": "number", "default": 0.7, "min": 0.1, "max": 2, "step": 0.05 },
+    { "id": "motion.stagger",          "label": "Stagger",         "group": "Motion", "type": "number", "default": 0.08, "min": 0, "max": 0.3, "step": 0.01 },
+    { "id": "shaders.hero.colorFront", "label": "Paper tint",      "group": "GPU",    "type": "color",  "default": "#9FADBC" },
+    { "id": "shaders.hero.intensity",  "label": "Texture",         "group": "GPU",    "type": "number", "default": 0.5, "min": 0, "max": 1, "step": 0.02 }
+  ] }
+```
+
+- `--*` ids set CSS custom properties live on `:root`.
+- Dotted ids patch `window.__remix` via `__remix.apply({...})`, which dispatches
+  `rx:change`. Behaviors must read their params at call time (not cache them
+  at import), and shader mounts must listen for `rx:change` and re-render
+  with the new props. Hoist both during Phase 0 if the clone didn't.
+- Groups render as collapsible sections in the given order.
+- `slug` (optional): the panel only mounts when that direction is active.
+- `presets`: named partial states layered on the direction; keys are knob ids.
+- `labels` on a select: display names parallel to `options` (use for font stacks).
+
+## Wiring
+
+```ts
+import rx from './remix/remix-loader';            // first — applies the direction
+import { mountTweakPanel } from './remix/tweak-panel.js';
+import panel from '../remix/panel.json';
+if (import.meta.env.DEV) mountTweakPanel(panel);   // dev-only
+```
+
+## Verify before reporting
+
+1. Every knob visibly changes the page (screenshot two extremes for a couple).
+2. Permalink round-trips: copy link → open in a fresh tab → same state.
+3. Reset returns exactly to the direction's defaults (0 % diff vs `?rx=<slug>`).
+4. Copy JSON → `apply-overrides.cjs` accepts it as a new direction.
+5. Production build contains no panel (`grep rx-panel dist/` → nothing).

package/skills/luckiest-website-cloner-remix/scripts/apply-overrides.cjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+/*
+ * apply-overrides.cjs — materialize a direction (or panel export) into the site.
+ *
+ *   node apply-overrides.cjs <site-dir> <overrides.json> [--activate]
+ *
+ * overrides.json:
+ *   { "name": "editorial-quiet", "thesis": "...",
+ *     "tokens":  { "--rx-color-1": "#…", "--rx-font-1": "…" },
+ *     "motion":  { "reveal": { "y": 22, "duration": .7, "ease": [.16,1,.3,1] }, "stagger": .08 },
+ *     "shaders": { "hero": { "colorFront": "#…" } },
+ *     "assets":  { "hero-bg": "remix/generated/editorial-hero.jpg" } }
+ *
+ * Writes into <site>/src/remix/:
+ *   tokens.<slug>.css      :root overrides (only the keys given)
+ *   motion.<slug>.js       `window.__remix.motion` / `.shaders` patch
+ *   directions.json        registry of all slugs (for ?rx=<slug> switching)
+ * and, for "assets", copies files into <site>/public/assets/remix/<slug>/ and
+ * records the mapping so the loader can swap <img src> / shader image props.
+ *
+ * The site loads the active direction with the tiny runtime in remix-loader.js
+ * (written here too, once): reads ?rx=<slug> or #rx=<state>, injects the CSS,
+ * applies motion/shader patches, swaps assets. Default = base.
+ */
+const fs = require('fs'), path = require('path');
+const [,, siteDir, ovPath, ...flags] = process.argv;
+if (!siteDir || !ovPath) { console.error('usage: apply-overrides.cjs <site-dir> <overrides.json> [--activate]'); process.exit(1); }
+const ov = JSON.parse(fs.readFileSync(ovPath, 'utf8'));
+const slug = (ov.name || path.basename(ovPath, '.json')).toLowerCase().replace(/[^a-z0-9]+/g, '-');
+const out = path.join(siteDir, 'src', 'remix'); fs.mkdirSync(out, { recursive: true });
+
+// tokens
+const tokens = ov.tokens || {};
+fs.writeFileSync(path.join(out, `tokens.${slug}.css`), `/* direction: ${slug} — ${ov.thesis || ''} */\n:root[data-rx="${slug}"] {\n${Object.entries(tokens).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}\n`);
+
+// assets
+const assetMap = {};
+for (const [key, src] of Object.entries(ov.assets || {})) {
+  const dest = path.join(siteDir, 'public', 'assets', 'remix', slug, path.basename(src));
+  fs.mkdirSync(path.dirname(dest), { recursive: true });
+  if (fs.existsSync(src)) fs.copyFileSync(src, dest); else console.warn('asset missing:', src);
+  assetMap[key] = `/assets/remix/${slug}/${path.basename(src)}`;
+}
+
+// optional patch layers (medium: css, big: js) — picked up if they sit next to the JSON
+const patchCss = ovPath.replace(/\.json$/, '.patch.css'), patchJs = ovPath.replace(/\.json$/, '.patch.js');
+const hasCss = fs.existsSync(patchCss), hasJs = fs.existsSync(patchJs);
+if (hasCss) fs.writeFileSync(path.join(out, `patch.${slug}.css`), fs.readFileSync(patchCss, 'utf8'));
+if (hasJs) fs.writeFileSync(path.join(out, `patch.${slug}.js`), fs.readFileSync(patchJs, 'utf8'));
+
+// motion / shaders patch
+fs.writeFileSync(path.join(out, `motion.${slug}.js`), `// direction: ${slug}\nexport default ${JSON.stringify({ motion: ov.motion || {}, shaders: ov.shaders || {}, assets: assetMap }, null, 1)};\n`);
+
+// registry
+const regPath = path.join(out, 'directions.json');
+const reg = fs.existsSync(regPath) ? JSON.parse(fs.readFileSync(regPath, 'utf8')) : { active: 'base', directions: {} };
+reg.directions[slug] = { name: ov.name || slug, thesis: ov.thesis || '', amplitude: ov.amplitude || (hasJs ? 'big' : hasCss ? 'medium' : 'subtle'), tokens: `./tokens.${slug}.css`, motion: `./motion.${slug}.js`, patchCss: hasCss ? `./patch.${slug}.css` : null, patchJs: hasJs ? `./patch.${slug}.js` : null, assets: assetMap };
+if (flags.includes('--activate')) reg.active = slug;
+fs.writeFileSync(regPath, JSON.stringify(reg, null, 1));
+
+// loader (idempotent)
+const loader = path.join(out, 'remix-loader.ts');
+if (!fs.existsSync(loader)) fs.writeFileSync(loader, `/**
+ * remix-loader — picks the active direction and applies it before the page paints.
+ * Order: ?rx=<slug> → localStorage rx → directions.json active → 'base'.
+ * Exposes window.__remix = { slug, motion, shaders, assets, apply(patch) }.
+ * Import this FIRST in main.ts. Behaviors read window.__remix.motion; shader
+ * mounts read window.__remix.shaders; <img data-rx-asset="hero-bg"> gets swapped.
+ */
+import registry from './directions.json';
+const tokenSheets = import.meta.glob('./tokens.*.css', { query: '?inline', import: 'default', eager: true }) as Record<string, string>;
+const motionMods = import.meta.glob('./motion.*.js', { import: 'default', eager: true }) as Record<string, any>;
+const patchSheets = import.meta.glob('./patch.*.css', { query: '?inline', import: 'default', eager: true }) as Record<string, string>;
+const patchMods = import.meta.glob('./patch.*.js', { import: 'default', eager: true }) as Record<string, any>;
+
+const params = new URLSearchParams(location.search);
+const slug = params.get('rx') || localStorage.getItem('rx') || (registry as any).active || 'base';
+const rx: any = { slug, motion: {}, shaders: {}, assets: {}, patches: [] as any[] };
+(window as any).__remix = rx;
+document.documentElement.dataset.rx = slug;
+
+if (slug !== 'base') {
+  const css = tokenSheets[\`./tokens.\${slug}.css\`];
+  if (css) { const st = document.createElement('style'); st.id = 'rx-tokens'; st.textContent = css; document.head.appendChild(st); }
+  const m = motionMods[\`./motion.\${slug}.js\`];
+  if (m) { rx.motion = m.motion || {}; rx.shaders = m.shaders || {}; rx.assets = m.assets || {}; }
+  for (const [key, url] of Object.entries(rx.assets)) document.querySelectorAll<HTMLImageElement>(\`[data-rx-asset="\${key}"]\`).forEach((img) => { img.src = url as string; img.removeAttribute('srcset'); });
+  // medium: scoped CSS patch (surface / density / type scale)
+  const pc = patchSheets[\`./patch.\${slug}.css\`];
+  if (pc) { const st = document.createElement('style'); st.id = 'rx-patch'; st.textContent = pc; document.head.appendChild(st); }
+  // big: structural DOM patch — export default function (rx) { ... }
+  const pj = patchMods[\`./patch.\${slug}.js\`];
+  if (typeof pj === 'function') { const run = () => pj(rx); document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', run) : run(); }
+}
+// live patch API used by the tweak panel: { tokens?, motion?, shaders? }
+rx.apply = (patch: any) => {
+  for (const [k, v] of Object.entries(patch.tokens || {})) document.documentElement.style.setProperty(k, v as string);
+  Object.assign(rx.motion, patch.motion || {}); Object.assign(rx.shaders, patch.shaders || {});
+  rx.patches.push(patch); window.dispatchEvent(new CustomEvent('rx:change', { detail: patch }));
+};
+export default rx;
+`);
+
+console.log(`direction "${slug}" → ${out}/tokens.${slug}.css, motion.${slug}.js; registry active=${reg.active}; assets: ${Object.keys(assetMap).length}`);
+console.log(`view: ?rx=${slug}`);

package/skills/luckiest-website-cloner-remix/scripts/gallery.cjs

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/*
+ * gallery.js — write <site>/directions.html: the three directions LIVE, side
+ * by side, in iframes of the dev server (real shaders, real motion), with
+ * synced scrolling, a fullscreen click-through, and a "pick" button that
+ * records the choice. Run after apply-overrides.cjs; served by Vite as a page.
+ *
+ *   node gallery.js <site-dir> [--title "Acme directions"]
+ */
+const fs = require('fs'), path = require('path');
+const [,, siteDir, ...rest] = process.argv;
+if (!siteDir) { console.error('usage: gallery.js <site-dir>'); process.exit(1); }
+const title = (rest.indexOf('--title') >= 0 ? rest[rest.indexOf('--title') + 1] : null) || 'Directions';
+const reg = JSON.parse(fs.readFileSync(path.join(siteDir, 'src', 'remix', 'directions.json'), 'utf8'));
+const dirs = Object.entries(reg.directions);
+
+const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${title}</title>
+<style>
+  :root{color-scheme:dark}
+  *{box-sizing:border-box} html,body{margin:0;height:100%;background:#0c0c0e;color:#eee;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
+  header{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid #222;position:sticky;top:0;background:#0c0c0e;z-index:5}
+  header b{font-size:14px} header .sp{flex:1} header label{display:flex;gap:6px;align-items:center;opacity:.8;cursor:pointer}
+  main{display:grid;grid-template-columns:repeat(${dirs.length},1fr);gap:10px;padding:10px;height:calc(100% - 45px)}
+  .col{display:flex;flex-direction:column;min-width:0;border:1px solid #222;border-radius:8px;overflow:hidden;background:#000}
+  .bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#141416;border-bottom:1px solid #222}
+  .bar .name{font-weight:600} .bar .thesis{opacity:.6;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
+  .bar button,header button{background:#222;color:#eee;border:1px solid #333;border-radius:5px;padding:4px 9px;font:inherit;cursor:pointer} .bar button:hover{background:#2c2c30}
+  .bar button.pick{background:#2f6df6;border-color:#2f6df6} .bar button.pick.on{background:#1db472;border-color:#1db472}
+  .frame{flex:1;position:relative;background:#000} iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
+  body.full main{grid-template-columns:1fr} body.full .col:not(.active){display:none}
+  .hint{opacity:.5}
+</style></head><body>
+<header><b>${title}</b><span class="hint">${dirs.length} directions · click a name to go fullscreen · Esc back</span><span class="sp"></span>
+  <label><input type="checkbox" id="sync" checked> sync scroll</label>
+  <label><input type="checkbox" id="shaders" checked> shaders</label>
+  <button id="reload">reload</button></header>
+<main>
+${dirs.map(([slug, d]) => `  <section class="col" data-slug="${slug}">
+    <div class="bar"><button class="name" data-full="${slug}">${d.name || slug}</button><span class="thesis" title="${(d.thesis || '').replace(/"/g, '&quot;')}">${d.thesis || ''}</span><button class="pick" data-pick="${slug}">pick</button></div>
+    <div class="frame"><iframe data-slug="${slug}" src="/?rx=${slug}&shaders=1" loading="eager"></iframe></div>
+  </section>`).join('\n')}
+</main>
+<script>
+  const frames = [...document.querySelectorAll('iframe')];
+  const shaders = document.getElementById('shaders'), sync = document.getElementById('sync');
+  const src = (s) => '/?rx=' + s + '&shaders=' + (shaders.checked ? 1 : 0);
+  document.getElementById('reload').onclick = () => frames.forEach((f) => (f.src = src(f.dataset.slug)));
+  shaders.onchange = () => document.getElementById('reload').onclick();
+  // synced scroll (same-origin): mirror scrollTop ratio across frames
+  let lock = false;
+  frames.forEach((f) => f.addEventListener('load', () => {
+    const w = f.contentWindow; if (!w) return;
+    w.addEventListener('scroll', () => {
+      if (!sync.checked || lock) return; lock = true;
+      const d = w.document.documentElement, r = w.scrollY / Math.max(1, d.scrollHeight - w.innerHeight);
+      for (const o of frames) if (o !== f && o.contentWindow) { const od = o.contentWindow.document.documentElement; o.contentWindow.scrollTo(0, r * (od.scrollHeight - o.contentWindow.innerHeight)); }
+      requestAnimationFrame(() => (lock = false));
+    }, { passive: true });
+  }));
+  // fullscreen click-through
+  const full = (slug) => { document.body.classList.toggle('full', !!slug); document.querySelectorAll('.col').forEach((c) => c.classList.toggle('active', c.dataset.slug === slug)); };
+  document.querySelectorAll('[data-full]').forEach((b) => (b.onclick = () => full(document.body.classList.contains('full') ? null : b.dataset.full)));
+  window.addEventListener('keydown', (e) => { if (e.key === 'Escape') full(null); });
+  // pick → localStorage + POST-less marker the agent can read back
+  const current = localStorage.getItem('rx-pick');
+  document.querySelectorAll('[data-pick]').forEach((b) => { b.classList.toggle('on', b.dataset.pick === current); b.onclick = () => { localStorage.setItem('rx-pick', b.dataset.pick); document.querySelectorAll('[data-pick]').forEach((x) => x.classList.toggle('on', x === b)); b.textContent = 'picked'; setTimeout(() => (b.textContent = 'pick'), 900); }; });
+</script></body></html>`;
+fs.writeFileSync(path.join(siteDir, 'directions.html'), html);
+console.log(`${path.join(siteDir, 'directions.html')} — open /directions.html on the dev server (${dirs.length} directions)`);

package/skills/luckiest-website-cloner-remix/scripts/tokenize-css.cjs

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+/*
+ * tokenize-css.cjs — make a cloned stylesheet variable-driven.
+ *
+ *   node tokenize-css.cjs <input.css> <tokens.json> <out-dir>
+ *
+ * Reads the measured tokens (from luckiest-website-cloner's tokens-probe) and rewrites the
+ * CSS so each token's literal value goes through `var(--rx-<role>, <literal>)`.
+ * Writes:
+ *   <out-dir>/<input-basename>.tokenized.css   the rewritten stylesheet
+ *   <out-dir>/remix-tokens.css                 :root defaults (the direction "base")
+ *   <out-dir>/../remix/knobs.json              the knob list for directions + panel
+ *
+ * Role naming: colors become --rx-color-<n> ranked by usage, with the body
+ * text / page bg / accent detected and named; font families --rx-font-<n>;
+ * the most common font sizes --rx-size-<n>; spacing values --rx-space-<n>;
+ * radii --rx-radius-<n>; shadows --rx-shadow-<n>. If the site already defines
+ * custom properties (tokens.customProps), those are NOT rewritten — they're
+ * listed as knobs under their own names so the site's vocabulary is kept.
+ *
+ * Conservative on purpose: only exact literal matches are replaced, color
+ * matches are case-insensitive and cover hex/rgb()/rgba() spellings of the
+ * same value, and values inside url(...) or @font-face are left alone.
+ */
+const fs = require('fs'), path = require('path');
+const [,, cssPath, tokensPath, outDir] = process.argv;
+if (!cssPath || !tokensPath || !outDir) { console.error('usage: tokenize-css.cjs <input.css> <tokens.json> <out-dir>'); process.exit(1); }
+
+const css = fs.readFileSync(cssPath, 'utf8');
+const t = JSON.parse(fs.readFileSync(tokensPath, 'utf8'));
+fs.mkdirSync(outDir, { recursive: true });
+const remixDir = path.join(outDir, '..', 'remix'); fs.mkdirSync(remixDir, { recursive: true });
+
+/* ---------- color normalization ---------- */
+function parseColor(s) {
+  s = s.trim().toLowerCase();
+  let m;
+  if ((m = s.match(/^#([0-9a-f]{3})$/))) return [...m[1]].map((c) => parseInt(c + c, 16)).concat([1]);
+  if ((m = s.match(/^#([0-9a-f]{6})([0-9a-f]{2})?$/))) { const h = m[1]; return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)).concat([m[2] ? parseInt(m[2], 16) / 255 : 1]); }
+  if ((m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+))?\s*\)$/))) return [+m[1], +m[2], +m[3], m[4] == null ? 1 : +m[4]];
+  if ((m = s.match(/^rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.%]+))?\s*\)$/))) return [+m[1], +m[2], +m[3], m[4] == null ? 1 : m[4].endsWith('%') ? parseFloat(m[4]) / 100 : +m[4]];
+  return null;
+}
+const hex = ([r, g, b]) => '#' + [r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
+const spellings = (rgba) => {
+  const [r, g, b, a] = rgba.map((v, i) => (i < 3 ? Math.round(v) : v));
+  const out = [`rgb(${r}, ${g}, ${b})`, `rgb(${r},${g},${b})`, hex(rgba)];
+  const h = hex(rgba); if (/^#(.)\1(.)\2(.)\3$/.test(h)) out.push('#' + h[1] + h[3] + h[5]);
+  if (a !== 1) return [`rgba(${r}, ${g}, ${b}, ${a})`, `rgba(${r},${g},${b},${a})`];
+  return out.concat([`rgba(${r}, ${g}, ${b}, 1)`]);
+};
+
+/* ---------- pick roles ---------- */
+const knobs = [];
+const vars = {}; // name -> default literal
+const rewrite = []; // [regex, replacement]
+const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// colors
+const colors = (t.colors || []).map((c) => ({ ...c, rgba: parseColor(c.value) })).filter((c) => c.rgba);
+const bodyBg = parseColor(t.body?.background || '') , bodyFg = parseColor(t.body?.color || '');
+const same = (a, b) => a && b && a.slice(0, 3).every((v, i) => Math.round(v) === Math.round(b[i]));
+let ci = 0;
+for (const c of colors.slice(0, 14)) {
+  let role = `color-${++ci}`;
+  if (same(c.rgba, bodyFg)) role = 'color-text';
+  else if (same(c.rgba, bodyBg)) role = 'color-bg';
+  const name = `--rx-${role}`;
+  vars[name] = hex(c.rgba) + (c.rgba[3] !== 1 ? '' : '');
+  const lit = c.rgba[3] === 1 ? hex(c.rgba) : spellings(c.rgba)[0];
+  vars[name] = lit;
+  knobs.push({ id: name, group: 'Color', type: 'color', default: lit, uses: c.count, where: c.where });
+  for (const sp of spellings(c.rgba)) rewrite.push([new RegExp(`(?<![\\w-])${esc(sp)}(?![\\w-])`, 'gi'), `var(${name}, ${lit})`]);
+}
+// fonts (family stacks)
+const fams = new Map();
+for (const f of t.fonts || []) { const fam = f.value.split(' / ')[0]; fams.set(fam, (fams.get(fam) || 0) + f.count); }
+let fi = 0;
+for (const [fam, count] of [...fams.entries()].sort((a, b) => b[1] - a[1]).slice(0, 4)) {
+  const name = `--rx-font-${++fi}`; vars[name] = fam;
+  knobs.push({ id: name, group: 'Type', type: 'font', default: fam, uses: count });
+  rewrite.push([new RegExp(`font-family:\\s*${esc(fam)}`, 'g'), `font-family: var(${name}, ${fam})`]);
+}
+// sizes
+let si = 0;
+for (const s of (t.typeScale || []).slice(0, 8)) {
+  const px = s.value.split(' / ')[0]; if (!/px$/.test(px)) continue;
+  const name = `--rx-size-${++si}`; vars[name] = px;
+  knobs.push({ id: name, group: 'Type', type: 'length', default: px, min: 8, max: 160, step: 0.5, uses: s.count, where: s.where });
+  rewrite.push([new RegExp(`font-size:\\s*${esc(px)}(?![\\d.])`, 'g'), `font-size: var(${name}, ${px})`]);
+}
+// spacing
+let pi = 0;
+for (const s of (t.spacing || []).slice(0, 8)) {
+  const name = `--rx-space-${++pi}`; vars[name] = s.value;
+  knobs.push({ id: name, group: 'Space', type: 'length', default: s.value, min: 0, max: 256, step: 1, uses: s.count });
+  rewrite.push([new RegExp(`(padding|margin|gap|row-gap|column-gap)(-[a-z]+)?:\\s*${esc(s.value)}(?![\\d.])`, 'g'), `$1$2: var(${name}, ${s.value})`]);
+}
+// radii + shadows
+let ri = 0; for (const r of (t.radii || []).slice(0, 3)) { const name = `--rx-radius-${++ri}`; vars[name] = r.value; knobs.push({ id: name, group: 'Space', type: 'length', default: r.value, min: 0, max: 64, step: 1 }); rewrite.push([new RegExp(`border-radius:\\s*${esc(r.value)}(?![\\d.%])`, 'g'), `border-radius: var(${name}, ${r.value})`]); }
+let shi = 0; for (const s of (t.shadows || []).slice(0, 2)) { const name = `--rx-shadow-${++shi}`; vars[name] = s.value; knobs.push({ id: name, group: 'Color', type: 'text', default: s.value }); rewrite.push([new RegExp(`box-shadow:\\s*${esc(s.value)}`, 'g'), `box-shadow: var(${name}, ${s.value})`]); }
+// site's own custom props → knobs under their own names (not rewritten)
+for (const [k, v] of Object.entries(t.customProps || {})) {
+  const isColor = !!parseColor(v), isLen = /^-?[\d.]+(px|rem|em|vw|vh)$/.test(v);
+  knobs.push({ id: k, group: isColor ? 'Color' : isLen ? 'Space' : 'Site', type: isColor ? 'color' : isLen ? 'length' : 'text', default: v, native: true });
+}
+
+/* ---------- rewrite, protecting url() and @font-face ---------- */
+const protectedBlocks = [];
+let work = css.replace(/@font-face\s*\{[^}]*\}|url\([^)]*\)/g, (m) => { protectedBlocks.push(m); return `__RXP__${protectedBlocks.length - 1}__RXP__`; });
+let replaced = 0;
+// Only rewrite inside declaration blocks — never in selectors. Tailwind's
+// arbitrary-value classes (.text-\[\#e0a24a\]) carry the same literal in the
+// selector, and rewriting there silently breaks the rule.
+work = work.replace(/\{[^{}]*\}/g, (block) => {
+  let b = block;
+  for (const [re, rep] of rewrite) b = b.replace(re, (m) => { replaced++; return m.replace(re, rep); });
+  return b;
+});
+work = work.replace(/__RXP__(\d+)__RXP__/g, (_, i) => protectedBlocks[+i]);
+
+const base = path.basename(cssPath, '.css');
+fs.writeFileSync(path.join(outDir, `${base}.tokenized.css`), work);
+fs.writeFileSync(path.join(outDir, 'remix-tokens.css'), `/* remix base — generated by tokenize-css.cjs; directions override these */\n:root {\n${Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}\n`);
+fs.writeFileSync(path.join(remixDir, 'knobs.json'), JSON.stringify({ generatedFrom: path.basename(tokensPath), knobs }, null, 1));
+console.log(`${replaced} replacements, ${Object.keys(vars).length} vars, ${knobs.length} knobs → ${outDir}/${base}.tokenized.css, remix-tokens.css, ${remixDir}/knobs.json`);
+console.log('next: import remix-tokens.css BEFORE the tokenized stylesheet; verify 0% diff vs the untokenized build.');