petekp/pr-screenshot-comparison
skills/pr-screenshot-comparison/SKILL.md
Create clear, polished before-and-after screenshots for a GitHub pull request. Use when a UI change needs visual proof: capture matching states, crop to the relevant UI, stitch and caption one comparison image, attach it natively to the PR, and keep the image out of the repository.
$ install --global
skillsauthnpx skillsauth add petekp/claude-skills pr-screenshot-comparisonInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 15, 2026, 6:54 AM192.3s2 files scanned
SKILL.md
- name:
- pr-screenshot-comparison
- description:
- Create clear, polished before-and-after screenshots for a GitHub pull request. Use when a UI change needs visual proof: capture matching states, crop to the relevant UI, stitch and caption one comparison image, attach it natively to the PR, and keep the image out of the repository.
PR Screenshot Comparison
Create a single, reviewer-friendly image that makes a visual UI change easy to evaluate.
Workflow
- Define the proof before capturing: route, viewport, theme, interaction state, and the exact UI area that changed. Use the same data and controls on both sides. Prefer the smallest set of states that proves the change; do not screenshot unrelated chrome.
- Capture the before state from the base branch and the after state from the PR branch. Use separate worktrees or an equivalent reversible setup so the two captures are genuinely comparable. If real auth or data blocks the route, build a temporary, uncommitted harness from the real shared primitives; remove it before committing.
- Crop both captures tightly to the affected controls. Preserve enough nearby context to explain the state. Keep crop dimensions and scale identical unless the layout itself changed.
- Stitch the images side by side in this order: Before, then After. Add a restrained caption above or below each panel. Use a neutral divider/background and ensure labels remain readable in the captured theme. Produce one PNG, not a set of loose images.
- Inspect the final image at normal review size. Confirm it shows the actual change, labels are accurate, the crops align, and no sensitive data or unrelated UI is visible.
- Add the image to the GitHub PR description as a native GitHub attachment. Drag it into the description editor or use GitHub's upload flow, then save and verify it renders for the repository.
Non-negotiable rules
- Do not add the PNG to the repository,
.github/assets, or the PR branch. It is PR context, not product source. - Do not use a raw private-repository file URL for the PR image; it may not render for reviewers. Native GitHub attachments are the durable option.
- Do not leave capture harnesses, fixtures, Vite changes, or screenshot tooling in the branch.
- Match viewport, zoom, theme, and component state. A comparison is invalid if those differ without being called out.
- If only one theme is included, say so in the PR description (for example, “Dark-mode comparison”).
Suggested PR copy
Use a short heading and place the native attachment directly below it:
### Visual comparison (dark mode)
Before: [old behavior]. After: [new behavior].
Describe the meaningful visual difference in one sentence. Do not claim full visual coverage when the image covers only one state or theme.
Final check
Before handoff, verify all of the following:
- The PR description displays one captioned before/after image.
- The image is a GitHub attachment, not a file changed by the PR.
git diff <base>...HEADcontains no image asset or temporary capture code.- The visible after state matches the committed implementation.
Related Skills
petekp/pr-self-review
development
VerifiedTrustedCommunity
Draft short, plainspoken notes in the author's voice that help reviewers understand non-obvious choices, boundaries, and preserved behavior in the author's own pull request or local diff. Use when the user asks to self-review, annotate, or add reviewer context to their PR or changes. Draft locally when no PR exists, and post approved notes as one GitHub review when a PR does exist. Do not use for reviewing someone else's PR, writing code comments, explaining code generally, or drafting a PR description. Never post without explicit approval.
40SKILL.mdUpdated Jul 21, 2026
petekp/tailwind-plugin-craft
tools
VerifiedTrustedCommunity
Design and build pure-CSS (zero-JavaScript) Tailwind CSS v4 plugins of unusual depth and craft. Use when the user wants to create, architect, or refine a Tailwind utility plugin or CSS effect — e.g. "make a tailwind plugin", "build a tw-* plugin", "a CSS-only shimmer/fade/glow/grain/noise utility", "tailwind v4 @utility", "package this effect as a plugin", or wants an effect with surprising visual depth (gradients, masks, filters, SVG filter tricks, scroll-driven animation). Pairs deep CSS/SVG technique research with a bespoke tuning workbench for dialing the effect in. Inspired by tw-fade and tw-shimmer.
40SKILL.mdUpdated Jul 15, 2026
petekp/skills/latent-potential
testing
VerifiedTrustedCommunity
--- name: latent-potential description: First-principles, team-of-experts assessment of a software project that surfaces latent potential; underexploited assets, a sharper north star, missing high-leverage capabilities, better framing and messaging. Produces a prioritized, evidence-grounded report with cheap probes, a reframe candidate, a stop-doing list, and an honest skeptic's case. Use whenever the user wants fresh eyes on a project they have built: "what am I sitting on", "what could this be
40SKILL.mdUpdated Jul 15, 2026
petekp/fixing-motion-performance
development
VerifiedTrustedCommunity
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
40SKILL.mdUpdated Jul 15, 2026