From 8f98f36e3d92c6833a0c4e9fd6502eca0480f7d8 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 6 May 2026 17:29:08 -0700 Subject: [PATCH] craft.md Step 6: Reading the screenshot is the inspection, not taking it A v4 eval run took 4 targeted screenshots (hero, mobile, tablet, query-section) and then never Read any of them back. The agent treated browser_screenshot itself as "I inspected" and shipped without the multimodal feedback loop ever closing. Detector caught the resulting slop (5+ side-tab violations) on adjacent runs that did the same thing. Step 6 now spells out the pattern explicitly: take the screenshot, then Read the resulting PNG so its image content enters the conversation as multimodal input, then critique what you actually see in the image. With a check: "if your critique could have been written without looking at the image, you didn't look at the image." Validated with v5b: agent took 6 screenshots, Read all 6 back, and shipped with zero detector findings (vs the previous greenfield runs that hit 1-12 findings each). Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/reference/craft.md | 10 +++++++++- .claude/skills/impeccable/reference/craft.md | 10 +++++++++- .cursor/skills/impeccable/reference/craft.md | 10 +++++++++- .gemini/skills/impeccable/reference/craft.md | 10 +++++++++- .github/skills/impeccable/reference/craft.md | 10 +++++++++- .kiro/skills/impeccable/reference/craft.md | 10 +++++++++- .opencode/skills/impeccable/reference/craft.md | 10 +++++++++- .pi/skills/impeccable/reference/craft.md | 10 +++++++++- .qoder/skills/impeccable/reference/craft.md | 10 +++++++++- .rovodev/skills/impeccable/reference/craft.md | 10 +++++++++- .trae-cn/skills/impeccable/reference/craft.md | 10 +++++++++- .trae/skills/impeccable/reference/craft.md | 10 +++++++++- plugin/skills/impeccable/reference/craft.md | 10 +++++++++- skill/reference/craft.md | 10 +++++++++- 14 files changed, 126 insertions(+), 14 deletions(-) diff --git a/.agents/skills/impeccable/reference/craft.md b/.agents/skills/impeccable/reference/craft.md index e014f1f22..9cc01b4e0 100644 --- a/.agents/skills/impeccable/reference/craft.md +++ b/.agents/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.claude/skills/impeccable/reference/craft.md b/.claude/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.claude/skills/impeccable/reference/craft.md +++ b/.claude/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.cursor/skills/impeccable/reference/craft.md b/.cursor/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.cursor/skills/impeccable/reference/craft.md +++ b/.cursor/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.gemini/skills/impeccable/reference/craft.md b/.gemini/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.gemini/skills/impeccable/reference/craft.md +++ b/.gemini/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.github/skills/impeccable/reference/craft.md b/.github/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.github/skills/impeccable/reference/craft.md +++ b/.github/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.kiro/skills/impeccable/reference/craft.md b/.kiro/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.kiro/skills/impeccable/reference/craft.md +++ b/.kiro/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.opencode/skills/impeccable/reference/craft.md b/.opencode/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.opencode/skills/impeccable/reference/craft.md +++ b/.opencode/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.pi/skills/impeccable/reference/craft.md b/.pi/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.pi/skills/impeccable/reference/craft.md +++ b/.pi/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.qoder/skills/impeccable/reference/craft.md b/.qoder/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.qoder/skills/impeccable/reference/craft.md +++ b/.qoder/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.rovodev/skills/impeccable/reference/craft.md b/.rovodev/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.rovodev/skills/impeccable/reference/craft.md +++ b/.rovodev/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.trae-cn/skills/impeccable/reference/craft.md b/.trae-cn/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.trae-cn/skills/impeccable/reference/craft.md +++ b/.trae-cn/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/.trae/skills/impeccable/reference/craft.md b/.trae/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/.trae/skills/impeccable/reference/craft.md +++ b/.trae/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/plugin/skills/impeccable/reference/craft.md b/plugin/skills/impeccable/reference/craft.md index e6c56ddb6..71c8d4e26 100644 --- a/plugin/skills/impeccable/reference/craft.md +++ b/plugin/skills/impeccable/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished. diff --git a/skill/reference/craft.md b/skill/reference/craft.md index e64a8f9a6..64293bb7b 100644 --- a/skill/reference/craft.md +++ b/skill/reference/craft.md @@ -124,7 +124,15 @@ Implement the feature following the design brief. Build in passes so structure, ## Step 6: Browser-Based Iteration -**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output. +**This step is critical.** Open the result in a browser and look at it. In Codex, use browser-use or equivalent; otherwise use Playwright or ask the user for screenshots. + +**Capturing a screenshot is not inspecting it.** A `browser_screenshot` call returns a file path; until you Read that file back into the conversation, the model has not seen the rendered page. Skipping the Read makes this step a checkbox, not an inspection. The pattern is: + +1. Take the screenshot (`browser_screenshot` or equivalent). +2. **Read the resulting PNG file** so its image content enters the conversation as multimodal input. +3. Critique what you actually see in the image. Reference specific elements: "the hero CTA looks misaligned at this width," "the trace section has too much whitespace above," etc. If your critique could have been written without looking at the image, you didn't look at the image. + +Do this for each viewport you screenshot. Do not declare a viewport inspected without a Read of the image. Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished.