What problem does it solve? Recreating an existing website's design as editable source code normally requires hours of manual inspection, asset hunting, and CSS reverse-engineering. This Skill automates the full pipeline from a target URL to a working local Next.js project with matching design tokens, fonts, assets, and components. ## Core Features & Use Cases - Full Asset Extraction: Downloads CSS files, fonts, images, and media from the target site and organizes them into a Next.js public/ directory. - Design Token Reconstruction: Extracts colors, font families, keyframes, and breakpoints from the original CSS and writes them into tailwind.config.ts. - Component Rebuilding with Verification: Parses the rendered HTML and RSC payload into per-section React components, then validates the clone with lint, build, HTTP checks, and Playwright DOM probes comparing computed styles. - Use Case: A designer wants an editable version of a marketing landing page. Provide the URL, and receive a local Next.js project where the header, hero, sections, and footer are separate TypeScript components with the original Tailwind classes, fonts, and brand colors intact. ## Quick Start Clone the website at https://example.com into an editable Next.js project on my machine.
