screenshot

Take a screenshot of a local web page using Playwright (Chromium) for visual debugging.

Usage

/screenshot                              # Default: http://localhost:8081, viewport screenshot
/screenshot http://localhost:3000        # Custom URL
/screenshot --selector ".my-component"   # Screenshot a specific element
/screenshot --wait 3000                  # Wait 3s for animations/loading before capture
/screenshot --full                       # Full-page screenshot (not just viewport)
/screenshot http://localhost:8081 --wait 5000 --full

Behavior

1. •

   Parse arguments:

   • •First positional arg = URL (default: http://localhost:8081)
   • •--selector "css" = screenshot only that element
   • •--wait N = wait N milliseconds after load before screenshot (default: 2000)
   • •--full = full page screenshot instead of viewport only
   • •--width N = viewport width (default: 1440)
   • •--height N = viewport height (default: 900)
   • •--dark = inject localStorage.setItem('yc-dark-mode', 'true') before navigating
2. •

   Run a Node.js script using npx playwright that:

   • •Launches headless Chromium
   • •Sets viewport to specified dimensions
   • •Navigates to URL
   • •Waits for network idle + specified wait time
   • •Takes screenshot
   • •Saves to /private/tmp/claude-501/screenshots/screenshot-{timestamp}.png
3. •

   Use the Read tool to view the screenshot image file and analyze it

Implementation

Write a temporary Node.js script and run it with node. The script uses playwright (already installed globally).

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext({
        viewport: { width: WIDTH, height: HEIGHT }
    });
    const page = await context.newPage();

    // Optional: set dark mode in localStorage before navigation
    // if (dark) { await page.addInitScript(() => localStorage.setItem('yc-dark-mode', 'true')); }

    await page.goto(URL, { waitUntil: 'networkidle' });
    await page.waitForTimeout(WAIT);

    // Optional: element screenshot
    // if (selector) { await page.locator(selector).screenshot({ path: OUTPUT }); }
    // else { await page.screenshot({ path: OUTPUT, fullPage: FULL }); }

    await page.screenshot({ path: OUTPUT, fullPage: FULL_PAGE });
    await browser.close();
    console.log(OUTPUT);
})();

1. •After taking the screenshot, ALWAYS use the Read tool to view the PNG file and describe what you see. This is the whole point - visual debugging.

Important Notes

• •Ensure a dev server is running at the target URL before taking a screenshot
• •The default 2000ms wait handles most D3 animations and data loading
• •For the YC visualizer, use --wait 5000 to ensure force simulation + entrance animation complete
• •Screenshots are saved as PNG for Read tool compatibility
• •Create the screenshots directory if it doesn't exist: mkdir -p /private/tmp/claude-501/screenshots