How does it protect sensitive information in screenshots?

The skill includes a validation script that scans the captured DOM text for API keys, tokens, and private keys to ensure no secrets are uploaded.

Does it support capturing full-page screenshots?

Yes, the skill includes a --full-page option to capture the entire scrollable height of a target route.

Can it handle pages that require authentication?

Yes, you can write custom pre-scripts to automate login flows or provide session cookies via the --auth-cookie command option.

Can I use it for responsive design testing?

Absolutely. You can specify different viewport dimensions using the --viewport flag to capture how UI changes look across various screen sizes.

What dependencies does the Screengrabs skill require?

It requires Playwright, Sharp, and tsx to be installed as dev dependencies in your project, along with Playwright browser binaries.

Screengrabs for Pull Requests

Name: Screengrabs for Pull Requests
Author: inkeep

byinkeep

•

コラボレーションツール

Captures, annotates, and embeds UI screenshots into GitHub pull requests to document frontend changes and visual diffs.

Screengrabs is a specialized Claude Code skill designed to automate the process of documenting UI changes in GitHub pull requests. It leverages Playwright for browser automation and Sharp for image processing, allowing developers to capture high-quality screenshots, handle complex interactions through pre-scripts, and annotate images with labels or side-by-side comparisons. By integrating directly into the PR workflow, it ensures that visual changes are clearly communicated, verified for sensitive data, and presented professionally, reducing the need for manual screen capture and manual PR body editing.

主な機能

01Built-in image annotation for labels, borders, and side-by-side comparisons

02Automatic sensitive data validation to prevent leaking API keys or tokens

032 GitHub stars

04Custom pre-script support to handle complex interactions like logins or modals

05Direct integration with GitHub PR descriptions for streamlined visual documentation

06Automated browser capture using Playwright for consistent UI snapshots

ユースケース

01Documenting specific UI states such as mobile views, expanded menus, or error states

02Automating visual regression verification during the code review process

03Generating before-and-after visual comparisons for frontend styling changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add inkeep/team-skills screengrabs

For use in Claude.ai and ChatGPT

Download Skill