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.