From 5f41cd9ad76aba2d3817498273d174a33e0aadd8 Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Tue, 17 Mar 2026 10:30:19 -0500 Subject: [PATCH] feat: show screenshots to user during QA and browse sessions (v0.5.0.1) (#129) Add rule 11 to QA and Design methodologies in gen-skill-docs.ts instructing Claude to Read screenshot PNGs after taking them. This makes screenshots visible as clickable elements in Conductor and other Claude Code UIs. Also added to browse and gstack SKILL templates. Co-authored-by: Claude Opus 4.6 --- CHANGELOG.md | 6 ++++++ SKILL.md | 1 + SKILL.md.tmpl | 1 + VERSION | 2 +- browse/SKILL.md | 3 +++ browse/SKILL.md.tmpl | 3 +++ plan-design-review/SKILL.md | 1 + qa-design-review/SKILL.md | 1 + qa-only/SKILL.md | 1 + qa/SKILL.md | 1 + scripts/gen-skill-docs.ts | 6 ++++-- 11 files changed, 23 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a86569c84b76e708cd4b6857af9cb3d28c2a6892..92a458585fa9ca35b51162ca60efcae0c92ab91b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 0.5.0.1 — 2026-03-17 + +### Fixed + +- **Screenshots are now visible during QA and browse sessions.** When gstack takes screenshots, they now show up as clickable image elements in your output — no more invisible `/tmp/browse-screenshot.png` paths you can't see. Works in `/qa`, `/qa-only`, `/plan-design-review`, `/qa-design-review`, `/browse`, and `/gstack`. + ## 0.5.0 — 2026-03-16 - **Your site just got a design review.** `/plan-design-review` opens your site and reviews it like a senior product designer — typography, spacing, hierarchy, color, responsive, interactions, and AI slop detection. Get letter grades (A-F) per category, a dual headline "Design Score" + "AI Slop Score", and a structured first impression that doesn't pull punches. diff --git a/SKILL.md b/SKILL.md index 76007eee19ca569c3e4c6c59aa6ea6ea7764166f..c0d6e2676b7277815f9d624d7154067d312f197b 100644 --- a/SKILL.md +++ b/SKILL.md @@ -111,6 +111,7 @@ If `NEEDS_SETUP`: - NEVER use `mcp__claude-in-chrome__*` tools. They are slow and unreliable. - Browser persists between calls — cookies, login sessions, and tabs carry over. - Dialogs (alert/confirm/prompt) are auto-accepted by default — no browser lockup. +- **Show screenshots:** After `$B screenshot`, `$B snapshot -a -o`, or `$B responsive`, always use the Read tool on the output PNG(s) so the user can see them. Without this, screenshots are invisible. ## QA Workflows diff --git a/SKILL.md.tmpl b/SKILL.md.tmpl index 7f2e11dbd747f90ce22511a6ceee740108fa1729..dd2b23455201df3856215bd87f9e4cc479b6f1d9 100644 --- a/SKILL.md.tmpl +++ b/SKILL.md.tmpl @@ -29,6 +29,7 @@ Auto-shuts down after 30 min idle. State persists between calls (cookies, tabs, - NEVER use `mcp__claude-in-chrome__*` tools. They are slow and unreliable. - Browser persists between calls — cookies, login sessions, and tabs carry over. - Dialogs (alert/confirm/prompt) are auto-accepted by default — no browser lockup. +- **Show screenshots:** After `$B screenshot`, `$B snapshot -a -o`, or `$B responsive`, always use the Read tool on the output PNG(s) so the user can see them. Without this, screenshots are invisible. ## QA Workflows diff --git a/VERSION b/VERSION index 8f0916f768f0487bcf8d33827ce2c8dcecb645c1..494bbc1a27b860679b30c04d2a894dfd509d1d34 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.5.0 +0.5.0.1 diff --git a/browse/SKILL.md b/browse/SKILL.md index dd473dc0662bc9503d33ae330500670d2648bf37..33accc0942a34b0611c785981eb22435970d1d8e 100644 --- a/browse/SKILL.md +++ b/browse/SKILL.md @@ -184,6 +184,9 @@ $B snapshot -D # verify deletion happened $B diff https://staging.app.com https://prod.app.com ``` +### 11. Show screenshots to the user +After `$B screenshot`, `$B snapshot -a -o`, or `$B responsive`, always use the Read tool on the output PNG(s) so the user can see them. Without this, screenshots are invisible. + ## Snapshot Flags The snapshot is your primary tool for understanding and interacting with pages. diff --git a/browse/SKILL.md.tmpl b/browse/SKILL.md.tmpl index 6ce20634b84969cdfb7fc9d932c61d847f2e81dd..0c42ffcb40457f4bbefb4493169ebb5a7068204b 100644 --- a/browse/SKILL.md.tmpl +++ b/browse/SKILL.md.tmpl @@ -102,6 +102,9 @@ $B snapshot -D # verify deletion happened $B diff https://staging.app.com https://prod.app.com ``` +### 11. Show screenshots to the user +After `$B screenshot`, `$B snapshot -a -o`, or `$B responsive`, always use the Read tool on the output PNG(s) so the user can see them. Without this, screenshots are invisible. + ## Snapshot Flags {{SNAPSHOT_FLAGS}} diff --git a/plan-design-review/SKILL.md b/plan-design-review/SKILL.md index c0ca95129bd4cd4f488e58308ceec13ebd7ce10e..1231d968490acd4bd217b25d159626a957c92bcd 100644 --- a/plan-design-review/SKILL.md +++ b/plan-design-review/SKILL.md @@ -465,6 +465,7 @@ Tie everything to user goals and product objectives. Always suggest specific imp 8. **Responsive is design, not just "not broken."** A stacked desktop layout on mobile is not responsive design — it's lazy. Evaluate whether the mobile layout makes *design* sense. 9. **Document incrementally.** Write each finding to the report as you find it. Don't batch. 10. **Depth over breadth.** 5-10 well-documented findings with screenshots and specific suggestions > 20 vague observations. +11. **Show screenshots to the user.** After every `$B screenshot`, `$B snapshot -a -o`, or `$B responsive` command, use the Read tool on the output file(s) so the user can see them inline. For `responsive` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user. --- diff --git a/qa-design-review/SKILL.md b/qa-design-review/SKILL.md index 08c9916ac7a6ae18e52c3550f3685ded01033002..7fa0b856102309e1a429d4a9144cd9f3f0fe7839 100644 --- a/qa-design-review/SKILL.md +++ b/qa-design-review/SKILL.md @@ -477,6 +477,7 @@ Tie everything to user goals and product objectives. Always suggest specific imp 8. **Responsive is design, not just "not broken."** A stacked desktop layout on mobile is not responsive design — it's lazy. Evaluate whether the mobile layout makes *design* sense. 9. **Document incrementally.** Write each finding to the report as you find it. Don't batch. 10. **Depth over breadth.** 5-10 well-documented findings with screenshots and specific suggestions > 20 vague observations. +11. **Show screenshots to the user.** After every `$B screenshot`, `$B snapshot -a -o`, or `$B responsive` command, use the Read tool on the output file(s) so the user can see them inline. For `responsive` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user. Record baseline design score and AI slop score at end of Phase 6. diff --git a/qa-only/SKILL.md b/qa-only/SKILL.md index 5e74f03e6032b411ad46618989fef11402243d46..ed732bf5f865dab155a5e28d283abad84c9226e2 100644 --- a/qa-only/SKILL.md +++ b/qa-only/SKILL.md @@ -415,6 +415,7 @@ Minimum 0 per category. 8. **Depth over breadth.** 5-10 well-documented issues with evidence > 20 vague descriptions. 9. **Never delete output files.** Screenshots and reports accumulate — that's intentional. 10. **Use `snapshot -C` for tricky UIs.** Finds clickable divs that the accessibility tree misses. +11. **Show screenshots to the user.** After every `$B screenshot`, `$B snapshot -a -o`, or `$B responsive` command, use the Read tool on the output file(s) so the user can see them inline. For `responsive` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user. --- diff --git a/qa/SKILL.md b/qa/SKILL.md index 6b078a9d65cf9354c4ef07e67ab888ceb6f4f0dd..ac12fc94f4c300e50ae5b900d78ee463f0cf3802 100644 --- a/qa/SKILL.md +++ b/qa/SKILL.md @@ -454,6 +454,7 @@ Minimum 0 per category. 8. **Depth over breadth.** 5-10 well-documented issues with evidence > 20 vague descriptions. 9. **Never delete output files.** Screenshots and reports accumulate — that's intentional. 10. **Use `snapshot -C` for tricky UIs.** Finds clickable divs that the accessibility tree misses. +11. **Show screenshots to the user.** After every `$B screenshot`, `$B snapshot -a -o`, or `$B responsive` command, use the Read tool on the output file(s) so the user can see them inline. For `responsive` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user. Record baseline health score at end of Phase 6. diff --git a/scripts/gen-skill-docs.ts b/scripts/gen-skill-docs.ts index 7a0b85abd36eb4b74c254d8f67c6c0a4a874bc80..5d5f84bb58c3ca801bba61d1fc3cf7c9234a3103 100644 --- a/scripts/gen-skill-docs.ts +++ b/scripts/gen-skill-docs.ts @@ -476,7 +476,8 @@ Minimum 0 per category. 7. **Test like a user.** Use realistic data. Walk through complete workflows end-to-end. 8. **Depth over breadth.** 5-10 well-documented issues with evidence > 20 vague descriptions. 9. **Never delete output files.** Screenshots and reports accumulate — that's intentional. -10. **Use \`snapshot -C\` for tricky UIs.** Finds clickable divs that the accessibility tree misses.`; +10. **Use \`snapshot -C\` for tricky UIs.** Finds clickable divs that the accessibility tree misses. +11. **Show screenshots to the user.** After every \`$B screenshot\`, \`$B snapshot -a -o\`, or \`$B responsive\` command, use the Read tool on the output file(s) so the user can see them inline. For \`responsive\` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user.`; } function generateDesignMethodology(): string { @@ -809,7 +810,8 @@ Tie everything to user goals and product objectives. Always suggest specific imp 7. **Use \`snapshot -C\` for tricky UIs.** Finds clickable divs that the accessibility tree misses. 8. **Responsive is design, not just "not broken."** A stacked desktop layout on mobile is not responsive design — it's lazy. Evaluate whether the mobile layout makes *design* sense. 9. **Document incrementally.** Write each finding to the report as you find it. Don't batch. -10. **Depth over breadth.** 5-10 well-documented findings with screenshots and specific suggestions > 20 vague observations.`; +10. **Depth over breadth.** 5-10 well-documented findings with screenshots and specific suggestions > 20 vague observations. +11. **Show screenshots to the user.** After every \`$B screenshot\`, \`$B snapshot -a -o\`, or \`$B responsive\` command, use the Read tool on the output file(s) so the user can see them inline. For \`responsive\` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user.`; } const RESOLVERS: Record string> = {