[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-screenshot-capture":3},{"slug":4,"name":4,"description":5,"files":6,"size":20,"readme":21},"screenshot-capture","Captures a PNG of any rendered web page in headless Chrome — the whole page, one section, a single element, the above-the-fold viewport, or a mobile\u002Ftablet\u002Fdesktop rendering. Use when the user says \"screenshot\", \"take a screenshot\", \"grab a screenshot of \u003Curl>\", \"screenshot the hero \u002F pricing \u002F nav \u002F that button\", \"show me how X renders\", \"screenshot the mobile view\", or when another task needs a before\u002Fafter capture of a page. Infers the target from plain language, resolves sections by heading text, CSS selector or Nth \u003Csection>, saves a PNG and shows it. Self-contained: drives the installed Google Chrome (or Playwright's Chromium) through playwright-core, no MCP server.",[7,11,14,17],{"path":8,"size":9,"executable":10},"SKILL.md",8219,false,{"path":12,"size":13,"executable":10},"scripts\u002Fpackage.json",324,{"path":15,"size":16,"executable":10},"scripts\u002Fscreenshot.mjs",10225,{"path":18,"size":19,"executable":10},"LICENSE.md",1069,19837,"---\nname: screenshot-capture\ndescription: Captures a PNG of any rendered web page in headless Chrome — the whole page, one section, a single element, the above-the-fold viewport, or a mobile\u002Ftablet\u002Fdesktop rendering. Use when the user says \"screenshot\", \"take a screenshot\", \"grab a screenshot of \u003Curl>\", \"screenshot the hero \u002F pricing \u002F nav \u002F that button\", \"show me how X renders\", \"screenshot the mobile view\", or when another task needs a before\u002Fafter capture of a page. Infers the target from plain language, resolves sections by heading text, CSS selector or Nth \u003Csection>, saves a PNG and shows it. Self-contained: drives the installed Google Chrome (or Playwright's Chromium) through playwright-core, no MCP server.\n---\n\n# Screenshot Capture\n\nLoads a URL in headless Chrome and captures exactly what the user asked for: the whole page, one section, a single element, the viewport, or a specific device size. Saves a PNG and opens it so the result is visible.\n\nThe engine is `scripts\u002Fscreenshot.mjs` in this skill's folder. It drives the installed Google Chrome through `playwright-core` (no bundled browser download) and falls back to Playwright's own Chromium if Chrome isn't there. It prints the saved PNG path on its **last stdout line**: read that path, then open the PNG to view it.\n\nBelow, `\u003Cskill-dir>` means the folder this SKILL.md is in (for example `.claude\u002Fskills\u002Fscreenshot-capture`, `.agents\u002Fskills\u002Fscreenshot-capture`, or `~\u002F.codex\u002Fskills\u002Fscreenshot-capture`, depending on where it was installed).\n\n## When to use this skill\n\n- \"Screenshot localhost:3000\" \u002F \"grab a screenshot of example.com\"\n- \"Screenshot the pricing section\" \u002F \"capture the hero\" \u002F \"the footer\"\n- \"Screenshot the CTA button\" \u002F \"just the nav bar\" \u002F \"the `.testimonials` block\"\n- \"Screenshot the whole page\" \u002F \"the full scrollable page\"\n- \"Screenshot the mobile view\" \u002F \"how does this look on tablet\"\n- Before\u002Fafter captures for a design, audit or responsive pass\n\n## When NOT to use this skill\n\n- The user wants to **interact** with the page (click through a flow, fill forms, check console or network): use a browser-testing tool.\n- The user wants a **generated design or mockup**, not a capture of a real page.\n- A screenshot of the desktop or a native app: out of scope.\n\n## Rules\n\n- **Interpret intent first.** The user describes *what* in plain language; you pick the flag (map below). Don't ask which flag.\n- **The last stdout line is the PNG path** (everything else goes to stderr). Capture it and open the image.\n- **Report the full absolute path** in your reply, on its own line, never shortened with `…`.\n- First run only: if it fails with `Cannot find package 'playwright-core'`, do the one-time install in Step 1.\n\n## Intent → flags\n\n| What the user said | Flags |\n|--------------------|-------|\n| \"the page\", \"the whole page\", \"full page\" | `--full-page` |\n| \"this page\" \u002F no target \u002F \"what's on screen\" | *(no target → viewport)* |\n| \"the pricing section\", \"the FAQ\", \"the hero\" (named area) | `--section \"pricing\"` (heading match → enclosing `\u003Csection>`) |\n| \"the CTA button\", \"the nav\", \"`.hero`\", \"#footer\" (one element) | `--selector \".hero\"` |\n| \"the third section\", \"section 2\" | `--section 3` |\n| \"the X inside the Y\" | `--section \"X\" --container \".Y\"` |\n| \"mobile view\" \u002F \"on a phone\" | `--device mobile` (390 × 844) |\n| \"tablet\" \u002F \"desktop\" | `--device tablet` \u002F `--device desktop` |\n| \"at 1x\" \u002F smaller file | `--scale 1` (default is 2) |\n| custom size | `--width 1440 --height 900` |\n| \"it loads slowly\" \u002F \"wait for X\" | `--wait 1500` or `--wait \"\u003Cselector>\"` |\n| logged-in page | `--cdp \u003CwsUrl>` (see Example 4) |\n\nWhen unsure between a *named area* and an *exact element*, try `--section \"\u003Ctext>\"` first (it falls back through heading → text → block). Use `--selector` when the user names a CSS selector or one small control.\n\n## Workflow\n\n```\n- [ ] Step 1: Install deps (first run only)\n- [ ] Step 2: Work out the URL and map the request to flags\n- [ ] Step 3: Run scripts\u002Fscreenshot.mjs\n- [ ] Step 4: Open the printed PNG and report where it was saved\n```\n\n### Step 1: Install deps (first run only)\n\n```bash\ncd \u003Cskill-dir>\u002Fscripts && npm install\n```\n\nInstalls `playwright-core` only. If neither Google Chrome nor a Playwright Chromium is on the machine, also run `npx playwright install chromium` in the same folder.\n\n### Step 2: URL and target\n\n- **URL**: a bare path like `\u002Fpricing` means the project's local dev server. Find its port from the project's dev script or the running process (`lsof -iTCP -sTCP:LISTEN` or `ss -ltn`), and start it if it isn't running.\n- A local HTML file works too: `--url \"file:\u002F\u002F\u002Fabsolute\u002Fpath\u002Findex.html\"`.\n- **Target**: map the user's phrasing with the table above.\n\n### Step 3: Run the script\n\n```bash\nnode \u003Cskill-dir>\u002Fscripts\u002Fscreenshot.mjs --url \"\u003Curl>\" [target flags] [render flags]\n```\n\nThe full option list is in the header of `scripts\u002Fscreenshot.mjs`. Quick reference:\n\n| Flag | Purpose | Default |\n|------|---------|---------|\n| `--url \u003Curl>` | Page to load (required) | — |\n| `--full-page` | Whole scrollable page | off |\n| `--selector \u003Ccss>` | One exact element | — |\n| `--section \u003Cvalue>` | Heading text, CSS, or Nth `\u003Csection>` | — |\n| `--container \u003Ccss>` | Ancestor to capture when matching by heading | nearest `\u003Csection>` |\n| `--device \u003Cname>` | `mobile` \\| `tablet` \\| `desktop` preset | — |\n| `--width \u002F --height` | Viewport size | 1280 × 800 |\n| `--scale \u003Cn>` | Device scale factor | 2 |\n| `--wait \u003Cms\\|selector>` | Extra wait before capture | none |\n| `--pad \u003Cpx>` | Padding around a section\u002Felement clip | 0 |\n| `--out \u003Cpath>` | Output PNG path | timestamped file in the temp dir |\n| `--cdp \u003CwsUrl>` | Attach to a running Chrome (reuses its login) | launches a fresh one |\n| `--headed` | Show the browser window | headless |\n| `--channel \u003Cname>` | `chrome` \\| `msedge` \\| `chromium` | chrome, then chromium |\n\n### Step 4: View and report\n\nOpen the PNG from the last stdout line to check it, then give the user the full absolute path. Pass `--out \u003Cpath>` when the user wants it somewhere specific (a `screenshots\u002F` folder in the project is a good default for before\u002Fafter pairs). For several targets (mobile + desktop, three sections), run the script once per target.\n\n## Examples\n\n### Example 1: Whole page\n**User:** \"Screenshot example.com\"\n`node \u003Cskill-dir>\u002Fscripts\u002Fscreenshot.mjs --url \"https:\u002F\u002Fexample.com\" --full-page`\n\n### Example 2: A named section on the local app\n**User:** \"Screenshot the pricing section of \u002Fpricing\"\n`node \u003Cskill-dir>\u002Fscripts\u002Fscreenshot.mjs --url \"http:\u002F\u002Flocalhost:3000\u002Fpricing\" --section \"pricing\"`\n\n### Example 3: One element, mobile rendering\n**User:** \"Show me the nav on mobile\"\n`node \u003Cskill-dir>\u002Fscripts\u002Fscreenshot.mjs --url \"http:\u002F\u002Flocalhost:3000\" --selector \"nav\" --device mobile`\n\n### Example 4: A logged-in page (reuse a running Chrome)\n**User:** \"Screenshot the dashboard sidebar, it needs me logged in\"\n1. Ask the user to start Chrome with remote debugging and log in:\n   - macOS: `\"\u002FApplications\u002FGoogle Chrome.app\u002FContents\u002FMacOS\u002FGoogle Chrome\" --remote-debugging-port=9222`\n   - Linux: `google-chrome --remote-debugging-port=9222`\n   - Windows: `\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --remote-debugging-port=9222`\n2. Read `webSocketDebuggerUrl` from `http:\u002F\u002Flocalhost:9222\u002Fjson\u002Fversion`.\n3. `node \u003Cskill-dir>\u002Fscripts\u002Fscreenshot.mjs --url \"http:\u002F\u002Flocalhost:3000\u002Fdashboard\" --selector \"aside\" --cdp \"ws:\u002F\u002Flocalhost:9222\u002Fdevtools\u002Fbrowser\u002FXXXX\"`\n\n## Troubleshooting\n\n**`Cannot find package 'playwright-core'`**: first run. `cd \u003Cskill-dir>\u002Fscripts && npm install`.\n\n**`Failed to launch a browser`**: no Chrome and no Playwright Chromium. Install Google Chrome, or run `npx playwright install chromium` in `\u003Cskill-dir>\u002Fscripts`.\n\n**`Could not find anything matching \"X\"`**: no heading or text matched. Pass an exact `--selector \"\u003Ccss>\"`, or `--section \u003CN>` for the Nth `\u003Csection>`. Take a `--full-page` shot first to pick a selector.\n\n**Blank capture or missing late content**: the content rendered after `networkidle` or lazy-loads on scroll. Add `--wait 1500` or `--wait \"\u003Cselector>\"`. Sections are scrolled into view before capture, which triggers most lazy loads.\n"]