mcp-playwright
MCP Skill: Playwright MCP (UI Verification)
Scope
Use the MCP server configured as microsoft/playwright-mcp in .vscode/mcp.json to run browser automation tasks (navigation, screenshots, DOM checks) during debugging and validation.
Preconditions
- Ensure
.vscode/mcp.jsoncontainsmicrosoft/playwright-mcp. - Ensure the app is running (typically
pnpm run start) if you are testing locally.
Operating Rules
- Prefer resilient selectors:
data-testid, ARIA roles/labels. - Avoid brittle CSS selectors and deep DOM coupling.
- Capture evidence for regressions: screenshots + console errors.
Typical Workflows
- Smoke check a route
- Navigate to a URL and assert primary heading/landmark is visible.
- Regression capture
More from neversight/skills_feed
ai-image-generation
|
7react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
7ui-designer
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
7python-env
Fast Python environment management with uv (10-100x faster than pip). Triggers on: uv, venv, pip, pyproject, python environment, install package, dependencies.
7typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
6ai-marketing-videos
|
6