agentleFS
Sign inStart free
nanosite-ainanosite-ai/nanoflow/skills/pr-screenshots/SKILL.md

pr-screenshots

Skill15 starsChanged 34 days agoMITView on GitHub

Verify a visual change in a real browser with the Playwright MCP and attach before/after screenshots to its PR. Use when a change affects anything you can see (UI, pages, emails, charts) and before opening or updating its PR.

14 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use security-review.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • SentrySkill

    security-review

    Finds exploitable application security vulnerabilities in code changes. Use for Warden security scans, appsec review, OWASP-style checks, authentication or authorization bugs, injection, XSS, SSRF, path traversal, secrets, unsafe crypto, webhook verification, open redirects, or sensitive data exposure.

    Also in 3 projects that use this

The file

Create a free account to mount
Files
SKILL.md

Verify in the browser, screenshot the PR

Reviewers should judge a visual change without checking the branch out. Unit tests don't show what a user sees, so verify live.

  1. Run this worktree's app on its own ports: nf up --bg, then nf env for the URL (each worktree has its own, so you never test another task's code by mistake).
  2. Before: capture the current behaviour from the main checkout's URL (slot 0), or from the deployed site.
  3. After: open this worktree's URL with the Playwright MCP (browser_navigate), drive the flow (browser_snapshot to read the page, then click/type by role and text, not CSS selectors), and take screenshots (browser_take_screenshot) of each state the change touches. Cover each theme or viewport the change affects. Name files for what they show: before-checkout.png, after-checkout-mobile.png.
  4. Attach:
    nf pr create --body-file pr.md --shots before-checkout.png after-checkout.png   # new PR
nf shots <pr#> after-checkout-v2.png --attach                                  # existing PR
    The images go to one orphan branch (assets/pr-screenshots, a pr-<n>-<slug>/ folder per PR), so they render inline, even on a private repo, and never enter the merge diff.
  5. Clean up: close the browser (browser_close) and delete the screenshot files you saved locally (only your own; other sessions may share the folder).

Skip screenshots only for changes with nothing to see (pure backend, config, docs) or when the surface genuinely can't be rendered locally; say which in the PR.

<sub>Part of nanoflow by nanosite.ai.</sub>

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free