Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add YuDefine/nuxt-supabase-starter --skill review-screenshotgit clone --depth 1 https://github.com/YuDefine/nuxt-supabase-starterWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yudefine/nuxt-supabase-starter/review-screenshot)<a href="https://agentmods.dev/skills/yudefine/nuxt-supabase-starter/review-screenshot"><img src="https://agentmods.dev/badge/skills/yudefine/nuxt-supabase-starter/review-screenshot/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yudefine/nuxt-supabase-starter/review-screenshot"><img src="https://agentmods.dev/badge/skills/yudefine/nuxt-supabase-starter/review-screenshot.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00075 | $0.01783 |
| Opus 5 | $0.00037 | $0.00892 |
| Sonnet 5 | $0.00015 | $0.00357 |
| Haiku 4.5 | $0.00007 | $0.00178 |
Grade A, and why
review-screenshot scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.
截圖(統一入口)
所有四個模式([verify:ui]、archive 前 QA、commit 0-B、ad-hoc)由主持者直派 Pi Gemini 3.8 Flash,具名列 screenshot-review-verify,effort high。截圖與 item 要求的符合性 gate 另交 Claude Opus 5 · medium,具名列 screenshot-match-analysis。
Runtime 分流
Gemini 經 pi-dispatch.ts 的 google-gemini-cli provider 執行;brief 指向本 skill 的 evidence contract,並提供當次可用 browser 工具、明確 URL 與允許的操作。工具未提供、登入/fixture/provider 阻塞時回報實際 blocker,保留未完成項。
Opus 5 使用 Claude Code 原生模型或已驗證的 Herdr bounded carrier。Cursor Task 的 claude-* catalog 不代替 Claude Code。
兩階段各有自己的 brief 與回報。Gemini 不再轉派、不代簽符合性 gate;Opus 必須讀每張指定圖片與完整 item。主 session 消費結構化結果;符合性判定者使用未參與實作的新上下文,並實際讀圖。Opus 5 無法執行時記錄實際原因,沿 screenshot-match-analysis 原列交 GPT-5.6 Sol(effort: high)讀圖判定。Gemini 或 Sol 不可用時保留 blocker,NEVER 沿 generic fallback 換成其他模型。
Brief 注意事項
- 逐項列完整 item、exact screenshot output path、URL、ready signal 與允許操作;Approved Tools、hard budget、checkpoint、fail-fast 與 progress.json 依 evidence contract。
- 認證值不進 brief;登入前置仍依既有 dev-auth 契約,從 routing 移除取得 session 的列不改該功能。
觸發時機
- 「截圖」「看畫面」「幫我看 UI」「看一下頁面」
- 「review screenshot」「跑檢查清單」「截圖檢查」
- UI 實作後確認、除錯截圖
- 工作完成後視覺驗收
派遣方式
- 把 Setup/Items/Output format 與 Approved Tools 寫入 brief,指定本 skill 的 evidence contract。
- 主持者直接派出取證 worker:
node <clade-vendor>/scripts/pi-dispatch.ts \
--brief <absolute-brief.md> --cwd <consumer-root> --label <descriptive-label> \
--model gemini --effort high --route routing-table \
--tier-basis table-row --table-row screenshot-review-verify --workspace-access mutation
- 依 agent-routing 的 Pi watch 收割 completion 與 evidence manifest。需要符合性 gate 時,把每張實際圖片路徑與 item 交給獨立 Opus 5 dispatch;保留收集者與判定者的 requested/observed model 證據。
verify:ui收集後由主持者依 watch protocol 呼叫verify-ui-receipt.ts,寫入失敗時保持 UNCERTAIN。
下面三段是 brief 的 prompt 本體素材。
Ad-hoc 截圖
prompt: |
截圖驗證以下頁面:
1. /path/to/page — 頁面描述
2. /path/to/page2 — 頁面描述
Dev server port: <port>(若已知)
Review 截圖(人工檢查)
prompt: |
針對 change `<change-name>` 的人工檢查清單逐項截圖驗證:
## 人工檢查
- [ ] #1 實際操作功能,確認 happy path 正常運作
- [ ] #2 測試 edge case...
Dev server port: <port>(若已知)
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today Changed · +5 lines d8e2be84ceb1
- 2d ago Changed · -6 lines 7a067331237d
- 3d ago Changed · +4 lines 779f91bc1e70
- 5d ago Changed 3efecabff178
- 7d ago First seen · 115 lines · 75 tokens per session scan A 76f8471d3b3e
review-screenshot is a skill published in the GitHub repository YuDefine/nuxt-supabase-starter (45 stars, last pushed today), licensed MIT. It adds 75 tokens to every session and 1,783 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
image-compare
Compare two image files on disk and report what changed, region by region. Trigger on "what changed between these two images", "diff these PNGs", "did this render drift", "compare screenshots/exports/renders".
visual-qa-testing
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
visual-regression-lab
Compare captures; stitch lazy/animated pages.
visual-qa-vision-agent
Equips the AI agent with visual QA capabilities using Playwright/Puppeteer and the agent's innate Vision capabilities to self-correct UI layout, CSS alignment, and visual regressions.
visual-regression
Catch unintended visual drift between prototype iterations with deterministic screenshot diffs. Use when iterating on a prototype, before review handoff, or before promoting an SPA prototype to a real build. Default engine is Playwright toHaveScreenshot with masking, threshold, and per-OS baselines. Includes Chromatic…
figma-to-react-workflow
Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, component library, TDD…