Menü
Capture local dev-server screenshots with Playwright for Beans preview workflows, especially for `/beans/` routes and visual verification of new pages or content edits.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | playwright-preview |
| description | Capture local dev-server screenshots with Playwright for Beans preview workflows, especially for `/beans/` routes and visual verification of new pages or content edits. |
Use this skill when you need a headless browser preview of a running Beans page.
npm install
node_modules/.bin/playwright install --with-deps chromium
npm run dev
node dev/playwright/screenshot.mjs \
"http://localhost:4321/beans/log/2026-02-05-bean1/" \
"dev/playwright/preview.png" \
--full-page
http://localhost:<port> URLs so Playwright can reach the dev server.--full-page for long entries and --wait=500 when the page needs a short settle.npm run dev-local is used, switch the URL to port 4322./beans/ routes in previews so screenshots match the deployed base path.If needed, start the Playwright MCP server:
npx -y @playwright/mcp@latest --port 5173 --viewport-size 1440x900 --caps vision
The MCP endpoint is http://localhost:5173/mcp with SSE at /sse.
Create or update a bean entry from handwritten scans while preserving line breaks, handling CompanionComment formatting correctly, maintaining spans, and avoiding low-value boilerplate transcription.
Create a new bean entry with the correct file shape, public identifier, frontmatter, imported images, and Beans-specific markdown conventions.
Close out a Beans work session cleanly by validating work, finishing Beads-managed tasks correctly, landing on main, and pruning closed worktrees.
Capture local dev-server screenshots with Playwright for Beans preview workflows, especially for `/beans/` routes and visual verification of new pages or content edits.
Use when adding, changing, or reorganizing AI guidance in this repository. Prefer Rulesync skills over commands, subagents, or hooks for reusable workflows, and always edit Rulesync sources before generating tool-specific AI config files.
Generates and syncs AI rule configuration files (.cursorrules, CLAUDE.md, copilot-instructions.md) across 20+ coding tools from a single source. Use when syncing AI rules, running rulesync commands, importing or generating rule files, or managing shared AI coding configurations.