shotkitlisted

Produce screenshots that look like a product shipped them — the way Shottr, CleanShot X or Screely do it: a clean deterministic capture, cropped at a real boundary, on a backdrop with padding, rounded corners, a layered shadow, optional macOS or browser window chrome, and arrows/numbered badges/blur redaction where they help. Use this whenever a screenshot is going to be *seen by someone else* — a marketing or landing page, a README or docs page, a changelog, a release post, an app store or Chrome Web Store listing, a slide, a design review — and whenever someone says their screenshots look bad, flat, cheap, amateur, inconsistent, blurry or "like a bug report", or asks to add a device frame, drop shadow, gradient background, padding or annotations to an image. Also use it to audit existing screenshots for clipped text, wrong resolution and mismatched sizes. Do NOT use it for screenshots you take to verify your own work or to debug a layout — those want the raw pixels, and framing them wastes time.
patlf/shotkit · ★ 0 · Code & Development · score 72

Install: claude install-skill patlf/shotkit

# Polished screenshots A screenshot that will be looked at by a stranger is a piece of design, and it fails in predictable ways. This skill is a renderer (`scripts/shotkit.mjs`) plus the judgment about when to reach for which part of it. ## The one rule **A frame cannot rescue a bad capture.** Padding, shadow and a mac window around a shot whose text is cut mid-glyph makes the defect *more* obvious, not less — you have drawn a nice border around the mistake and lit it. Spend the effort in this order: 1. **Capture** clean and deterministic 2. **Crop** at a boundary the UI actually has 3. **Frame** it 4. **Check** it Most bad screenshots are lost at step 1 or 2, and no amount of step 3 gets them back. ## Quick start ```bash # Installed into this project (npx skills add patlf/shotkit): S="node .claude/skills/shotkit/scripts/shotkit.mjs" # Installed globally (npx skills add -g patlf/shotkit): # S="node $HOME/.claude/skills/shotkit/scripts/shotkit.mjs" # Installed as a Claude Code plugin (/plugin install shotkit@shotkit) — the cache # path moves on every update, so resolve it rather than hardcoding it: # S="node ${CLAUDE_PLUGIN_ROOT}/scripts/shotkit.mjs" # Installed as a dependency of the project: # S="npx shotkit" # Capture a live page and frame it in one pass $S capture http://localhost:3000 --out shots/hero.png \ --selector ".app-shell" --viewport 1440x900 --preset mac --title "Acme" # Frame a screenshot you already have (or one from ⌘⇧4 / Shottr / CleanShot) $S fr