Summary

• Ports the pr-screenshots skill from inkeep/agents PR #1918 and generalizes it for any web project
• Includes three scripts: Playwright-based screenshot capture with sensitive data masking, Sharp-based image annotation (labels, borders, side-by-side stitching), and pre-upload validation that blocks uploads containing leaked secrets
• Provides reusable PR body markdown templates

What changed from the original

Removed (Inkeep-specific):

• references/affected-routes.md — component-to-route mapping specific to agents-manage-ui
• Vercel/Inkeep preview URL patterns
• App-specific CSS selectors (input[name="apiKeyToSet"], input[data-field="value"], [role="alertdialog"])
• ik_ API key pattern from sensitive data validator
• Cursor-specific browser-use subagent section

Generalized:

• SKILL.md describes a framework-agnostic workflow
• capture.ts default masks: input[type="password"] + text-pattern redaction for common secret formats
• Dependencies documented as prerequisites (not added to a package.json)
• Script paths use relative references

File structure

skills/pr-screenshots/
├── SKILL.md                         # Skill instructions (Agent Skills spec)
├── scripts/
│   ├── capture.ts                   # Playwright screenshot capture
│   ├── annotate.ts                  # Sharp-based image annotation
│   └── validate-sensitive.ts        # Pre-upload sensitive data check
└── references/
    └── pr-templates.md              # PR body markdown templates

Test plan

• No Inkeep-specific strings in any file (except author: "inkeep" in metadata)
• All scripts are syntactically valid TypeScript with only node:fs, node:path, playwright, and sharp imports
• SKILL.md follows Agent Skills spec (YAML front matter with name, description, license, metadata)
• README.md updated with new skill listing

🤖 Generated with Claude Code