iron-edge 1.2.0 → 2.0.1

package/skills/clone-inventory/scripts/inventory.mjs

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+/**
+ * inventory.mjs — mede as decisões visuais de uma página com o navegador.
+ *
+ * Núcleo compartilhado de TRANSPLANTAR e DESTILAR. Não lê CSS, não pergunta ao
+ * modelo: abre a página no Chromium, roda getComputedStyle sobre o DOM real,
+ * agrega por frequência e área, e classifica cor por papel. A saída é o
+ * inventory.json — o único artefato que os dois consumidores leem.
+ *
+ * Uso: node inventory.mjs <url> [--out arquivo.json] [--mobile] [--wait MS]
+ */
+import { chromium } from 'playwright';
+import { writeFile } from 'node:fs/promises';
+
+const argv = process.argv.slice(2);
+const url = argv[0];
+if (!url || url.startsWith('--')) {
+  console.error('uso: node inventory.mjs <url> [--out arquivo.json] [--mobile] [--wait MS]');
+  process.exit(2);
+}
+const opt = (n, d) => { const i = argv.indexOf(n); return i !== -1 && argv[i + 1] && !argv[i + 1].startsWith('--') ? argv[i + 1] : d; };
+const OUT = opt('--out', '');
+const MOBILE = argv.includes('--mobile');
+const WAIT = parseInt(opt('--wait', '1400'), 10);
+const UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36';
+const log = (...a) => console.error('[inventory]', ...a);
+
+// ---------------------------------------------------------------- cor: utils (Node)
+function parseColor(str) {
+  if (!str) return null;
+  const s = str.trim().toLowerCase();
+  if (s === 'transparent' || s === 'none') return null;
+  let m = s.match(/^rgba?\(([^)]+)\)/);
+  if (m) {
+    const p = m[1].split(/[,\/\s]+/).filter(Boolean).map(x => x.trim());
+    const r = +p[0], g = +p[1], b = +p[2];
+    const a = p[3] === undefined ? 1 : (p[3].endsWith('%') ? +p[3].slice(0, -1) / 100 : +p[3]);
+    if ([r, g, b].some(Number.isNaN)) return null;
+    return { r, g, b, a };
+  }
+  m = s.match(/^#([0-9a-f]{3,8})$/);
+  if (m) {
+    let h = m[1];
+    if (h.length === 3) h = h.split('').map(c => c + c).join('');
+    if (h.length === 6 || h.length === 8) {
+      return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1 };
+    }
+  }
+  return null;
+}
+const toHex = (c) => '#' + [c.r, c.g, c.b].map(x => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0')).join('');
+function toHsl({ r, g, b }) {
+  r /= 255; g /= 255; b /= 255;
+  const mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn;
+  let h = 0; const l = (mx + mn) / 2;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  if (d !== 0) {
+    if (mx === r) h = ((g - b) / d) % 6;
+    else if (mx === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60; if (h < 0) h += 360;
+  }
+  return { h, s, l };
+}
+const relLum = ({ r, g, b }) => { const f = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b); };
+const contrast = (a, b) => { const l1 = relLum(a), l2 = relLum(b); const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1]; return (hi + 0.05) / (lo + 0.05); };
+// neutro = cinza/quase-branco/quase-preto. Usa croma ABSOLUTO em RGB (0-255),
+// não saturação HSL: em luminância extrema o HSL infla a saturação e faz um
+// cinza-clarinho (#e5edf5) passar por "cor de marca". O croma absoluto não mente.
+const isNeutral = (c) => { const mx = Math.max(c.r, c.g, c.b), mn = Math.min(c.r, c.g, c.b), l = (mx + mn) / 510; return (mx - mn) < 22 || l < 0.05 || l > 0.96; };
+// cor de marca = saturada de verdade (croma alto E saturação HSL relevante).
+// Separa o roxo do Stripe de um slate de texto ou de uma borda cinza.
+const isBrand = (c) => { const mx = Math.max(c.r, c.g, c.b), mn = Math.min(c.r, c.g, c.b); return (mx - mn) >= 40 && toHsl(c).s >= 0.25; };
+
+// ---------------------------------------------------------------- captura no browser
+const COLLECT = () => {
+  const px = v => parseFloat(v) || 0;
+  // normaliza QUALQUER cor CSS (oklch, color(srgb), lab, lch, hwb, named) para
+  // rgb/hex via canvas. getComputedStyle no Chromium devolve oklch as-is quando a
+  // fonte usa oklch (padrão do Tailwind v4) — sem isso, fundo/texto/marca de todo
+  // site moderno saíam nulos e o inventário retornava lixo com cara de válido.
+  const _cx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  const norm = (col) => {
+    if (!col) return col;
+    try {
+      _cx.clearRect(0, 0, 1, 1); _cx.fillStyle = col; _cx.fillRect(0, 0, 1, 1);
+      const d = _cx.getImageData(0, 0, 1, 1).data;   // rasteriza: resolve oklch/color()/lab/named p/ rgb real
+      const a = +(d[3] / 255).toFixed(3);
+      return a >= 1 ? `rgb(${d[0]}, ${d[1]}, ${d[2]})` : `rgba(${d[0]}, ${d[1]}, ${d[2]}, ${a})`;
+    } catch { return col; }
+  };
+  const vis = (el, r, cs) => r.width > 0 && r.height > 0 && cs.display !== 'none' && cs.visibility !== 'hidden' && px(cs.opacity) > 0.05;
+  const directText = el => Array.from(el.childNodes).filter(n => n.nodeType === 3).map(n => n.textContent.trim()).join('').length;
+
+  const bg = {}, fg = {}, bd = {}, shadows = {}, radii = {}, spaces = {}, btnBg = {}, linkFg = {};
+  const fonts = {};            // "family|weight|size" -> textLen
+  const headings = [];         // {tag, size}
+  const buttons = [];          // {h, px, radius, weight, fontSize}
+  const sections = [];         // ritmo
+
+  const add = (o, k, w) => { if (!k) return; o[k] = (o[k] || 0) + w; };
+
+  for (const el of document.querySelectorAll('*')) {
+    const tag = el.tagName.toLowerCase();
+    if (['script', 'style', 'head', 'meta', 'link', 'title', 'noscript', 'br'].includes(tag)) continue;
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    if (!vis(el, r, cs)) continue;
+    const area = r.width * r.height;
+    const tlen = directText(el);
+
+    add(bg, norm(cs.backgroundColor), area);
+    if (tlen) {
+      add(fg, norm(cs.color), tlen);
+      add(fonts, `${cs.fontFamily}|${cs.fontWeight}|${Math.round(px(cs.fontSize))}`, tlen);
+    }
+    for (const side of ['Top', 'Right', 'Bottom', 'Left']) {
+      if (px(cs[`border${side}Width`]) > 0) add(bd, norm(cs[`border${side}Color`]), 1);
+    }
+    if (cs.boxShadow && cs.boxShadow !== 'none') add(shadows, cs.boxShadow, area);
+    // raio > 999px é pill/círculo (border-radius:50%/9999 computado num elemento
+    // grande vira px gigante, ex: 33554400). Normaliza pra 9999 (convenção
+    // "full", igual ao rounded-full do Tailwind) — o valor cru não serve.
+    const br = px(cs.borderTopLeftRadius);
+    if (br > 0) add(radii, br > 999 ? 9999 : Math.round(br), 1);
+    for (const p of ['paddingTop', 'paddingLeft', 'gap', 'rowGap', 'columnGap']) {
+      const v = Math.round(px(cs[p])); if (v > 0) add(spaces, v, 1);
+    }
+
+    // heading: registra a fonte mesmo sem texto DIRETO (o <h1> costuma ter o
+    // texto dentro de um <span>, então o size/family do heading não entraria em
+    // `fonts` e a razão de escala saía nula).
+    if (/^h[1-6]$/.test(tag)) { const s = Math.round(px(cs.fontSize)); if (s > 0) headings.push({ tag, size: s, family: cs.fontFamily.split(',')[0].replace(/["']/g, '').trim(), weight: +cs.fontWeight }); }
+
+    // botão de verdade: <button>/role=button, OU um <a> com preenchimento real
+    // (padding lateral E fundo não-transparente). O gate em 12px evita contar
+    // nav-links de texto (que têm padding pequeno e fundo transparente) como botão.
+    const bgSolid = cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && !/, 0\)$/.test(cs.backgroundColor);
+    const isBtnTag = tag === 'button' || el.getAttribute('role') === 'button';
+    const isBtnLink = tag === 'a' && px(cs.paddingLeft) >= 12 && bgSolid && cs.display !== 'inline';
+    // exige tamanho de botão (>=28px) e preenchimento (bg sólido OU padding real)
+    // pra não contar ícone de nav / botão-fechar como componente de botão.
+    const looksBtn = (isBtnTag || isBtnLink) && r.height >= 28 && (bgSolid || px(cs.paddingLeft) >= 10);
+    if (looksBtn && r.height < 120) {
+      add(btnBg, cs.backgroundColor, 1);
+      buttons.push({ h: Math.round(r.height), px: Math.round(px(cs.paddingLeft)), radius: Math.round(px(cs.borderTopLeftRadius)), weight: cs.fontWeight, fontSize: Math.round(px(cs.fontSize)) });
+    }
+    if (tag === 'a' && tlen && px(cs.paddingLeft) < 6) add(linkFg, cs.color, tlen);
+  }
+
+  // ritmo: filhos diretos grandes de body / main. Se a página embrulha tudo num
+  // wrapper único (SPA), desce um nível pra achar as seções de verdade.
+  let scope = document.querySelector('main') || document.body;
+  const big = c => c.getBoundingClientRect().height >= 40;
+  let kids = Array.from(scope.children).filter(big);
+  while (kids.length === 1 && kids[0].children.length > 1) { scope = kids[0]; kids = Array.from(scope.children).filter(big); }
+  let idx = 0;
+  for (const el of kids) {
+    const r = el.getBoundingClientRect();
+    if (r.height < 40) continue;
+    const kids = el.querySelectorAll('*').length;
+    const txt = el.textContent.trim().length;
+    sections.push({ i: ++idx, tag: el.tagName.toLowerCase(), height: Math.round(r.height), children: kids, textLen: txt, density: kids / Math.max(1, r.height / 100) });
+  }
+
+  return { bg, fg, bd, shadows, radii, spaces, btnBg, linkFg, fonts, headings, buttons, sections, docBg: getComputedStyle(document.body).backgroundColor };
+};
+
+async function autoScroll(page) {
+  try {
+    await page.evaluate(async () => {
+      await new Promise(res => { let t = 0; const s = Math.max(400, innerHeight * 0.8); const id = setInterval(() => { scrollBy(0, s); t += s; if (t >= document.body.scrollHeight + innerHeight) { clearInterval(id); scrollTo(0, 0); res(); } }, 90); setTimeout(() => { clearInterval(id); scrollTo(0, 0); res(); }, 8000); });
+    });
+    await page.waitForLoadState('networkidle').catch(() => {});
+  } catch {}
+}
+
+// ---------------------------------------------------------------- agregação (Node)
+const top = (o, n = 12) => Object.entries(o).sort((a, b) => b[1] - a[1]).slice(0, n);
+function hexFreq(o) {
+  const acc = {};
+  for (const [k, w] of Object.entries(o)) { const c = parseColor(k); if (!c || c.a < 0.5) continue; const hx = toHex(c); acc[hx] = (acc[hx] || 0) + w; }
+  return acc;
+}
+
+function classifyColors(raw) {
+  const bgH = hexFreq(raw.bg), fgH = hexFreq(raw.fg), bdH = hexFreq(raw.bd), btnH = hexFreq(raw.btnBg), linkH = hexFreq(raw.linkFg);
+  const bgTop = top(bgH), fgTop = top(fgH);
+
+  // sem cor medida → null, não um chute fixo (#fff/#000). O SKILL.md promete
+  // "campo que a página não tem sai null" — o fallback fixo quebrava isso.
+  const fundo = bgTop[0] ? bgTop[0][0] : null;
+  const fundoC = fundo ? parseColor(fundo) : null;
+  const texto = fgTop[0] ? fgTop[0][0] : null;
+
+  // superfície: bg diferente do fundo, luminância próxima (é uma "camada"), e
+  // que NÃO seja cor de marca. Aceita levemente tintado (#1c2c42, card de dark
+  // UI) — exigir neutro estrito deixava esse tom órfão no transplante.
+  let superficie = null;
+  if (fundoC) for (const [hx, w] of bgTop) {
+    if (hx === fundo) continue;
+    const c = parseColor(hx);
+    if (!isBrand(c) && Math.abs(relLum(c) - relLum(fundoC)) < 0.30) { superficie = hx; break; }
+  }
+
+  // primária: cor de marca (saturada de verdade) mais forte em botão/link; senão
+  // a de maior peso geral. isBrand exclui slate de texto e borda cinza.
+  const brandPool = {};
+  for (const src of [btnH, linkH, bgH, fgH]) for (const [hx, w] of Object.entries(src)) { const c = parseColor(hx); if (isBrand(c)) brandPool[hx] = (brandPool[hx] || 0) + w; }
+  const brandTop = top(brandPool, 6).map(x => x[0]);
+  // prioriza cor que aparece em botão
+  const btnBrand = top(btnH).map(x => x[0]).find(hx => isBrand(parseColor(hx)));
+  const primaria = btnBrand || brandTop[0] || null;
+  const acento = brandTop.find(hx => hx !== primaria) || null;
+  const borda = top(bdH)[0] ? top(bdH)[0][0] : superficie || null;
+
+  const withFreq = (hx, o) => hx ? { hex: hx, freq: Math.round(o[hx] || 0) } : null;
+  return {
+    fundo: withFreq(fundo, bgH),
+    texto: withFreq(texto, fgH),
+    superficie: withFreq(superficie, bgH),
+    primaria: withFreq(primaria, brandPool),
+    acento: withFreq(acento, brandPool),
+    borda: withFreq(borda, bdH),
+    _todas_bg: bgTop.map(([hex, w]) => ({ hex, area: Math.round(w) })),
+    _todas_fg: fgTop.map(([hex, w]) => ({ hex, textLen: Math.round(w) })),
+  };
+}
+
+function classifyType(raw) {
+  const byUse = top(raw.fonts, 20).map(([k, w]) => { const [family, weight, size] = k.split('|'); return { family: family.split(',')[0].replace(/["']/g, '').trim(), weight: +weight, size: +size, textLen: w }; });
+  const corpo = byUse.slice().sort((a, b) => b.textLen - a.textLen)[0] || null;
+  // display sai do maior heading real (que agora carrega family/weight), com
+  // fallback pra maior fonte em uso quando a página não tem h1-h6.
+  let display = null;
+  if (raw.headings.length) { const big = raw.headings.slice().sort((a, b) => b.size - a.size)[0]; display = { family: big.family, weight: big.weight, size: big.size }; }
+  else if (byUse.length) { const ms = Math.max(...byUse.map(f => f.size)); display = byUse.filter(f => f.size === ms).sort((a, b) => b.weight - a.weight)[0]; }
+  const razao = corpo && display && corpo.size ? +(display.size / corpo.size).toFixed(2) : null;
+  return {
+    display: display ? { familia: display.family, peso: display.weight, tamanho: display.size } : null,
+    corpo: corpo ? { familia: corpo.family, peso: corpo.weight, tamanho: corpo.size } : null,
+    razao_escala: razao,
+    familias: [...new Set(byUse.map(f => f.family))].slice(0, 5),
+  };
+}
+
+function classifySpacing(raw) {
+  const vals = Object.entries(raw.spaces).map(([v, c]) => [+v, c]).sort((a, b) => b[1] - a[1]);
+  const totalC = vals.reduce((s, [, c]) => s + c, 0);
+  const mult8 = vals.filter(([v]) => v % 8 === 0).reduce((s, [, c]) => s + c, 0);
+  const mult4 = vals.filter(([v]) => v % 4 === 0).reduce((s, [, c]) => s + c, 0);
+  const eDefault = totalC > 0 && mult8 / totalC > 0.75;
+  // passo base = menor valor recorrente que divide a maioria
+  const commons = vals.slice(0, 8).map(([v]) => v).filter(v => v > 0);
+  const passo = commons.length ? Math.min(...commons) : null;
+  return { passo_base: passo, e_default_tailwind: eDefault, cobertura_mult8: totalC ? +(mult8 / totalC).toFixed(2) : null, cobertura_mult4: totalC ? +(mult4 / totalC).toFixed(2) : null, valores_comuns: vals.slice(0, 8).map(([v, c]) => ({ px: v, freq: c })) };
+}
+
+function classifyShadow(raw) {
+  const t = top(raw.shadows, 3);
+  if (!t.length) return { valor: null, colorida: false };
+  const val = t[0][0];
+  const cm = val.match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/);
+  let colorida = false;
+  if (cm) { const c = parseColor(cm[0]); if (c) colorida = !isNeutral(c) && c.a > 0.02; }
+  return { valor: val, colorida, outras: t.slice(1).map(x => x[0]) };
+}
+
+function classifyRadius(raw) {
+  const t = top(raw.radii, 6);
+  return { principal: t[0] ? +t[0][0] : 0, distribuicao: t.map(([v, c]) => ({ px: +v, freq: c })) };
+}
+
+function classifyRhythm(raw) {
+  const s = raw.sections || [];
+  const label = d => d < 6 ? 'baixa' : d < 16 ? 'media' : 'alta';
+  return s.slice(0, 20).map(x => ({ secao: x.i, tag: x.tag, altura: x.height, densidade: label(x.density), elementos: x.children }));
+}
+
+function classifyButton(raw) {
+  if (!raw.buttons.length) return null;
+  const mode = arr => { const m = {}; arr.forEach(v => m[v] = (m[v] || 0) + 1); return +Object.entries(m).sort((a, b) => b[1] - a[1])[0][0]; };
+  return { altura: mode(raw.buttons.map(b => b.h)), padding_x: mode(raw.buttons.map(b => b.px)), raio: mode(raw.buttons.map(b => b.radius)), peso: mode(raw.buttons.map(b => +b.weight)), tamanho_fonte: mode(raw.buttons.map(b => b.fontSize)) };
+}
+
+// checagem de contraste do PRÓPRIO original (baseline pra comparar depois do transplante)
+function contrastBaseline(cores) {
+  const bg = parseColor(cores.fundo?.hex), fg = parseColor(cores.texto?.hex);
+  if (!bg || !fg) return null;
+  const ratio = +contrast(bg, fg).toFixed(2);
+  return { texto_sobre_fundo: ratio, passa_AA_corpo: ratio >= 4.5, passa_AA_titulo: ratio >= 3 };
+}
+
+// ---------------------------------------------------------------- main
+(async () => {
+  const browser = await chromium.launch({ headless: true });   // sandbox ON (correção da auditoria)
+  try {
+    const ctx = await browser.newContext({ userAgent: UA, viewport: MOBILE ? { width: 390, height: 844 } : { width: 1440, height: 900 }, deviceScaleFactor: 1, ignoreHTTPSErrors: false, serviceWorkers: 'block' });
+    const page = await ctx.newPage();
+    log('abrindo', url);
+    const resp = await page.goto(url, { waitUntil: 'load', timeout: 45000 });
+    // 404/500/etc: não medir uma página de erro como se fosse o site. Antes,
+    // devolvia um inventory.json plausível e FALSO com exit 0 (achado do gate).
+    if (resp && resp.status() >= 400) {
+      console.error(`[inventory] FALHA: ${url} respondeu HTTP ${resp.status()}. Não vou medir uma página de erro — confira a URL.`);
+      await browser.close().catch(() => {}); process.exit(1);
+    }
+    await page.waitForLoadState('networkidle').catch(() => {});
+    await autoScroll(page);
+    await page.waitForTimeout(WAIT);
+    await page.evaluate(() => document.fonts && document.fonts.ready).catch(() => {});
+
+    const raw = await page.evaluate(COLLECT);
+    const cores = classifyColors(raw);
+    const inventory = {
+      fonte: url,
+      medidoEm: new Date().toISOString(),
+      viewport: MOBILE ? 'mobile-390' : 'desktop-1440',
+      cores,
+      tipografia: classifyType(raw),
+      espacamento: classifySpacing(raw),
+      raio: classifyRadius(raw),
+      sombra: classifyShadow(raw),
+      ritmo: classifyRhythm(raw),
+      componentes: { botao: classifyButton(raw) },
+      contraste_original: contrastBaseline(cores),
+      _amostra: { elementos_bg: Object.keys(raw.bg).length, headings: raw.headings.length, botoes: raw.buttons.length, secoes: raw.sections.length },
+    };
+
+    const json = JSON.stringify(inventory, null, 2);
+    if (OUT) { await writeFile(OUT, json); log('salvo em', OUT); }
+    process.stdout.write(json + '\n');
+  } finally {
+    await browser.close().catch(() => {});
+  }
+})().catch(e => { console.error('[inventory] FALHA:', e.message); process.exit(1); });

package/skills/clone-organize/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: clone-organize
+description: Separa um HTML monolítico (gerado por IA ou clonado) em arquivos limpos — extrai CSS e JS inline para assets/, classifica cada SVG, e devolve um HTML organizado visualmente idêntico + um STACK.md. Transforma o original de forma incremental (não reescreve de memória) e verifica com screenshot antes/depois. Use quando o usuário tiver um index.html gigante e impossível de manter e quiser organizá-lo sem mudar a aparência.
+argument-hint: <index.html> [--lang pt-BR] [--out pasta]
+allowed-tools: Bash(node ${CLAUDE_SKILL_DIR}/scripts/verify-visual.mjs *), Read, Write, Edit
+---
+
+# clone-organize — monolito → arquivos limpos, sem mudar a aparência
+
+> **1ª execução:** esta skill depende de Node 18+ e de pacotes npm (Playwright). Se `node_modules/` não existir na pasta da skill, rode antes: `cd ${CLAUDE_SKILL_DIR} && npm install && npx playwright install chromium`.
+
+Pega um `index.html` que empilha `<style>`, `<script>` e SVG inline e devolve um
+espelho organizado: CSS e JS em `assets/`, SVGs classificados, HTML legível. A
+regra que rege tudo: **a aparência não muda.** Fidelidade é garantida por
+transformação incremental do original, não por reescrita de memória.
+
+## Dois modos (não se misturam)
+- **Organizar (padrão):** separa os assets, mantém o texto como está. Fiel ao pixel.
+- **Traduzir (`--lang pt-BR`):** passo POSTERIOR e separado. Traduzir muda o
+  comprimento do texto (PT-BR cresce ~47%, botões dobram), então este modo
+  **autoriza reajuste de layout** e exige a verificação visual do STEP 7. Nunca
+  traduza no mesmo passo em que promete fidelidade ao pixel — as duas se anulam.
+
+---
+
+## STEP 1 — ANALISAR
+Leia o INPUT inteiro. Mapeie: cores, tipografia, animações, componentes, layout,
+efeitos, assets referenciados, cada `<style>`/`<script>`/`<svg>`. Não escreva nada
+antes de terminar este passo.
+
+## STEP 2 — EXTRAIR CSS
+Para cada `<style>`: entenda a função, salve em `assets/css/[nome-descritivo].css`
+(nome por função: `animations.css`, `components.css`). Blocos da mesma preocupação
+viram um arquivo só. Inclui `<style>` dentro do `<body>`, não só do `<head>`.
+- **Antes de escrever, verifique se o arquivo já existe.** Se existir, sufixe
+  (`components-2.css`) — a promessa é não sobrescrever nada.
+
+## STEP 3 — EXTRAIR JS
+Para cada `<script>` com JS real: salve em `assets/js/[nome-descritivo].js`.
+**NÃO extraia (devem permanecer inline):**
+- `<script type="application/ld+json">` (dados estruturados).
+- Config de framework inline: `tailwind.config = {...}`, `window.__` de runtime,
+  qualquer `<script>` que o runtime da página consome na ordem em que está. Extrair
+  isso quebra cor/fonte/espaçamento customizados (o design que você quer preservar).
+- Handlers de evento de uma linha, definidos como **até 120 caracteres**.
+
+## STEP 4 — CLASSIFICAR CADA SVG
+**Categoria A — ícone Lucide** (`class="lucide..."` ou `data-lucide`): troque por
+`<i data-lucide="[nome]" class="[classes não-lucide]"></i>`. Não salve arquivo.
+
+**Categoria B — SVG que herda cor** (`currentColor`, `fill` via classe Tailwind,
+ou qualquer dependência de cor do contexto): mantenha inline, minificado. Não salve.
+
+**Categoria C — SVG só com cor fixa** (hex/rgba, sem herança em nenhum estado):
+salve em `assets/images/svg/[nome].svg`, troque por
+`<img src="..." class="[classes]" alt=""/>` (alt vazio para decorativo — não
+invente descrição; se for informativo, descreva o que a imagem comunica).
+
+**Na dúvida entre B e C, fique com B (inline).** Além de `currentColor` e hover,
+vira `<img>` também quebra: CSS de fora mirando dentro do SVG (`.card:hover svg
+path`), `<use>` apontando para símbolo em outro ponto, gradiente/filtro por `id`
+externo, e animação interna dependente do documento. Qualquer um desses → B.
+
+## STEP 5 — TRANSFORMAR (não reescrever de memória)
+Parta do HTML original e **remova apenas** os blocos `<style>`/`<script>` extraídos,
+pondo os `<link>`/`<script src>` no lugar, e aplicando as trocas de SVG. Todo o
+resto do markup fica intacto. **Não reescreva a página de memória** — é onde se
+omite seção e se inventa texto. A fidelidade vem de mexer só no que estes passos
+mandam mexer.
+- `<head>`: fonts, depois `<link>` de CSS, cada um com um comentário do que faz e
+  onde é usado. Scripts que precisam ficar no head (runtime) permanecem, comentados.
+- `<body>`: seções com um comentário de rótulo cada; ao final, os `<script src>`
+  comentados. Sem outros comentários no body.
+
+## STEP 6 — STACK.md
+Liste cada tecnologia/lib encontrada no INPUT, uma linha cada (nome + função).
+Só o que está de fato presente. **Não invente nem assuma** tecnologia não encontrada.
+
+## STEP 7 — VERIFICAR (screenshot, não confiança)
+Rode a verificação visual: ela serve o original e o organizado e tira screenshot
+dos dois pra comparar.
+```bash
+node ${CLAUDE_SKILL_DIR}/scripts/verify-visual.mjs <index.html original> <design-system.html>
+```
+Abra os dois PNGs e confirme que são visualmente iguais. No modo traduzir, é aqui
+que você confere se algum texto maior estourou container e reajusta.
+
+---
+
+## QUALITY BAR (corrigida)
+- [ ] Toda seção do original presente e visualmente idêntica (conferido no STEP 7).
+- [ ] Nenhum `<style>` ou `<script>` de estilo/comportamento sobrou inline —
+      **exceto JSON-LD, config de framework e handlers ≤120 char**, que devem ficar.
+- [ ] Ícones Lucide usam `<i data-lucide>` — nunca `<img>` nem SVG inline.
+- [ ] Nenhum SVG que herda cor virou `<img>`.
+- [ ] Todos os caminhos de asset extraídos resolvem.
+- [ ] Imports no `<head>` e antes de `</body>` têm comentário descritivo.
+- [ ] Nenhum arquivo existente foi sobrescrito (colisões sufixadas).
+- [ ] (Modo traduzir) todo texto visível traduzido E nenhum container estourado.
+
+> Removido de propósito o antigo "arquivo menor que o original": separar assets já
+> reduz o HTML; premiar tamanho menor incentiva cortar conteúdo. O que importa é
+> fidelidade + separação, não encolher.
+
+## Saída
+`design-system.html` + `assets/` + `STACK.md` na pasta do INPUT (ou `--out`), mais
+os screenshots do STEP 7. Rode o `gate` antes de entregar.