What problem does it solve? Recreating an existing website's design by hand requires tedious manual inspection of colors, fonts, spacing, and assets, followed by error-prone visual comparison. This Skill automates the entire process through a multi-agent workflow that captures screenshots, extracts styles and assets, implements the clone, and iterates on QA feedback. ## Core Features & Use Cases - Orchestrated Multi-Agent Workflow: A /clone-website <url> slash command coordinates four specialized sub-agents (screenshotter, extractor, cloner, qa-reviewer) through a five-phase pipeline. - Pixel-Level QA Iteration Loop: A QA reviewer compares the clone against the original at desktop, tablet, and mobile viewports, classifies issues as Critical/Major/Minor, and loops fixes until PERFECT or a 5-iteration cap. - Framework-Aware Output: Auto-detects Next.js, TanStack Start, or Vite and emits a single React component styled with Tailwind CSS arbitrary values and motion animations, with assets organized in public/. - Use Case: Point the command at a marketing landing page you admire; the workflow downloads its images and icons, extracts its exact color palette and typography, and produces a working /clone route in your project. ## Quick Start Ask the agent to run /clone-website followed by the target URL, for example: clone the website at https://example.com into my project.
