diff --git a/skills/.experimental/clone-website/LICENSE.txt b/skills/.experimental/clone-website/LICENSE.txt new file mode 100644 index 00000000..285e414f --- /dev/null +++ b/skills/.experimental/clone-website/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 JCodesMore + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/skills/.experimental/clone-website/SKILL.md b/skills/.experimental/clone-website/SKILL.md new file mode 100644 index 00000000..3b2bfffe --- /dev/null +++ b/skills/.experimental/clone-website/SKILL.md @@ -0,0 +1,486 @@ +--- +name: clone-website +description: Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments. +argument-hint: " [ ...]" +user-invocable: true +--- + +# Clone Website + +You are about to reverse-engineer and rebuild **$ARGUMENTS** as pixel-perfect clones. + +## Scope + +- Input: one or more publicly reachable page URLs plus optional fidelity or customization instructions +- Output: implementation-ready frontend specs, extracted assets, and reconstructed UI code +- Use when: the task is layout recreation, design analysis, component extraction, or frontend prototyping +- Do not use when: the task is copying backend behavior, reproducing private systems, bypassing access controls, or bulk content scraping without a rebuild goal + +When multiple URLs are provided, process them independently and in parallel where possible, while keeping each site's extraction artifacts isolated in dedicated folders (for example, `docs/research//`). + +This is not a two-phase process (inspect then build). You are a **foreman walking the job site** — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts. + +## Scope Defaults + +The target is whatever page `$ARGUMENTS` resolves to. Clone exactly what's visible at that URL. Unless the user specifies otherwise, use these defaults: + +- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations +- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes +- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit +- **Customization:** None — pure emulation + +If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults. + +## Pre-Flight + +1. **Browser automation is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation. +2. Parse `$ARGUMENTS` as one or more URLs. Normalize and validate each URL; if any are invalid, ask the user to correct them before proceeding. For each valid URL, verify it is accessible via your browser MCP tool. +3. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to set it up first. +4. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. For multiple clones, also prepare per-site folders like `docs/research//` and `docs/design-references//`. +5. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload. + +## Guiding Principles + +These are the truths that separate a successful clone from a "close enough" mess. Internalize them — they should inform every decision you make. + +### 1. Completeness Beats Speed + +Every builder agent must receive **everything** it needs to do its job perfectly: screenshot, exact CSS values, downloaded assets with local paths, real text content, component structure. If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction. Take the extra minute to extract one more property rather than shipping an incomplete brief. + +### 2. Small Tasks, Perfect Results + +When an agent gets "build the entire features section," it glosses over details — it approximates spacing, guesses font sizes, and produces something "close enough" but clearly wrong. When it gets a single focused component with exact CSS values, it nails it every time. + +Look at each section and judge its complexity. A simple banner with a heading and a button? One agent. A complex section with 3 different card variants, each with unique hover states and internal layouts? One agent per card variant plus one for the section wrapper. When in doubt, make it smaller. + +**Complexity budget rule:** If a builder prompt exceeds ~150 lines of spec content, the section is too complex for one agent. Break it into smaller pieces. This is a mechanical check — don't override it with "but it's all related." + +### 3. Real Content, Real Assets + +Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `` and `