snapshot-to-nextjs
Snapshot to Next.js
Convert saved HTML pages into pixel-perfect Next.js projects
Mission: Take saved HTML snapshots — produced by browser "Save As", wget, HTTrack, SingleFile, or any offline capture tool — and convert them into a fully buildable Next.js App Router project with zero third-party dependencies.
The pipeline can also produce intermediate design documentation (Waves 0–2 only) when a full build isn't needed yet.
This is not a summarizer. This is not a screenshot describer. This is a forensic CSS parser that reads every minified rule, decodes every CSS Module class name, resolves every custom property chain, catalogs every @keyframes block, and maps every @media breakpoint — then builds a production-ready Next.js project from it.
Every design value traces to real CSS/JS from the source snapshot. No approximations. No invented tokens. No "close enough." The downstream builder implements your values literally — an unverified guess is worse than an honest gap.
Input Specification
This skill is designed for saved HTML snapshots — the kind produced by browser "Save As", wget, HTTrack, SingleFile, or any offline snapshot tool.
Expected Directory Structure
More from yigitkonur/skills-by-yigitkonur
run-research
Use skill if you are answering one technical research question with current web evidence, Reddit practitioner experience, and source-backed synthesis, optionally fanned out across parallel subagents.
42run-agent-browser
Use skill if you are driving the agent-browser CLI for ad hoc browser automation — @ref snapshots, sessions, forms, extraction, screenshots, headed/stealth, or provider runs.
38publish-npm-package
Use skill if you are publishing to npm via GitHub Actions release workflow with trusted publishing, NPM_TOKEN, provenance, semantic-release, changesets, release-please, or fixing npm publish CI.
35init-agent-config
Use skill if you are creating, auditing, or migrating CLAUDE.md, AGENTS.md, or REVIEW.md instruction files, folder-scoped agent guidance, or cross-agent companion entrypoints.
34build-mcp-use-server
Use skill if you are building TypeScript MCP servers with mcp-use/server — server.tool, response helpers, ctx.auth, sessions, transports, widgets, Inspector, deploy.
34build-skills
Use skill if you are creating or substantially revising a Claude skill and need workspace-first evidence, remote comparison, and repo-fit synthesis before writing SKILL.md.
32