Convert URL or HTML Snapshot to Next.js

Rebuild a live page or saved HTML snapshot as a faithful Next.js App Router project. Treat the source as evidence, not inspiration: capture first when live, extract before build, prove fidelity with screenshots, and never invent a value that the source doesn't ground.

When to use this skill

• "Rebuild this URL as a Next.js site" (live URL, with or without scope filtering).
• "Convert this .html snapshot / SingleFile export into Next.js" (offline .html + _files/, adjacent local CSS, or inline <style> only).
• "Recover this page — the original repo is gone but the prod URL still works" (lost-source recovery from production artifacts).
• "Clone / recreate / pixel-perfect / faithful rebuild" of an existing public page in Next.js.
• "Extract design tokens, fonts, and CSS variables from this URL/snapshot" without a build (stop after Wave 1).
• "Mirror this site offline as a Next.js app" with self-hosted fonts, images, and icons.

Do NOT use this skill when

• The only source is a screenshot, PDF, Figma, or "vibe" reference — there is no parseable HTML/CSS or live route. Use extract-saas-design or a generic UI-build skill instead.
• The user wants a redesign, simplification, or "same vibe" rewrite rather than faithful reconstruction.
• The user wants generic Next.js UI work with no source URL or snapshot grounding.
• The user wants a TinaCMS-backed editorial site from scratch — use build-tinacms-nextjs.