Convert URL or HTML Snapshot to Next.js — AS-IS Pixel-Faithful Rebuild

The scenario this skill is built for

A company lost the GitHub repo behind its frontend. The only thing left is the production build at example.com. The team wants the same-looking site back in their own stack — as a real, editable Next.js codebase — pixel-faithful to the deployed build, AS IS. The skill's job is to recover what is already in the world, not to redesign it. Throughout this workflow, when a judgment call surfaces between visual fidelity to the live deployed build and a more idiomatic Next.js choice, fidelity wins until the user explicitly opts out.

The output is one Next.js template per unique page type the source actually uses, plus a route map saying which live URLs are instances of which type. The user's expected next step after this skill finishes is usually to wire dynamic content (TinaCMS, MDX, or any CMS of their choice) onto those templates.

When to use this skill

• "Rebuild this URL as a Next.js site" (live URL, with or without scope filtering).
• "I lost my frontend repo and only have the build — recover the deployed site" (the canonical lost-frontend scenario).
• "Recover this page — the original repo is gone but the prod URL still works" (production-only recovery).
• "Convert this .html snapshot / SingleFile export into Next.js" (offline .html + _files/, adjacent local CSS, or inline <style> only).
• "Clone / recreate / pixel-perfect / faithful rebuild" of an existing public page in Next.js.
• "Mirror this site offline as a Next.js app" with self-hosted fonts, images, and icons.

Do NOT use this skill when