Skills
.Work. You
Rest

convert-snapshot-nextjs

Community

Rebuild sites from HTML snapshots into Next.js.

Software Engineering#nextjs#frontend development#html to react#snapshot conversion#design system extraction#website reconstruction
Authoryigitkonur
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill converts saved HTML snapshots into fully functional, self-hosted Next.js projects, ensuring pixel-perfect fidelity and extracting all design system elements.

Core Features & Use Cases

  • Snapshot Conversion: Rebuilds websites from offline HTML files (.html + _files/ folders) or SingleFile exports into a Next.js App Router structure.
  • Design System Extraction: Identifies and extracts all design tokens (colors, typography, spacing), components, and behaviors from the snapshot.
  • Self-Hosting: Ensures all assets (fonts, images, icons) are local and self-hosted, eliminating external dependencies.
  • Use Case: You have an archived version of an old marketing website saved as an HTML snapshot. Use this Skill to convert it into a modern, maintainable Next.js application, preserving the original design and functionality.

Quick Start

Use the convert-snapshot-nextjs skill to convert the saved snapshot located in the 'my-old-website' directory into a Next.js project.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: convert-snapshot-nextjs
Download link: https://github.com/yigitkonur/skills-by-yigitkonur/archive/main.zip#convert-snapshot-nextjs

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.