{"id":"2202f1e1-3932-426a-8d82-a2e7aa8b8edd","shortId":"Nnf4Ze","kind":"skill","title":"clone-website","tagline":"Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reve","description":"# Clone Website --- Single-File HTML Prototype Builder\n\nYou are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype.\n\nThis is adapted from the [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) approach but optimized for rapid prototyping workflows: **single self-contained HTML files** (no build system, no CDN dependencies, opens directly in a browser).\n\n## Output Format\n\nUnlike the original repo (Next.js + shadcn/ui), our output is:\n- **One HTML file** with `<style>` + `<body>` + `<script>` sections\n- **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline\n- **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB\n- **Project design system** when available --- use tokens from a `design-system.json` colocated with the project\n\n## Pre-Flight\n\n1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`.\n2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible.\n3. Create output directory: `{project}/Screenshots-clone/` for captured assets.\n4. Determine clone mode:\n   - **Full clone** (default): pixel-perfect reproduction of the entire page\n   - **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building\n   - **Selective clone** (`--sections \"header,table,sidebar\"`): clone only named sections\n\n## Phase 1: Reconnaissance (Playwright)\n\n### 1.1 Screenshots\n\nUse Playwright to capture:\n\n```javascript\nimport { chromium } from 'playwright';\nconst browser = await chromium.launch();\nconst page = await browser.newPage({ viewport: { width: 1440, height: 900 } });\nawait page.goto(URL);\n\n// Full page screenshot\nawait page.screenshot({ path: 'full-desktop.png', fullPage: true });\n\n// Viewport screenshot\nawait page.screenshot({ path: 'viewport-desktop.png' });\n\n// Mobile\nawait page.setViewportSize({ width: 390, height: 844 });\nawait page.screenshot({ path: 'viewport-mobile.png', fullPage: true });\n```\n\n### 1.2 Design Token Extraction\n\nRun this in Playwright's `page.evaluate()` to extract the complete design system:\n\n```javascript\nconst tokens = await page.evaluate(() => {\n  // Colors\n  const colorMap = new Map();\n  document.querySelectorAll('*').forEach(el => {\n    const cs = getComputedStyle(el);\n    ['color','backgroundColor','borderColor','borderTopColor','borderBottomColor'].forEach(p => {\n      const v = cs[p];\n      if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent') colorMap.set(v, (colorMap.get(v)||0)+1);\n    });\n  });\n\n  // Typography\n  const fontMap = new Map();\n  document.querySelectorAll('*').forEach(el => {\n    const cs = getComputedStyle(el);\n    const key = `${cs.fontFamily}|${cs.fontSize}|${cs.fontWeight}|${cs.lineHeight}`;\n    fontMap.set(key, (fontMap.get(key)||0)+1);\n  });\n\n  // Spacing\n  const spacingSet = new Set();\n  document.querySelectorAll('*').forEach(el => {\n    const cs = getComputedStyle(el);\n    ['padding','margin','gap'].forEach(p => {\n      const v = cs[p]; if (v && v !== '0px') spacingSet.add(v);\n    });\n  });\n\n  // Shadows\n  const shadowSet = new Set();\n  document.querySelectorAll('*').forEach(el => {\n    const v = getComputedStyle(el).boxShadow;\n    if (v && v !== 'none') shadowSet.add(v);\n  });\n\n  // Radius\n  const radiusSet = new Set();\n  document.querySelectorAll('*').forEach(el => {\n    const v = getComputedStyle(el).borderRadius;\n    if (v && v !== '0px') radiusSet.add(v);\n  });\n\n  return {\n    colors: [...colorMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,30),\n    typography: [...fontMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,20),\n    spacing: [...spacingSet].sort(),\n    shadows: [...shadowSet],\n    radii: [...radiusSet].sort()\n  };\n});\n```\n\n### 1.3 Component CSS Extraction (Deep)\n\nFor each major component/section, extract exact computed styles:\n\n```javascript\n// Run per component container\nconst componentCSS = await page.evaluate((selector) => {\n  const el = document.querySelector(selector);\n  if (!el) return null;\n  const props = [\n    'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',\n    'textTransform','textDecoration','backgroundColor','background',\n    'padding','paddingTop','paddingRight','paddingBottom','paddingLeft',\n    'margin','marginTop','marginRight','marginBottom','marginLeft',\n    'width','height','maxWidth','minWidth','display','flexDirection',\n    'justifyContent','alignItems','gap','gridTemplateColumns',\n    'borderRadius','border','boxShadow','overflow','position',\n    'top','right','bottom','left','zIndex','opacity','transform','transition'\n  ];\n  function extract(element, depth) {\n    if (depth > 4) return null;\n    const cs = getComputedStyle(element);\n    const styles = {};\n    props.forEach(p => {\n      const v = cs[p];\n      if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')\n        styles[p] = v;\n    });\n    return {\n      tag: element.tagName.toLowerCase(),\n      classes: element.className?.toString().split(' ').slice(0,5).join(' '),\n      text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3\n        ? element.textContent.trim().slice(0,200) : null,\n      styles,\n      children: [...element.children].slice(0,20).map(c => extract(c, depth+1)).filter(Boolean)\n    };\n  }\n  return extract(el, 0);\n}, selector);\n```\n\n### 1.4 Interaction Sweep\n\nUse Playwright to discover behaviors:\n\n```javascript\n// Scroll sweep\nfor (let y = 0; y < await page.evaluate(() => document.body.scrollHeight); y += 300) {\n  await page.evaluate(y => window.scrollTo(0, y), y);\n  await page.waitForTimeout(200);\n  // Check for sticky header changes, scroll-triggered animations, etc.\n}\n\n// Hover sweep --- hover over interactive elements\nconst interactiveEls = await page.$$('button, a, [role=\"tab\"], .nav-item, .card');\nfor (const el of interactiveEls.slice(0, 30)) {\n  await el.hover();\n  await page.waitForTimeout(100);\n}\n\n// Click sweep --- test tabs, dropdowns, etc.\nconst tabs = await page.$$('[role=\"tab\"], .tab-item, .nav-tab');\nfor (const tab of tabs) {\n  await tab.click();\n  await page.waitForTimeout(300);\n}\n```\n\n### 1.5 Asset Extraction\n\n```javascript\n// Extract all SVG icons as inline code\nconst svgs = await page.evaluate(() =>\n  [...document.querySelectorAll('svg')].map(s => ({\n    html: s.outerHTML,\n    parent: s.parentElement?.className?.toString().split(' ')[0] || 'unknown',\n    width: s.getAttribute('width'),\n    height: s.getAttribute('height')\n  }))\n);\n\n// Extract all image URLs for download\nconst images = await page.evaluate(() =>\n  [...document.querySelectorAll('img')].map(i => ({\n    src: i.src, alt: i.alt, w: i.naturalWidth, h: i.naturalHeight\n  }))\n);\n```\n\n## Phase 2: Foundation Build\n\nConvert extracted tokens into CSS custom properties:\n\n```css\n:root {\n  /* Colors --- from extraction, mapped to semantic names */\n  --color-bg: {extracted};\n  --color-text: {extracted};\n  --color-text-muted: {extracted};\n  --color-accent: {extracted};\n  --color-border: {extracted};\n  /* ... */\n\n  /* Typography */\n  --font-family: {extracted};\n  --font-size-body: {extracted};\n  /* ... */\n\n  /* Shadows */\n  --shadow-sm: {extracted};\n  --shadow-md: {extracted};\n  /* ... */\n}\n```\n\n## Phase 3: Parallel Section Building\n\nFor each major section of the page, dispatch a builder agent:\n\n1. Write a spec file with exact CSS values + screenshot + content\n2. Launch agent in a worktree (or as a subagent) with the spec\n3. Each agent produces its section's HTML + CSS + JS\n4. Orchestrator assembles all sections into one file\n\n**Complexity budget**: If a section spec exceeds ~150 lines, split it.\n\n## Phase 4: Assembly\n\nMerge all sections into one self-contained HTML file:\n1. Deduplicate CSS --- combine all section styles, remove duplicates\n2. Order HTML --- sections in visual order (top to bottom)\n3. Combine JS --- all event handlers and render functions in one `<script>` block\n4. Base64-encode any images that couldn't be replaced with CSS/SVG\n5. Verify: open in browser, compare against original screenshots\n\n## Phase 5: Quality Check\n\nUse Playwright to:\n1. Open the built HTML file\n2. Take screenshots at the same viewpoints as Phase 1\n3. Compare side-by-side (save both for manual review)\n4. Test all interactions (clicks, hovers, tabs)\n5. Report any visual differences\n\n## Project-Specific Mode\n\nWhen a `design-system.json` exists in the project:\n- Load tokens (colors, typography, spacing, shadows, radii) from that file\n- Apply them as CSS custom properties in the output\n- Inject any real data referenced in the project (Excel, JSON, brain DB)\n\n## Reference\n\n- Adapted from [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)","tags":["clone","website","coco","rkz91","agent-skills","agents-md","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools"],"capabilities":["skill","source-rkz91","skill-clone-website","topic-agent-skills","topic-agents-md","topic-ai-agents","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-llm-tools","topic-mcp","topic-pm-tools","topic-product-management","topic-productivity"],"categories":["coco"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rkz91/coco/clone-website","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rkz91/coco","source_repo":"https://github.com/rkz91/coco","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (8,844 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:14:06.209Z","embedding":null,"createdAt":"2026-05-18T13:21:37.953Z","updatedAt":"2026-05-18T19:14:06.209Z","lastSeenAt":"2026-05-18T19:14:06.209Z","tsv":"'/jcodesmore/ai-website-cloner-template)':88 'adapt':78 'ai':82 'ai-website-cloner-templ':81 'approach':89 'argument':65 'asset':20 'browser':112 'build':103 'builder':57 'cdn':106 'clone':2,4,47,50 'clone-websit':1 'cloner':84 'comput':22 'contain':34,99 'content':27 'css':21 'data':39 'depend':107 'design':18 'direct':109 'engin':64 'extract':17 'file':14,36,54,73,101,126 'format':114 'github.com':87 'github.com/jcodesmore/ai-website-cloner-template)':86 'html':15,35,55,74,100,125 'inject':40 'interact':24 'next.js':119 'one':124 'open':108 'optim':91 'origin':117 'output':30,113,122 'pattern':25 'perfect':11,70 'pixel':10,69 'pixel-perfect':9,68 'playwright':29 'prototyp':16,56,75,94 'rapid':93 'real':38 'replic':48 'repo':118 'reve':49 'revers':63 'reverse-engin':62 'self':33,98 'self-contain':32,97 'shadcn/ui':120 'singl':13,53,72,96 'single-fil':12,52,71 'skill' 'skill-clone-website' 'source-rkz91' 'style':23 'system':104 'templat':85 'token':19 'topic-agent-skills' 'topic-agents-md' 'topic-ai-agents' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-llm-tools' 'topic-mcp' 'topic-pm-tools' 'topic-product-management' 'topic-productivity' 'unlik':115 'use':41 'user':44 'via':28 'want':45 'websit':3,6,51,83 'workflow':95","prices":[{"id":"09c5b901-a816-4591-8b90-e2305a058b09","listingId":"2202f1e1-3932-426a-8d82-a2e7aa8b8edd","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rkz91","category":"coco","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:37.953Z"}],"sources":[{"listingId":"2202f1e1-3932-426a-8d82-a2e7aa8b8edd","source":"github","sourceId":"rkz91/coco/clone-website","sourceUrl":"https://github.com/rkz91/coco/tree/main/skills/clone-website","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:37.953Z","lastSeenAt":"2026-05-18T19:14:06.209Z"}],"details":{"listingId":"2202f1e1-3932-426a-8d82-a2e7aa8b8edd","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rkz91","slug":"clone-website","github":{"repo":"rkz91/coco","stars":7,"topics":["agent-skills","agents-md","ai","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools","mcp","pm-tools","product-management","productivity","prompt-engineering","workflow-automation"],"license":"mit","html_url":"https://github.com/rkz91/coco","pushed_at":"2026-04-26T01:51:27Z","description":"Open-source library of AI superpowers — 59 skills, 34 commands, 10 agents + 24 GSD subagents, 3 system bundles. An entire team, wherever your AI lives. Vendor-neutral across Claude Code, Cursor, Codex, and any AGENTS.md tool.","skill_md_sha":"0109724ce6116d913f10e21285745ffa3358b6bc","skill_md_path":"skills/clone-website/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rkz91/coco/tree/main/skills/clone-website"},"layout":"multi","source":"github","category":"coco","frontmatter":{"name":"clone-website","description":"Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reverse-engineer, or create a pixel-perfect copy of any website or web app. Provide one or more target URLs as arguments."},"skills_sh_url":"https://skills.sh/rkz91/coco/clone-website"},"updatedAt":"2026-05-18T19:14:06.209Z"}}