feat: add Playwright UI browser skill for Claude Code#4579
Open
robertsLando wants to merge 3 commits intomasterfrom
Open
feat: add Playwright UI browser skill for Claude Code#4579robertsLando wants to merge 3 commits intomasterfrom
robertsLando wants to merge 3 commits intomasterfrom
Conversation
Add browser screenshot automation so Claude Code can visually verify UI changes, attach screenshots to PRs, and update documentation images. - Add Playwright MCP server config (.mcp.json) for interactive browser control - Add screenshot skill with reusable template script - Supports dark mode, auth handling, configurable viewport - Includes route-to-screenshot mapping for documentation updates Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename .claude/skills/screenshot/ to .claude/skills/ui-browser/ and rewrite skill.md as a comprehensive UI browsing guide. Now covers: - Interactive browsing via Playwright MCP (navigation, inspection, interaction) - Full route reference with descriptions - App layout structure (nav drawer, app bar, content area) - Auth flow details with exact selectors - Common verification patterns (component edits, layout changes, dialogs) - Batch screenshot template (kept as sub-tool) - Troubleshooting guide Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
robertsLando
changed the title
- Rename skill.md to SKILL.md (required uppercase convention) - Add YAML frontmatter with name, description (third-person trigger phrases), and version fields - Rewrite body in imperative form instead of second person - Move route-to-doc mapping and troubleshooting to references/screenshots.md for progressive disclosure (keep SKILL.md lean, load details as needed) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.mcp.jsonwith Playwright MCP server for interactive headless browser control.claude/skills/ui-browser/skill.md— comprehensive guide for Claude to browse, inspect, and verify the UI:.claude/skills/ui-browser/screenshot-template.js— batch screenshot script with CLI args for URL, output path, viewport size, auto auth handling, and dark modeThis gives Claude Code the ability to independently verify UI changes after editing components, debug layout issues interactively, and capture screenshots for PRs and documentation.
Test plan
npm run fake-stick,npm run dev:server,npm run dev)node .claude/skills/ui-browser/screenshot-template.js "http://localhost:8092/#/settings" /tmp/screenshots/settings.png🤖 Generated with Claude Code