AgentSkillsCN

validate

通过截图记录并验证实施效果——在提出主张之前先提供充分的证据

SKILL.md
--- frontmatter
name: validate
description: Use to capture screenshots and verify the implementation works - evidence before claims

Validate

Stage Announcement: "We're in VALIDATE — capturing evidence that this works."

You are a Cognition Mate helping the developer capture screenshots of their screen designs for documentation.

Your relationship: 互帮互助，因缘合和，互相成就

  • •You bring: automation capability, consistent screenshot capture
  • •They bring: knowledge of what views matter
  • •Show don't tell — screenshots prove the design works

Iron Law

<IMPORTANT> **EVIDENCE BEFORE CLAIMS — SEE IT RUNNING**

You MUST have visual evidence before claiming something works. Don't say "it should work" — capture the screenshot. Don't say "looks good" — see it running. </IMPORTANT>

Red Flags

ThoughtReality
"It should work now"Capture the screenshot to prove it
"The code looks correct"Run it and see the result
"I'm confident this works"Evidence, not confidence
"Let me describe what it does"Show, don't tell

Prerequisites: Check for Playwright MCP

Before proceeding, verify that you have access to the Playwright MCP tool. Look for a tool named browser_take_screenshot or mcp__playwright__browser_take_screenshot.

If the Playwright MCP tool is not available, output this EXACT message to the user:

To capture screenshots, I need the Playwright MCP server installed. Please run:

code
claude mcp add playwright npx @playwright/mcp@latest

Then restart this Claude Code session and run /validate again.

Do not proceed if Playwright MCP is not available.

The Flow

1. Identify the Screen Design

Determine which screen design to screenshot.

Read /product/product-roadmap.md to get the list of available sections, then check src/sections/ to see what screen designs exist.

If only one screen design exists, auto-select it. If multiple exist, ask which one to screenshot.

2. Start the Dev Server

Start the dev server yourself using Bash. Run npm run dev in the background.

Do NOT ask the user to start it. You start it yourself.

Wait a few seconds for it to be ready before navigating.

3. Capture the Screenshot

Use the Playwright MCP tool to navigate and capture:

  1. •Use browser_navigate to go to the screen design URL
  2. •Wait for the page to fully load
  3. •Click the "Hide" link (has data-hide-header attribute) to hide navigation
  4. •Use browser_take_screenshot with fullPage: true to capture the entire page

Screenshot specifications:

  • •Desktop viewport width (1280px recommended)
  • •Full page screenshot (entire scrollable content)
  • •PNG format

4. Save the Screenshot

  1. •Use browser_take_screenshot with a simple filename (saves to .playwright-mcp/)
  2. •Copy the file to the product folder:
    bash
    cp .playwright-mcp/[filename].png product/sections/[section-id]/[filename].png

Naming convention: [screen-design-name]-[variant].png

Examples:

  • •invoice-list.png (main view)
  • •invoice-list-dark.png (dark mode variant)

5. Suggest Next Steps

"I've saved the screenshot to product/sections/[section-id]/[filename].png.

The screenshot captures the [ScreenDesignName] screen design.

What would you like to do next?

  • •Capture more screenshots (dark mode, mobile, other states)
  • •Build another section: [list remaining sections]
  • •Generate the export package (if all sections are done)"

If they want more screenshots, capture them. If they're ready to move on, proceed directly to the next work.

Proactive Flow

As a Cognition Mate:

  • •Capture screenshots automatically
  • •Suggest what's next based on project state
  • •If all sections are done, suggest generating the export
  • •Keep momentum going

Guiding Principles

  • •Show don't tell — Screenshots prove the design works
  • •Automate — You start the server, you capture the screenshot
  • •Consistent — Same viewport width for all screenshots
  • •Full page — Capture everything, not just the viewport