drafted 1.24.5 → 1.24.7

package/skills/import-website-to-drafted.md

@@ -1,329 +0,0 @@
----
-description: Import an existing website into Drafted as a design frame. Renders the page in a headless browser to capture the full DOM (including SPA content), downloads all assets, rewrites paths, then uploads via MCP tools.
-argument-hint: "[URL or local path, e.g., 'https://example.com' or './dist']"
----
-# /import-website-to-drafted
-
-Import a website into Drafted as a fully rendered frame with all its assets.
-
-> **Partially stale — steps 4-6 predate the `fs` tool grammar.** `write`, `batch`,
-> `upload_asset` and `list_assets` are retired MCP tools; asset upload now goes
-> through `fs(write, ..., file_path=...)`. Step 1 and the Puppeteer capture
-> (steps 2-3) are current. Verify tool names against `fs` before relying on the
-> later steps.
-
-## How it works
-
-Drafted frames render in iframes. The server injects a `<base>` tag so relative paths like `<link href="css/styles.css">` resolve to the frame's assets in R2 storage. You write the HTML as a frame with `fs(write, ...)`, and all referenced files (CSS, JS, images, fonts) alongside it.
-
-**Most modern sites are SPAs** (React, Framer, Webflow, Next.js) where the HTML source is just a shell and the real content is rendered by JavaScript. A simple HTTP fetch won't capture the content. This skill uses Puppeteer to render the page fully before capturing.
-
-## Step 1: Pick the project
-
-There is no create-then-open step: the project is part of the path, and writing
-into a project that does not exist creates it. Address it directly.
-
-```
-fs(write, path="/o/<org>/projects/my-import/designs/homepage/index.html", ...)
-```
-
-To see what already exists first, `fs(ls, path="/o/<org>/projects")` lists them
-and `fs(search, path="/o/<org>/projects", query="<terms>")` finds one by name —
-do not enumerate the whole org to pick a project you can already name.
-
-## Step 2: Ensure Puppeteer is available
-
-```bash
-npm ls puppeteer 2>/dev/null || npm install puppeteer
-```
-
-## Step 3: Render, capture, and download assets
-
-Run this script locally. It launches a headless browser, renders the page fully (including SPA content), captures the complete DOM, then downloads all external assets and rewrites URLs to relative paths.
-
-**Adapt `SITE_URL` as needed:**
-
-```bash
-node -e "
-const puppeteer = require('puppeteer');
-const https = require('https');
-const http = require('http');
-const fs = require('fs');
-const path = require('path');
-const { URL } = require('url');
-
-const SITE_URL = 'https://example.com';  // ← CHANGE THIS
-const OUT_DIR = '/tmp/site-import';
-
-// ── Helpers ──────────────────────────────────────────────────────
-
-function download(url) {
-  return new Promise((resolve, reject) => {
-    const mod = url.startsWith('https') ? https : http;
-    mod.get(url, { headers: { 'User-Agent': 'Mozilla/5.0' } }, res => {
-      if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-        return download(res.headers.location).then(resolve, reject);
-      }
-      if (res.statusCode >= 400) return reject(new Error('HTTP ' + res.statusCode));
-      const chunks = [];
-      res.on('data', c => chunks.push(c));
-      res.on('end', () => resolve(Buffer.concat(chunks)));
-      res.on('error', reject);
-    }).on('error', reject);
-  });
-}
-
-function urlToAssetPath(urlStr) {
-  try {
-    const u = new URL(urlStr);
-    const domain = u.hostname.replace(/[^a-z0-9.-]/g, '_');
-    let p = u.pathname.replace(/[?#].*/, '');
-    if (!p || p === '/') p = '/index';
-    if (!path.extname(p)) {
-      // Guess extension from common patterns
-      if (urlStr.includes('font') || urlStr.includes('woff')) p += '.woff2';
-      else if (urlStr.includes('css') || urlStr.includes('stylesheet')) p += '.css';
-      else p += '.bin';
-    }
-    return 'assets/' + domain + p;
-  } catch { return null; }
-}
-
-const MIME_BY_EXT = {
-  '.css': 'text/css', '.js': 'application/javascript', '.mjs': 'application/javascript',
-  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
-  '.webp': 'image/webp', '.svg': 'image/svg+xml', '.ico': 'image/x-icon',
-  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf',
-  '.json': 'application/json', '.pdf': 'application/pdf',
-};
-
-// ── Main ─────────────────────────────────────────────────────────
-
-(async () => {
-  fs.mkdirSync(OUT_DIR, { recursive: true });
-
-  // 1. Render the page in a real browser
-  console.log('Launching browser...');
-  const browser = await puppeteer.launch({
-    headless: true,
-    args: ['--no-sandbox', '--disable-setuid-sandbox'],
-  });
-  const page = await browser.newPage();
-  await page.setViewport({ width: 1440, height: 900 });
-
-  console.log('Navigating to', SITE_URL);
-  await page.goto(SITE_URL, { waitUntil: 'networkidle0', timeout: 30000 });
-
-  // Scroll to bottom to trigger lazy-loaded content
-  await page.evaluate(async () => {
-    await new Promise(resolve => {
-      let total = 0;
-      const timer = setInterval(() => {
-        window.scrollBy(0, 400);
-        total += 400;
-        if (total >= document.body.scrollHeight) { clearInterval(timer); resolve(); }
-      }, 100);
-      setTimeout(() => { clearInterval(timer); resolve(); }, 5000);
-    });
-    window.scrollTo(0, 0);
-  });
-  await new Promise(r => setTimeout(r, 1000)); // let lazy content settle
-
-  // 2. Capture the fully rendered DOM
-  let html = await page.content();
-  const pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
-  console.log('Captured rendered DOM (' + (html.length / 1024).toFixed(0) + ' KB, page height: ' + pageHeight + 'px)');
-
-  // 3. Capture computed styles and inline them (prevents style loss)
-  const inlineStyles = await page.evaluate(() => {
-    const styles = [];
-    for (const sheet of document.styleSheets) {
-      try {
-        const rules = Array.from(sheet.cssRules || []).map(r => r.cssText).join('\\n');
-        if (rules) styles.push(rules);
-      } catch { /* cross-origin stylesheet, skip */ }
-    }
-    return styles.join('\\n');
-  });
-
-  await browser.close();
-
-  // 4. Find all external URLs in the rendered HTML + inline styles
-  const combined = html + '\\n' + inlineStyles;
-  const urlPattern = /(?:src|href|srcset)=[\"']?(https?:\\/\\/[^\"'\\s,>]+)[\"']?|url\\([\"']?(https?:\\/\\/[^\"')]+)[\"']?\\)/g;
-  const skipDomains = ['google-analytics.com', 'googletagmanager.com', 'segment.com', 'hotjar.com', 'facebook.net', 'events.framer.com'];
-  const assetExtensions = /\\.(css|js|mjs|json|png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf|eot|mp4|webm|pdf)(\\?|$)/i;
-
-  const assets = new Map();
-  let match;
-  while ((match = urlPattern.exec(combined)) !== null) {
-    const url = (match[1] || match[2] || '').split(/[\\s,]/)[0]; // handle srcset
-    if (!url || assets.has(url)) continue;
-    try { if (skipDomains.some(d => url.includes(d))) continue; } catch {}
-    if (!assetExtensions.test(url) && !url.includes('font') && !url.includes('woff')) continue;
-    const assetPath = urlToAssetPath(url);
-    if (assetPath) assets.set(url, assetPath);
-  }
-
-  console.log('Found', assets.size, 'assets to download');
-
-  // 5. Download each asset
-  let downloaded = 0, failed = 0;
-  for (const [url, relPath] of assets) {
-    const outPath = path.join(OUT_DIR, relPath);
-    fs.mkdirSync(path.dirname(outPath), { recursive: true });
-    try {
-      const data = await download(url);
-      fs.writeFileSync(outPath, data);
-      downloaded++;
-    } catch (e) {
-      console.error('  FAILED:', url.substring(0, 80), e.message);
-      failed++;
-      assets.delete(url); // remove so we don't rewrite to a missing file
-    }
-  }
-  console.log('Downloaded:', downloaded, '| Failed:', failed);
-
-  // 6. Rewrite URLs in HTML AND in downloaded text files (CSS, JS, MJS)
-  const rewriteTargets = [{ content: html, path: path.join(OUT_DIR, 'index.html') }];
-  for (const [, relPath] of assets) {
-    const ext = path.extname(relPath).toLowerCase();
-    if (['.css', '.js', '.mjs', '.json', '.svg'].includes(ext)) {
-      const filePath = path.join(OUT_DIR, relPath);
-      if (fs.existsSync(filePath)) {
-        rewriteTargets.push({ content: fs.readFileSync(filePath, 'utf8'), path: filePath });
-      }
-    }
-  }
-
-  for (const target of rewriteTargets) {
-    let content = target.content;
-    for (const [url, relPath] of assets) {
-      // In the main HTML, use relative paths directly
-      // In asset files, compute the relative path from the asset to the referenced asset
-      if (target.path.endsWith('index.html')) {
-        content = content.split(url).join(relPath);
-      } else {
-        const fromDir = path.dirname(target.path.replace(OUT_DIR + '/', ''));
-        const toPath = relPath;
-        const rel = path.relative(fromDir, toPath);
-        content = content.split(url).join(rel);
-      }
-    }
-    if (target.path.endsWith('index.html')) html = content;
-    fs.writeFileSync(target.path, content);
-  }
-
-  // 7. Inject captured styles into the HTML (ensures styles survive without external sheets)
-  if (inlineStyles) {
-    const styleTag = '<style id=\"captured-styles\">' + inlineStyles + '</style>';
-    if (html.includes('</head>')) {
-      html = html.replace('</head>', styleTag + '</head>');
-    } else {
-      html = styleTag + html;
-    }
-  }
-
-  // 8. Clean up HTML
-  html = html.replace(/<base[^>]*>/gi, '');
-  html = html.replace(/<meta[^>]*Content-Security-Policy[^>]*>/gi, '');
-  html = html.replace(/<script[^>]*(?:analytics|gtag|segment|hotjar|events\\.framer)[^>]*>.*?<\\/script>/gis, '');
-  html = html.replace(/navigator\\.serviceWorker\\.register\\([^)]*\\)/g, '');
-  html = html.replace(/\\/\\/# sourceMappingURL=[^\\n]*/g, '');
-
-  // 9. Write final HTML
-  fs.writeFileSync(path.join(OUT_DIR, 'index.html'), html);
-
-  // 10. Write manifest
-  const manifest = Array.from(assets.entries()).map(([url, relPath]) => ({
-    asset_path: relPath,
-    file_path: path.join(OUT_DIR, relPath),
-    exists: fs.existsSync(path.join(OUT_DIR, relPath)),
-  })).filter(a => a.exists);
-  fs.writeFileSync(path.join(OUT_DIR, 'manifest.json'), JSON.stringify(manifest, null, 2));
-
-  console.log('\\nOutput:', OUT_DIR);
-  console.log('HTML:', path.join(OUT_DIR, 'index.html'), '(' + (html.length / 1024).toFixed(0) + ' KB)');
-  console.log('Page height:', pageHeight, 'px (use this for frame height)');
-  console.log('Manifest:', manifest.length, 'assets ready to upload');
-})().catch(e => { console.error(e); process.exit(1); });
-"
-```
-
-This outputs:
-- `/tmp/site-import/index.html` — fully rendered HTML with relative paths and captured styles
-- `/tmp/site-import/assets/...` — all downloaded assets (with URLs rewritten inside CSS/JS files too)
-- `/tmp/site-import/manifest.json` — asset list for the upload step
-- The page height in pixels (use this for the frame height)
-
-**Key improvements over a plain HTTP fetch:**
-- Renders the page in a real browser — captures SPA content (React, Framer, Webflow, etc.)
-- Scrolls to trigger lazy-loaded images and content
-- Captures computed CSS and inlines it — styles survive even if external sheets fail
-- Rewrites URLs inside CSS and JS files, not just HTML
-- Handles `srcset` attributes
-
-## Step 4: Write the frame
-
-Use `file_path` to write the HTML directly from disk — this handles large files that won't fit in a `content` parameter:
-
-```
-write({
-  path: "/designs/my-site/homepage.html",
-  file_path: "/tmp/site-import/index.html",
-  width: 1440,
-  height: <page-height-from-script-output>
-})
-```
-
-The `write` tool reads `.html` files as inline content (not binary), so the frame gets proper base tag injection and all relative asset paths will resolve. Note the frame ID in the response — you'll use it in the next step.
-
-**Use the page height from the script output** as the frame height so the full page is visible without scrolling within the frame.
-
-## Step 5: Upload assets
-
-Read `manifest.json` and batch upload all assets:
-
-```
-batch({
-  operations: [
-    { tool: "upload_asset", asset_path: "assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", file_path: "/tmp/site-import/assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", frame_id: "<frame-id>" },
-    { tool: "upload_asset", asset_path: "assets/cdn.example.com/img/hero.png", file_path: "/tmp/site-import/assets/cdn.example.com/img/hero.png", frame_id: "<frame-id>" },
-    // ... one entry per asset from manifest.json
-  ]
-})
-```
-
-Associate assets with the frame via `frame_id` so they're cleaned up if the frame is deleted.
-
-**For large manifests (30+ assets):** Split into batches of 20-30 operations to avoid timeouts.
-
-## Step 6: Verify
-
-```
-screenshot({ target: "/designs/my-site/homepage.html", fullPage: true })
-```
-
-Check for missing images, broken styles, or layout issues. If assets are missing, check `list_assets({ frame_id: "..." })` against the manifest.
-
-## For local build directories
-
-If importing from a local build output (e.g., `./dist` from Vite, `./build` from CRA):
-
-1. Skip the Puppeteer step — read `index.html` directly
-2. Find all asset references in the HTML
-3. Copy assets to `/tmp/site-import/assets/` preserving relative paths
-4. `write` the HTML + `batch upload_asset` the assets
-
-The Puppeteer approach is only needed for live URLs where JS rendering matters.
-
-## Common issues
-
-| Problem | Cause | Fix |
-|---------|-------|-----|
-| Blank frame | CSP meta tag not stripped | Check the cleanup regex caught it |
-| Missing images | `srcset` or `<picture>` not captured | Add patterns for these to the URL regex |
-| Broken layout | Computed styles not captured | Check the inlined `<style id="captured-styles">` tag |
-| 404 on assets | URL rewriting missed some references | Check downloaded CSS/JS files for un-rewritten absolute URLs |
-| Frame too short | Used default height instead of page height | Use the page height from script output |
-| Puppeteer not found | Not installed | Run `npm install puppeteer` first |