/clone-website
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,
$ npx -y skills add coco-research/coco --skill clone-website --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/clone-website
Context preview
The summary Claude sees to decide when to auto-load this skill.
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,
SKILL.md
clone-website.SKILL.mdname: 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.
argument-hint: "<url1> [<url2> ...]"
user-invocable: true
domain: design
Clone Website --- Single-File HTML Prototype Builder
You are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype.
This 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).
Output Format
Unlike the original repo (Next.js + shadcn/ui), our output is:
- **One HTML file** with `<style>` + `<body>` + `<script>` sections
- **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline
- **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB
- **Project design system** when available --- use tokens from a `design-system.json` colocated with the project
Pre-Flight
1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`. 2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible. 3. Create output directory: `{project}/Screenshots-clone/` for captured assets. 4. Determine clone mode:
- **Full clone** (default): pixel-perfect reproduction of the entire page
- **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building
- **Selective clone** (`--sections "header,table,sidebar"`): clone only named sections
Phase 1: Reconnaissance (Playwright)
1.1 Screenshots
Use Playwright to capture:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto(URL);
// Full page screenshot
await page.screenshot({ path: 'full-desktop.png', fullPage: true });
// Viewport screenshot
await page.screenshot({ path: 'viewport-desktop.png' });
// Mobile
await page.setViewportSize({ width: 390, height: 844 });
await page.screenshot({ path: 'viewport-mobile.png', fullPage: true });1.2 Design Token Extraction
Run this in Playwright's `page.evaluate()` to extract the complete design system:
const tokens = await page.evaluate(() => {
// Colors
const colorMap = new Map();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
['color','backgroundColor','borderColor','borderTopColor','borderBottomColor'].forEach(p => {
const v = cs[p];
if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent') colorMap.set(v, (colorMap.get(v)||0)+1);
});
});
// Typography
const fontMap = new Map();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
const key = `${cs.fontFamily}|${cs.fontSize}|${cs.fontWeight}|${cs.lineHeight}`;
fontMap.set(key, (fontMap.get(key)||0)+1);
});
// Spacing
const spacingSet = new Set();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
['padding','margin','gap'].forEach(p => {
const v = cs[p]; if (v && v !== '0px') spacingSet.add(v);
});
});
// Shadows
const shadowSet = new Set();
document.querySelectorAll('*').forEach(el => {
const v = getComputedStyle(el).boxShadow;
if (v && v !== 'none') shadowSet.add(v);
});
// Radius
const radiusSet = new Set();
document.querySelectorAll('*').forEach(el => {
const v = getComputedStyle(el).borderRadius;
if (v && v !== '0px') radiusSet.add(v);
});
return {
colors: [...colorMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,30),
typography: [...fontMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,20),
spacing: [...spacingSet].sort(),
shadows: [...shadowSet],
radii: [...radiusSet].sort()
};
});1.3 Component CSS Extraction (Deep)
For each major component/section, extract exact computed styles:
// Run per component container
const componentCSS = await page.evaluate((selector) => {
const el = document.querySelector(selector);
if (!el) return null;
const props = [
'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',
'textTransform','textDecoration','backgroundColor','background',
'padding','paddingTop','paddingRight','paddingBottom','paddingLeft',
'margin','marginTop','marginRight','marginBottom','marginLeft',
'width','height','maxWidth','minWidth','display','flexDirection',
'justifyContent','alignItems','gap','gridTemplateColumns',
'borderRadius','border','boxShadow','overflow','position',
'top','right','bottom','left','zIndex','opacity','transform','transition'
];
function extract(element, depth) {
if (depth > 4) return null;
const cs = getComputedStyle(element);
const styles = {};
props.forEach(p => {
const v = cs[p];
if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
styles[p] = v;
});
return {
tag: element.tagName.toLowerCase(),
classes: element.className?.toString().split(' ').slice(0,5).join(' '),
text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3
? element.textContent.trim().slice(0,200) : null,
styles,
children: [...element.children].slice(0,20).map(c => extract(c, depth+1)).filter(Boolean)
};
}
return extract(el, 0);
}, selector);###
Read more
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. argument-hint: "<url1> [<url2> ...]" user-invocable: true domain: design
Clone Website --- Single-File HTML Prototype Builder
You are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype.
This 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).
Output Format
Unlike the original repo (Next.js + shadcn/ui), our output is:
- **One HTML file** with `<style>` + `<body>` + `<script>` sections
- **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline
- **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB
- **Project design system** when available --- use tokens from a `design-system.json` colocated with the project
Pre-Flight
1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`. 2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible. 3. Create output directory: `{project}/Screenshots-clone/` for captured assets. 4. Determine clone mode:
- **Full clone** (default): pixel-perfect reproduction of the entire page
- **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building
- **Selective clone** (`--sections "header,table,sidebar"`): clone only named sections
Phase 1: Reconnaissance (Playwright)
1.1 Screenshots
Use Playwright to capture:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto(URL);
// Full page screenshot
await page.screenshot({ path: 'full-desktop.png', fullPage: true });
// Viewport screenshot
await page.screenshot({ path: 'viewport-desktop.png' });
// Mobile
await page.setViewportSize({ width: 390, height: 844 });
await page.screenshot({ path: 'viewport-mobile.png', fullPage: true });1.2 Design Token Extraction
Run this in Playwright's `page.evaluate()` to extract the complete design system:
const tokens = await page.evaluate(() => {
// Colors
const colorMap = new Map();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
['color','backgroundColor','borderColor','borderTopColor','borderBottomColor'].forEach(p => {
const v = cs[p];
if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent') colorMap.set(v, (colorMap.get(v)||0)+1);
});
});
// Typography
const fontMap = new Map();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
const key = `${cs.fontFamily}|${cs.fontSize}|${cs.fontWeight}|${cs.lineHeight}`;
fontMap.set(key, (fontMap.get(key)||0)+1);
});
// Spacing
const spacingSet = new Set();
document.querySelectorAll('*').forEach(el => {
const cs = getComputedStyle(el);
['padding','margin','gap'].forEach(p => {
const v = cs[p]; if (v && v !== '0px') spacingSet.add(v);
});
});
// Shadows
const shadowSet = new Set();
document.querySelectorAll('*').forEach(el => {
const v = getComputedStyle(el).boxShadow;
if (v && v !== 'none') shadowSet.add(v);
});
// Radius
const radiusSet = new Set();
document.querySelectorAll('*').forEach(el => {
const v = getComputedStyle(el).borderRadius;
if (v && v !== '0px') radiusSet.add(v);
});
return {
colors: [...colorMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,30),
typography: [...fontMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,20),
spacing: [...spacingSet].sort(),
shadows: [...shadowSet],
radii: [...radiusSet].sort()
};
});1.3 Component CSS Extraction (Deep)
For each major component/section, extract exact computed styles:
// Run per component container
const componentCSS = await page.evaluate((selector) => {
const el = document.querySelector(selector);
if (!el) return null;
const props = [
'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',
'textTransform','textDecoration','backgroundColor','background',
'padding','paddingTop','paddingRight','paddingBottom','paddingLeft',
'margin','marginTop','marginRight','marginBottom','marginLeft',
'width','height','maxWidth','minWidth','display','flexDirection',
'justifyContent','alignItems','gap','gridTemplateColumns',
'borderRadius','border','boxShadow','overflow','position',
'top','right','bottom','left','zIndex','opacity','transform','transition'
];
function extract(element, depth) {
if (depth > 4) return null;
const cs = getComputedStyle(element);
const styles = {};
props.forEach(p => {
const v = cs[p];
if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
styles[p] = v;
});
return {
tag: element.tagName.toLowerCase(),
classes: element.className?.toString().split(' ').slice(0,5).join(' '),
text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3
? element.textContent.trim().slice(0,200) : null,
styles,
children: [...element.children].slice(0,20).map(c => extract(c, depth+1)).filter(Boolean)
};
}
return extract(el, 0);
}, selector);###
Meet Coco. A superintelligent agent framework powered by an advisory board of 389 world-class minds. Scale your AI assistant into a complete engineering department with 142 skills, 277 commands, and persistent state. Universal compatibility. Local privacy. Free and open source.
Repo: coco-research/coco
Other skills on coco.
- /create-rule
Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up project conventions, configure file-specific patterns, create RULE.md files, or asks about .cursor/rules/ or AGENTS.md.
Open skill - /create-skill
Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a new skill, or asks about skill structure, best practices, or SKILL.md format.
Open skill - /create-subagent
Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
Open skill - /migrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when the user wants to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands
Open skill - /update-cursor-settings
Modify Cursor/VSCode user settings in settings.json. Use when the user wants to change editor settings, preferences, configuration, themes, font size, tab size, format on save, auto save, keybindings, or any settings.json values.
Open skill - /agent-lightning
Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting up agent training, instrumenting agents with tracing, configuring LightningStore, implementing reward functions, or optimizing prompts with RL/APO algorithms.
Open skill