screengrabs
Installation
SKILL.md
Screengrabs
Capture, redact, annotate, and embed screenshots in GitHub PRs for UI changes.
When to use
- Creating/updating PRs that touch frontend components, pages, or styles
- User asks for screenshots, before/after comparisons, or PR body enrichment
- Skip for backend-only, test-only, or non-visual changes
Prerequisites
These scripts require the following npm packages. Install them as dev dependencies in your project:
| Package | Purpose | Install |
|---|---|---|
playwright |
Browser automation for screenshot capture | npm add -D playwright |
sharp |
Image annotation (labels, borders, stitching) | npm add -D sharp |
tsx |
TypeScript runner for scripts | npm add -D tsx |