メニュー
Visual QA loop for UI development — build, screenshot, compare to reference, identify delta, prompt correction, repeat. Formalizes the self-review cycle and defines when to disable it.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/andrem-sec/psc-comet --skill screenshot-loopコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | screenshot-loop |
| description | Visual QA loop for UI development — build, screenshot, compare to reference, identify delta, prompt correction, repeat. Formalizes the self-review cycle and defines when to disable it. |
| version | 0.1.0 |
| level | 2 |
| triggers | ["screenshot loop","visual review","compare to reference","self review UI","/screenshot-loop"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Setup","description":"Confirm Puppeteer is available or identify fallback. Establish reference screenshots and naming convention."},{"name":"Build Pass","description":"Write the initial implementation."},{"name":"Screenshot and Compare","description":"Take section-by-section screenshots. Compare against reference. Identify specific deltas."},{"name":"Correct","description":"Issue targeted correction prompts for each delta. One delta per prompt."},{"name":"Final Pass","description":"Screenshot the corrected result. Confirm delta is closed. Repeat if needed."}] |
Formalize the visual QA cycle. Build, screenshot, compare, correct, repeat. The loop closes the gap between what Claude thinks it built and what the reference actually looks like.
Claude writes code and declares it done. It has no way to see the result without a screenshot mechanism. Without one, it is writing blind — making visual decisions based on mental simulation of CSS properties, not actual rendered output.
The second failure: when a screenshot loop is set up but not managed, it becomes a liability. Claude takes a screenshot, sees it does not perfectly match the reference, and issues another correction. And another. And another. It spirals because the goal (exact pixel match) is unachievable and the loop has no exit condition. This skill defines the exit condition.
Puppeteer must be installed for automated screenshots:
npm install puppeteer
# or
npx puppeteer install chrome
Screenshot configuration in CLAUDE.md (add to project CLAUDE.md, not global):
## Screenshot Workflow
- Tool: Puppeteer
- Output dir: temp_screenshots/
- Naming: [section]-[pass]-[timestamp].png
- On session start: delete old screenshots from temp_screenshots/
- On animated elements: DO NOT screenshot — review manually
If Puppeteer is not available, use browser DevTools:
The loop still works without Puppeteer — it just requires manual screenshot capture at each step.
Before the first implementation pass:
temp_screenshots/reference-[section].pngtemp_screenshots/[section]-v[N].png for each passDo not start building without a reference screenshot in place. Without it, there is nothing to compare against.
Write the initial implementation. Do not screenshot during writing — complete the implementation first, then screenshot.
For large pages, implement section by section:
Do not implement the entire page and then screenshot. Section-by-section closes gaps before they compound.
After completing a section:
Delta format:
- [Element]: Built has [X], reference has [Y]
Example: "Hero heading: built uses 40px, reference appears ~56px"
- [Element]: Built missing [effect]
Example: "Card: missing the subtle box-shadow, appears flat"
- [Element]: Color mismatch
Example: "CTA button: built is #2563EB, reference appears warmer ~#3B82F6"
Describe deltas in specific, technical terms. "Looks different" is not actionable. "Font size appears 16px too small" is.
Issue one targeted prompt per delta. Do not batch all corrections into one prompt — it increases the chance of regression.
"The hero heading font size is too small. Increase from 40px to approximately 56px at desktop breakpoint."
After each correction, screenshot again and verify that specific delta is closed before moving to the next.
The loop exits when:
Do not loop more than 3 passes on a single section without pausing to ask the user if the remaining delta is worth pursuing. Some differences between a reference and a clone are intentional or unavoidable.
For components that include animation (CSS @keyframes, JavaScript-driven motion, video backgrounds), screenshots capture a frozen moment. The loop fails because:
When implementing animated components, explicitly disable the screenshot loop:
"This component includes animation — do not use the screenshot loop. Implement it and I will review the motion manually."
Add this instruction at the start of any animated component implementation session.
The screenshot loop runs against localhost. Never push changes to a staging or production environment while the loop is running. Only push when:
# In project CLAUDE.md:
Always develop and test on localhost. Never commit or push until I explicitly say to.
Poor naming causes confusion when reviewing pass history:
| Bad | Good |
|---|---|
| screenshot_1.png | hero-v1-before.png |
| temp.png | features-v2-after-correction.png |
| compare.png | reference-hero.png |
Format: [section]-v[pass]-[state].png
section: hero, features, pricing, footer, navpass: v1, v2, v3state: before, after, referenceDo not screenshot while still writing code. Complete the implementation pass first.
Do not loop indefinitely trying to achieve a pixel-perfect match with a reference. Set a maximum of 3 passes per section.
Do not use the screenshot loop on animated components. Review motion manually.
Do not push to any remote until the loop is complete and the user approves on localhost.
Do not batch all delta corrections into one prompt. Fix one delta at a time and verify.