メニュー
Playwright Chromium harness for capturing Docusaurus pages and components in light + dark themes. Use directly when iterating on a single page, or via audit-capture for a full manifest-driven run.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Authoring blog posts in ppds-docs — first-person voice, technical narrative. Use when drafting a blog post or release recap.
Authoring docs in ppds-docs — Diátaxis classification, voice, style. Use when writing or restructuring tutorials, guides, reference, or concept docs.
Run manifest-driven PNG captures of the ppds-docs site (Docusaurus) for design audits. Emits a schema-conformant capture tree for consumption by a Claude design-audit session. Captures each page in both light and dark themes.
| name | docs-verify |
| description | Playwright Chromium harness for capturing Docusaurus pages and components in light + dark themes. Use directly when iterating on a single page, or via audit-capture for a full manifest-driven run. |
| allowed-tools | Bash(node tools/docs-verify*), Bash(node tools/docs-verify.mjs *) |
Playwright-driven PNG capture of the ppds-docs Docusaurus site. Launches a persistent Chromium + page, optionally starts npm run start in the background, captures a route or component in both themes, then closes cleanly.
Text-based verification isn't the goal here — this tool produces PNGs for a design audit. If you want to assert on page content, use Playwright's test runner directly.
audit-capture entry produces an unexpected PNGThe tool lives at tools/docs-verify.mjs. Requires:
@playwright/test (dev dep — brings Chromium)npx playwright install chromium once, if Chromium hasn't been downloaded yetNo build step. The tool runs as a detached daemon (Chromium + a small HTTP RPC server on a random localhost port). Subsequent commands talk to the daemon via that port, which keeps Chromium warm.
# 1. Launch Chromium + optional dev server (mode=dev starts npm run start)
node tools/docs-verify.mjs launch --dev
# or against the live site:
DOCS_URL=https://joshsmithxrm.github.io/ppds-docs \
node tools/docs-verify.mjs launch --production
# 2. Capture a page — writes 01-top.light.png and 01-top.dark.png to /tmp
node tools/docs-verify.mjs capture /docs/getting-started/installation /tmp/01-top
# 3. Capture a component
node tools/docs-verify.mjs component "nav.navbar" /tmp/01-navbar
# 4. Close when done (kills Chromium + dev server if launch started one)
node tools/docs-verify.mjs close
| Command | Example | Purpose |
|---|---|---|
launch [--dev|--production] | launch --dev | Start Chromium daemon. --dev also starts npm run start and waits for port 3000. |
close | close | Shut down daemon and any dev server it started. Idempotent. |
capture <route> <stem> | capture /docs/guides/authentication /tmp/auth | Full-page PNG of DOCS_URL + route, both themes. |
component <selector> <stem> | component ".heroBanner" /tmp/hero | Tight-cropped PNG of the first matching element, both themes. |
Output files are always <stem>.light.png and <stem>.dark.png.
| Var | Purpose |
|---|---|
DOCS_URL | Base URL. Defaults to http://localhost:3000 in dev. Override for production. |
Docusaurus reads theme state from localStorage.theme on page init and sets <html data-theme> accordingly. This tool:
localStorage.theme = 'light' (or 'dark') via Playwright's addInitScript before navigation.document.documentElement.setAttribute('data-theme', ...) as a belt-and-braces step.If you see a flash of the wrong theme in the capture, you've probably stumbled into a Docusaurus internals change — investigate first, patch second.
Fixed at 1440 x 900, DPR 2.0, headless. Captures are fullPage: true for capture, element-tight for component.
node tools/docs-verify.mjs launch --dev — one shot.node tools/docs-verify.mjs close — always.launch fails or times out# Check the daemon log
cat tools/.docs-verify-daemon.log
# Common causes:
# - @playwright/test missing: run `npm install`
# - Chromium missing: run `npx playwright install chromium`
# - Port 3000 busy: kill the existing dev server, retry
# - `npm run start` broke: fix Docusaurus compile errors first
# Clean up and retry
node tools/docs-verify.mjs close
node tools/docs-verify.mjs launch --dev
capture fails with "selector not found" (component mode)header.hero, nav.navbar, footer.footer).component subcommand navigates to / before shooting. Use capture + a tight-crop manifest mask instead, or extend the tool to accept a route alongside a selector.If an interaction this tool doesn't support is needed (click, type, login, scroll-to-specific-anchor):
capture <route> <stem> --click '#button').