# Playwright

> Capture a screenshot of a URL or local page and load it into context for a visual check. Use when asked to check visually, use playwright, screenshot a page, see or look at the design yourself, or verify a layout on desktop and mobile widths.

- Skill: `kovrichard/playwright` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add kovrichard/playwright`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kovrichard/playwright/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: kovrichard (https://skillmd.com/u/kovrichard)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kovrichard/playwright

---


## Overview

Take a screenshot of a running page and `Read` it into context so you can see the rendered result yourself — for design review, responsive checks (desktop + mobile widths), and confirming a layout fix actually looks right. This skill returns an **image**, not page data.

## Engine selection (handled by the tool)

The bundled tool picks the best available local engine automatically:

1. **System `playwright-cli`** (Microsoft's stateful agent CLI) — used when it is on `PATH` and no exact viewport/full-page is requested (its `screenshot` command can't set those).
2. **PAL-installed Playwright, launched in-process** — the precise path. Honors `--viewport`, `--full-page`, and `--selector` precisely.

If neither engine is usable, the tool prints `NO_PLAYWRIGHT_CLI` and exits non-zero — only then use the **Playwright MCP** (tier 3) in step 4.

## Workflow

1. Resolve the URL. If it's a local app, make sure the dev server is already running first.
2. Run the tool (it prints the absolute PNG path as its last stdout line):

   ```bash
   pal cli skill run playwright shot <url> \
     [--viewport 1440x900] [--full-page] [--selector "<css>"] [-o <out.png>]
   ```

3. `Read` the printed path so the screenshot enters your context. For a responsive check, run once per width (e.g. `--viewport 1440x900` then `--viewport 390x844`) and Read each.
4. If the tool exits with `NO_PLAYWRIGHT_CLI`:
   - If Playwright MCP tools (`mcp__playwright__browser_*`) are available: `browser_navigate` to the URL, `browser_take_screenshot` to a file, then `Read` it.
   - Otherwise, tell the user Playwright isn't installed and suggest running `pal cli install`.

## Output format

The screenshot image (via `Read`) plus one line stating the URL and viewport captured. Add a review only if the caller asked you to assess the design.

## When to use

- "check visually", "use playwright", "screenshot this", "see/look at the design yourself", "does this look right", desktop/mobile layout verification.

## Do NOT use

- To scrape page text or DOM data — fetch the page directly instead; this returns an image.
- To measure computed styles, element sizes, or horizontal overflow — use the Playwright MCP `browser_evaluate` for metrics; this skill does not return numbers.