feat: add pr-screenshots skill to shared skills

[nick-inkeep]

Summary

• Adds a general-purpose pr-screenshots skill to plugins/shared/skills/
• Ported from inkeep/skills#1, generalized for any web project
• Three scripts: Playwright capture with sensitive data masking, Sharp annotation (labels, borders, stitching), and pre-upload secret validation
• Includes PR body markdown templates

What's included

plugins/shared/skills/pr-screenshots/
├── SKILL.md                         # Skill instructions
├── scripts/
│   ├── capture.ts                   # Playwright screenshot capture + auto-masking
│   ├── annotate.ts                  # Sharp-based image annotation
│   └── validate-sensitive.ts        # Pre-upload sensitive data check
└── references/
    └── pr-templates.md              # PR body markdown templates

End-to-end QA results

All three scripts tested end-to-end:

Script	Test	Result
capture.ts	Capture single route (example.com)	Pass
capture.ts	Multi-route capture (httpbin.org /, /forms/post)	Pass
capture.ts	Full-page mode	Pass
capture.ts	Viewport parsing, arg validation	Pass
validate-sensitive.ts	Detects OpenAI, Anthropic, Stripe, AWS, GitHub, PEM, JWT, Bearer, DB conn, generic secrets	Pass (16/16 patterns)
validate-sensitive.ts	Zero false positives on clean text	Pass
validate-sensitive.ts	Exit code 1 on critical, 0 on warnings/clean	Pass
annotate.ts	Label mode — correct dimensions (206x189 from 200x150 input)	Pass
annotate.ts	Stitch mode — correct dimensions (416x186)	Pass
annotate.ts	Special chars in labels (apostrophe, HTML entities)	Pass
annotate.ts	Error cases (no args, stitch with 1 image)	Pass
Integration	Capture → validate → annotate → stitch pipeline	Pass

83 total test assertions, 0 failures.

Test plan

• SKILL.md quality: Frontmatter valid, all sections present, internal links resolve, no Inkeep-specific strings, CLI args match capture.ts
• capture.ts e2e: Single route, multi-route, full-page mode all produce valid PNGs and .dom-text.txt files
• annotate.ts e2e: Label mode and stitch mode produce correct PNGs with expected dimensions
• validate-sensitive.ts e2e: Correctly detects dirty files (exit 1), passes clean files (exit 0)
• Full pipeline: capture → validate → annotate → stitch works end-to-end against real web pages
• Code audit: No security issues, proper error handling, browser cleanup in finally blocks

Screenshots generated by the skill itself are uploaded as PR comments below.

[nick-inkeep]

Demo Screenshots — generated by the skill itself

These screenshots were captured and annotated using the pr-screenshots skill scripts during end-to-end QA testing.

1. Raw capture (capture.ts)

tsx scripts/capture.ts --base-url https://example.com --routes "/" --output-dir ./pr-screenshots

2. Labeled annotation (annotate.ts)

tsx scripts/annotate.ts --input index.png --label "Capture Demo" --border "#3b82f6" --output capture-demo.png

3. Side-by-side stitch (annotate.ts)

tsx scripts/annotate.ts --stitch before.png after.png --labels "Before,After" --output stitch-demo.png

4. Sensitive data validation (validate-sensitive.ts)

tsx scripts/validate-sensitive.ts --dir ./pr-screenshots

✓ index.dom-text.txt: clean
✅ All files clean. Safe to upload.

5. Full pipeline verified

capture.ts → validate-sensitive.ts → annotate.ts (label + stitch)
     ↓              ↓                      ↓
  .png files    exit 0 (clean)      labeled + stitched PNGs
  .dom-text.txt

All 83 test assertions pass. No blocking issues found.