day 7 · mar 24, 2026 · launched

Claude skill for website snapshots

reusable Claude skill that reads a codebase or live URL and outputs a single-file static HTML snapshot

dev tool

a SKILL.md file that any Claude instance can use — claude.ai, Claude Code, Cursor, etc. give it a codebase or a live URL, it analyzes the design system and components, then outputs a frozen single-file HTML mockup. includes multi-page navigation via show/hide, responsive desktop/mobile toggle with actual layout switching, working tag filters, expandable rows, and an archive banner. no external dependencies except CDN fonts. output works in any browser, iframe, or srcdoc embed.

stack

HTMLCSSJavaScriptClaude

files

SKILL.md

---
name: site-snapshot
description: >
  Generate a frozen single-file HTML mockup from a codebase, live URL, or screenshots.
  Use whenever a user wants to snapshot, freeze, preview, or archive any existing website.
  Three input paths: source files (read components, convert to HTML), live URL (fetch, clean,
  rebuild), or screenshots (visual analysis, rebuild as HTML). Triggers on "snapshot", "freeze",
  "mockup", "static preview", "capture this design", "rebuild from screenshot". Also triggers
  when user provides code/URL/screenshots and asks for a visual artifact or demo.
---

# Site Snapshot

Reads a web project's codebase, fetches a live URL, or analyzes screenshots and outputs a single-file HTML mockup — a frozen visual copy with all styles inlined, no external dependencies (except CDN fonts), and an optional responsive toggle. Works anywhere: iframe, browser, or file.

[Full skill content — 294 lines. See the project's files tab or GitHub repo for the complete SKILL.md]

loading repository tree...

← select a file to view