reference-capture

Reference Capture

Screenshot what currently exists before building anything new. Every visual-build command (/blog-assets, /content, etc.) requires a recent reference capture — the check-reference hook will block the build if none exists.

Usage

/project:reference-capture [target]
/project:reference-capture https://acme.com/blog
/project:reference-capture homepage-hero
/project:reference-capture --intentional blog-redesign   # mark as intentional divergence

Why

Most rework comes from assumptions about what's already there. Before designing a new blog cover, you need to see the current covers. Before redesigning a hero, you need to see the existing hero. This command forces that step.

Prerequisites

• Playwright MCP available (preferred) OR manual PNG drop supported
• WEBSITE_URL set in config.env (unless ALLOW_GREENFIELD=true)

Steps

1. Parse target

• If target starts with http:// or https:// → use as URL directly
• If target is a slug or name (e.g. homepage-hero, blog) → resolve via config:
  • homepage → https://{{WEBSITE_URL}}
  • blog → https://{{WEBSITE_URL}}/blog
  • blog-[slug] → https://{{WEBSITE_URL}}/blog/[slug]
  • Other names → prompt user for full URL

2. Capture screenshot

If Playwright MCP is available:

mcp__playwright__browser_navigate (url)
mcp__playwright__browser_resize (1200, 675)
mcp__playwright__browser_take_screenshot (fullPage: false, filename: [slug]-[date].png)

If Playwright unavailable: Print manual instructions:

Playwright MCP not available. Take a screenshot manually:
  1. Open [url] in your browser
  2. Capture at 1200×675
  3. Save to: staging/references/[YYYY-MM-DD]-[slug].png
  4. Re-run this command to register it in the log

3. Save to staging/references/

Path: staging/references/[YYYY-MM-DD]-[slug].png

Where [slug] is:

• Sanitized from the target name (lowercase, hyphens, no special chars)
• Or derived from URL path (e.g. example.com/blog/headlines → blog-headlines)