bluei98

Claudecode Skill HTML Screenshot — Testing skill for Claude Code

Testing community

HTML → PC + Mobile side-by-side screenshot composer.

How to install Claudecode Skill HTML Screenshot

This entry records only its repository, not the path inside it, so there is no exact command to give. Open bluei98/claudecode-skill-html-screenshot and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claudecode Skill HTML Screenshot does

HTML → PC + Mobile side-by-side screenshot composer. A Claude Code skill that renders local HTML at desktop and mobile viewports, then composites the two into one PNG/JPEG. Powered by Playwright + auto local HTTP server. Height-normalized panels, 14 background presets, custom gradients, full-page mode, folder batch.

Alternatives in Testing

Webapp Testing — Test local web applications using Playwright for UI verification and debugging 94.1k ★
Spectra App — Spec-driven development for coding agents — a desktop app, a CLI, and skills for Codex, Claude Code, Cursor, C 735 ★
Test Repl — Run a REPL test scenario against the claude-in-mobile REPL plugin (python/node/bash/...) 356 ★

README

🖼️ 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