Skill
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…
@coco-researchView SkillDevelopment
Skill
/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,
Install
$ 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);###
Ships withcoco
CoCo Super Intelligence is the orchestration layer that turns Claude Code, Cursor, or Codex into an engineering department: a routed advisory board, 185 skills, 280 commands, persistent state. Local. Open-core — MIT core; Super Intelligence is proprietary, own-use.
Get the whole plugin
Stats
220
Stars
11
Forks
Active
Maintenance
HTML
Language
2d ago
Last commit
4mo ago
Created
Repo: coco-research/coco
Other skills on coco.
@coco-researchView SkillSkill
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…
@coco-researchView SkillSkill
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…
@coco-researchView SkillSkill
migrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use…
@coco-researchView SkillSkill
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…
@coco-researchView SkillSkill
agent-lightning
Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting up agent training, instrumenting agents…
@coco-researchView Skill