iron-edge 1.2.0 → 2.0.0

package/skills/clone-organize/package-lock.json

@@ -0,0 +1,307 @@
+{
+  "name": "clone-organize",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "clone-organize",
+      "dependencies": {
+        "cheerio": "^1.0.0",
+        "playwright": "^1.50.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "license": "ISC"
+    },
+    "node_modules/cheerio": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "encoding-sniffer": "^0.2.1",
+        "htmlparser2": "^10.1.0",
+        "parse5": "^7.3.0",
+        "parse5-htmlparser2-tree-adapter": "^7.1.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^7.19.0",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "license": "MIT"
+    },
+    "node_modules/undici": {
+      "version": "7.26.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

package/skills/clone-organize/package.json

@@ -0,0 +1 @@
+{ "name": "clone-organize", "private": true, "type": "module", "engines": { "node": ">=18" }, "dependencies": { "playwright": "^1.50.0", "cheerio": "^1.0.0" } }

package/skills/clone-organize/scripts/verify-visual.mjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * verify-visual.mjs — screenshot do original × do organizado, pra confirmar que
+ * clone-organize não mudou a aparência. Fecha o defeito de fundo (verificação
+ * auto-declarada): em vez de "ficou igual", um PNG lado a lado pra olhar.
+ *
+ * Serve a pasta de cada arquivo num http estático efêmero (file:// quebra caminho
+ * root-absoluto e módulos), tira screenshot full-page dos dois, e coleta erros de
+ * console do organizado.
+ *
+ * Uso: node verify-visual.mjs <original.html> <organizado.html> [--out pasta]
+ */
+import { chromium } from 'playwright';
+import { createServer } from 'node:http';
+import { readFile, mkdir, writeFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+
+const [a, b] = process.argv.slice(2);
+if (!a || !b) { console.error('uso: node verify-visual.mjs <original.html> <organizado.html> [--out pasta]'); process.exit(2); }
+const outArg = (() => { const i = process.argv.indexOf('--out'); return i !== -1 ? process.argv[i + 1] : path.join(path.dirname(b), '_verify'); })();
+
+const MIME = { '.html': 'text/html; charset=utf-8', '.css': 'text/css', '.js': 'application/javascript', '.mjs': 'application/javascript', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.webp': 'image/webp', '.gif': 'image/gif', '.woff2': 'font/woff2', '.woff': 'font/woff', '.ttf': 'font/ttf', '.otf': 'font/otf', '.ico': 'image/x-icon' };
+
+function serve(root) {
+  return new Promise(resolve => {
+    const srv = createServer(async (req, res) => {
+      try {
+        let p = decodeURIComponent(req.url.split('?')[0]);
+        let fp = path.join(root, p);
+        try { if ((await stat(fp)).isDirectory()) fp = path.join(fp, 'index.html'); } catch {}
+        const body = await readFile(fp);
+        res.setHeader('Content-Type', MIME[path.extname(fp).toLowerCase()] || 'application/octet-stream');
+        res.setHeader('Cache-Control', 'no-cache');
+        res.end(body);
+      } catch { res.statusCode = 404; res.end('not found'); }
+    });
+    srv.listen(0, '127.0.0.1', () => resolve({ srv, port: srv.address().port }));
+  });
+}
+
+async function shoot(ctx, url, file) {
+  const page = await ctx.newPage();
+  const errors = [];
+  page.on('console', m => { if (m.type() === 'error') errors.push(m.text().slice(0, 200)); });
+  page.on('pageerror', e => errors.push(e.message.slice(0, 200)));
+  try {
+    await page.goto(url, { waitUntil: 'load', timeout: 30000 });
+    await page.waitForLoadState('networkidle').catch(() => {});
+    await page.evaluate(async () => { await new Promise(r => { let t = 0; const s = setInterval(() => { scrollBy(0, 800); t += 800; if (t > document.body.scrollHeight) { clearInterval(s); scrollTo(0, 0); r(); } }, 90); setTimeout(() => { clearInterval(s); r(); }, 6000); }); }).catch(() => {});
+    await page.evaluate(() => document.fonts && document.fonts.ready).catch(() => {});
+    await page.waitForTimeout(800);
+    await page.screenshot({ path: file, fullPage: true });
+  } catch (e) { errors.push('goto falhou: ' + e.message); }
+  finally { await page.close().catch(() => {}); }
+  return errors;
+}
+
+(async () => {
+  await mkdir(outArg, { recursive: true });
+  const A = await serve(path.dirname(path.resolve(a)));
+  const B = await serve(path.dirname(path.resolve(b)));
+  const urlA = `http://127.0.0.1:${A.port}/${path.basename(a)}`;
+  const urlB = `http://127.0.0.1:${B.port}/${path.basename(b)}`;
+  const browser = await chromium.launch({ headless: true });   // sandbox ON
+  try {
+    const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
+    const fa = path.join(outArg, 'original.png');
+    const fb = path.join(outArg, 'organizado.png');
+    const errA = await shoot(ctx, urlA, fa);
+    const errB = await shoot(ctx, urlB, fb);
+    const report = { original: a, organizado: b, screenshots: { original: fa, organizado: fb }, consoleErrosOriginal: errA, consoleErrosOrganizado: errB, novosErros: errB.filter(e => !errA.includes(e)) };
+    await writeFile(path.join(outArg, 'report.json'), JSON.stringify(report, null, 2));
+    console.log(`[verify-visual] screenshots: ${fa}  ×  ${fb}`);
+    console.log(`[verify-visual] erros de console — original: ${errA.length}, organizado: ${errB.length}, NOVOS no organizado: ${report.novosErros.length}`);
+    report.novosErros.slice(0, 5).forEach(e => console.log('   novo erro:', e));
+    if (report.novosErros.length) console.log('[verify-visual] ⚠️ o organizado introduziu erro(s) que o original não tinha — a extração quebrou algo.');
+    await ctx.close();
+  } finally { await browser.close().catch(() => {}); A.srv.close(); B.srv.close(); }
+})().catch(e => { console.error('[verify-visual] FALHA:', e.message); process.exit(1); });

package/skills/clone-site/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: clone-site
+description: Clona um site 1:1 (todas as páginas, imagens, fontes, CSS e animações) em um espelho offline fiel e deployável. Use sempre que o usuário mandar uma URL pedindo para clonar, espelhar, copiar, baixar ou "puxar" um site — ou quando mencionar clonar um site e fornecer um endereço.
+argument-hint: [url] [--opções]
+allowed-tools: Bash, Read, Write, Edit
+---
+
+# clone-site — Clonagem 1:1 fiel e deployável
+
+Clona qualquer site em um **espelho estático fiel** que roda em localhost e pode
+subir direto no Vercel. Motor **híbrido auto-detectado**: usa um navegador headless
+(Playwright) que renderiza o site AO VIVO e intercepta toda a rede — por isso captura
+SPAs client-side, lazy assets, animações e, crucialmente, **fontes de CDN travadas por
+domínio** (Adobe Typekit etc.) que o wget nunca consegue. wget é só o fallback rápido.
+
+> Diretório da skill: `${CLAUDE_SKILL_DIR}` (todos os scripts ficam em `scripts/`).
+
+> ⚠️ **Windows: esta skill NÃO roda nativamente** — o orquestrador é shell script e o
+> bootstrap do Playwright pressupõe ambiente Unix. Em máquina Windows, diga isso ao
+> usuário ANTES de tentar (nunca falhe em silêncio) e ofereça o caminho possível:
+> WSL, ou rodar a clonagem numa máquina Mac/Linux e trazer a pasta pronta.
+> Máquina corporativa gerenciada: confirmar com o usuário se navegador headless é
+> permitido pela política antes de instalar qualquer coisa.
+
+## Quando usar
+- Usuário manda uma URL e pede para clonar / espelhar / copiar / baixar o site.
+- Usuário quer uma cópia local navegável de um site (próprio ou de cliente).
+- Reconstrução: precisa do site original fiel como referência antes de refazer.
+
+## Fluxo (faça assim)
+
+1. **Confirme a URL e a pasta de saída.** Default: `~/site-clones/<host>-<data>`.
+   Se o usuário deu uma pasta de projeto, use `--out <pasta>`.
+
+2. **Rode o orquestrador.** Ele detecta o tipo, faz bootstrap do Playwright (1ª vez
+   baixa ~120MB de Chromium), clona, sobe o servidor e verifica:
+   ```bash
+   bash ${CLAUDE_SKILL_DIR}/scripts/clone.sh "<URL>" --out "<PASTA>"
+   ```
+   Rode em **background** se o site for grande (crawl de várias páginas demora):
+   use `run_in_background: true` no Bash e acompanhe com a saída da tarefa.
+
+3. **Leia o resultado.** Ao final o script imprime: nº de arquivos, URL local
+   (`http://localhost:8765/`), `_clone-manifest.json` (páginas + fontes detectadas)
+   e `_verify/report.json` (erros de console, 404s, fontes faltando no clone, e
+   screenshots original×clone em `_verify/*.png`).
+
+4. **Valide visualmente.** Leia 1-2 screenshots de `_verify/` com a ferramenta de
+   imagem e compare com o original. Confira `report.json`:
+   - `fontsMissingInClone` vazio → fontes OK.
+   - `cloneFailedRequests` só com domínios de tracking → OK (são esperados).
+   - `cloneConsoleErrors` vazio ou só ruído de analytics → OK.
+
+5. **Conserte o que faltar** (raro com o motor de navegador). Veja o guia de
+   diagnóstico em [reference/lessons.md](reference/lessons.md) — cobre fontes,
+   scroll virtual (conteúdo que só aparece após rolar), chunks ausentes do Next.js,
+   imagens dinâmicas e o servidor.
+
+6. **Entregue.** Diga ao usuário a pasta, a URL local e abra no navegador se ele
+   quiser (`open -a "Google Chrome" http://localhost:8765/`). Para deploy: a pasta
+   é estática e root-absoluta → `vercel deploy` direto, ou Chrome Brain.
+
+## Opções do clone.sh
+| Flag | Efeito |
+|------|--------|
+| `--out DIR` | pasta de saída (default `~/site-clones/<host>-<data>`) |
+| `--engine auto\|browser\|wget` | motor; `auto`=browser (fallback wget) |
+| `--max-pages N` | máx. de páginas no crawl (default 60) |
+| `--no-crawl` | clona só a URL dada (sem seguir links) |
+| `--mobile` | passada extra mobile (captura assets responsivos) |
+| `--include "a,b"` / `--exclude "a,b"` | filtra caminhos do crawl |
+| `--keep-trackers` | mantém GTM/Analytics/Pixel (default: remove p/ console limpo) |
+| `--form-toast` | injeta aviso amigável em formulários (clone estático não tem backend) |
+| `--storage-state F` | clonagem autenticada: usa um `storageState` do Playwright (cookies/sessão) |
+| `--spa` | servidor faz fallback de rotas desconhecidas → `/index.html` |
+| `--port N` | porta do servidor (default 8765) |
+| `--no-serve` / `--no-verify` | pula o servidor / a verificação |
+
+## Regras importantes
+- **Motor padrão = navegador.** Só use `--engine wget` se o usuário pedir velocidade
+  e o site for estático simples; avise que fontes de CDN travadas (Typekit) não
+  carregam em localhost no modo wget.
+- **"CSS quebrado" quase sempre é fonte travada por domínio.** O motor de navegador
+  resolve isso automaticamente capturando a fonte no domínio real. Se o usuário
+  reclamar de CSS, primeiro cheque `fontsMissingInClone` no report.
+- **Conteúdo que "não aparece"** em sites com scroll virtual (GSAP ScrollSmoother:
+  `<main position:fixed; overflow:hidden>`) é comportamento do site, não bug — o
+  conteúdo surge ao rolar. Não "conserte" isso.
+- **Não invente assets.** Se uma imagem é 404 no clone, verifique se também é 404 no
+  original antes de tratar como problema (vários sites referenciam assets removidos).
+- **Crawl respeita a mesma origin.** Para incluir subdomínios use `--include`.
+- O servidor roda em background; informe o PID para o usuário poder parar.
+
+## Scripts (em `scripts/`)
+- `clone.sh` — orquestrador (detecção → motor → servidor → verificação).
+- `capture.mjs` — motor de navegador: captura toda a rede, reescreve refs,
+  localiza fontes Typekit/Google, gera espelho root-absoluto.
+- `serve.py` — servidor estático (trailing-slash, MIME de fontes, no-cache, SPA).
+- `verify.mjs` — screenshots original×clone + relatório de fontes/404/erros.
+- `wget_fallback.sh` + `fix_paths.py` — caminho rápido sem navegador.
+
+Workflow completo (Fases 0→5, de-para dos 11 problemas, QA, dicas, ferramentas):
+[reference/workflow.md](reference/workflow.md).
+Diagnóstico e decisões técnicas: [reference/lessons.md](reference/lessons.md).