From dev-tools
Capture Playwright screenshots of a website under development. Use when the user asks to screenshot the site, grab screenshots of the app/UI, snapshot pages for visual review, or track visual evolution of a site.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dev-tools:screenshot-siteThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Capture screenshots of the website in the current repo using Playwright and organise them into a dated archive plus a "latest" pointer folder.
Capture screenshots of the website in the current repo using Playwright and organise them into a dated archive plus a "latest" pointer folder.
Accept these from the user (all optional):
/about, join it with the base URL.http://localhost:3000. If that isn't responding, probe common dev ports (3000, 5173, 8080, 4321, 5000, 8000) and use the first one that returns 200. If nothing is running, ask the user for the URL or whether they want you to start the dev server.1920x1080. Accept shorthand like mobile (390x844), tablet (768x1024), desktop (1920x1080).homepage, dashboard). Default to a slug derived from the URL path (/ → home, /about/team → about-team).Write into ./screenshots/ relative to the current repo root (create if missing, and add a line to .gitignore if the user wants them ignored — ask once the first time you create the folder).
Structure:
screenshots/
├── MMDD/ # e.g. 0419 — dated archive for evolution tracking
│ ├── home.png
│ └── dashboard.png
└── latest/ # always overwritten with the most recent run
├── home.png
└── dashboard.png
MMDD uses the current local date, zero-padded (April 19 → 0419).latest/ (overwriting).home-1430.png.curl -s -o /dev/null -w "%{http_code}" http://localhost:<port> and use the first 2xx/3xx response. If nothing's up, ask./ (homepage). If the repo appears to be a multi-page site and the user said "screenshot the site" without specifying, ask which pages.mkdir -p screenshots/MMDD screenshots/latest.mcp__plugin_playwright_playwright__browser_navigate, browser_resize, browser_take_screenshot). Otherwise write a short Node script using @playwright/test or playwright and run it with npx playwright — install on demand if missing.screenshots/MMDD/<name>.png and screenshots/latest/<name>.png.const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');
const BASE = process.env.BASE_URL || 'http://localhost:3000';
const PAGES = (process.env.PAGES || '/').split(',');
const VIEWPORT = (process.env.VIEWPORT || '1920x1080').split('x').map(Number);
const mmdd = (() => {
const d = new Date();
return String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
})();
const dated = path.join('screenshots', mmdd);
const latest = path.join('screenshots', 'latest');
fs.mkdirSync(dated, { recursive: true });
fs.mkdirSync(latest, { recursive: true });
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({ viewport: { width: VIEWPORT[0], height: VIEWPORT[1] } });
const page = await context.newPage();
for (const p of PAGES) {
const url = new URL(p, BASE).toString();
const name = (p.replace(/^\/+|\/+$/g, '') || 'home').replace(/\//g, '-') + '.png';
await page.goto(url, { waitUntil: 'networkidle' });
const datedPath = path.join(dated, name);
const latestPath = path.join(latest, name);
await page.screenshot({ path: datedPath, fullPage: true });
fs.copyFileSync(datedPath, latestPath);
console.log(`Captured ${url} → ${datedPath}`);
}
await browser.close();
})();
package.json for dev/start scripts and run in background — but ask first.npx claudepluginhub danielrosehill/claude-code-plugins --plugin dev-toolsGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.