Claudecode Skill Html Screenshot

🖼️ html-screenshot

Render local HTML at PC + Mobile viewports and export them **side-by-side** as a single image. A Claude Code skill.

---

Why

Mobile responsive screenshots usually live in two places — DevTools, then external image tools — or get exported as separate per-device files that don't read well in PRs, blog posts, or chat. **One composite image** with consistent height and a contrasting canvas reads at a glance and embeds cleanly anywhere.

 ┌──────────────────────────┐ ┌──────┐
 │                          │ │      │
 │           PC             │ │ Mob  │   ← single PNG/JPEG
 │       (1920×1080)        │ │ ile  │     padded canvas, gradient bg
 │                          │ │      │     height-normalized panels
 └──────────────────────────┘ └──────┘

Features

• ⚡ One command, one image — PC + Mobile composited side-by-side
• 🎨 14 background presets + custom solid color or gradient (vertical / horizontal / diagonal)
• 📐 Height-normalized panels so PC and Mobile align cleanly (no upscaling)
• 📱 Optional tablet panel between PC and Mobile (--tablet)
• 🌐 Local HTTP server auto-spawned per run — relative CSS / JS / img / fetch work without file:// quirks
• 📂 File or folder input — recursive .html discovery, output mirrors source t