Learn-skills.dev mcp-playwright

Use the Playwright MCP server (@playwright/mcp) for browser-driven verification, screenshots, console logs, and UI flow validation; use when debugging or validating Angular UI behavior beyond unit tests.

install

source · Clone the upstream repo

git clone https://github.com/NeverSight/learn-skills.dev

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/7spade/black-tortoise/mcp-playwright" ~/.claude/skills/neversight-learn-skills-dev-mcp-playwright && rm -rf "$T"

manifest: data/skills-md/7spade/black-tortoise/mcp-playwright/SKILL.md

source content

MCP Skill: Playwright MCP (UI Verification)

Scope

Use the MCP server configured as

microsoft/playwright-mcp

.vscode/mcp.json

to run browser automation tasks (navigation, screenshots, DOM checks) during debugging and validation.

Preconditions

Ensure

.vscode/mcp.json

contains

microsoft/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

Take before/after screenshots for a single screen change.

Console hygiene

Collect browser console errors/warnings for a page.

Accessibility spot-check

Verify keyboard focus order for critical controls.

Prompt Templates

"Open <url> and verify <expected UI>. Collect console errors and take a full-page screenshot."
"Run a quick flow: <steps>. Use role-based selectors and fail fast with screenshots on error."

Related Repo Guidance

See
```
.github/skills/e2e-playwright
```
for test organization and selector rules.