菜单
UX testing: Playwright E2E, axe-core a11y, visual regression. Use when setting up E2E testing, screenshot assertions, browser automation, or a11y CI workflows.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/laurigates/claude-plugins --skill configure-ux-testing命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| created | "2025-12-16T00:00:00.000Z" |
| modified | "2026-06-18T00:00:00.000Z" |
| reviewed | "2026-06-10T00:00:00.000Z" |
| description | UX testing: Playwright E2E, axe-core a11y, visual regression. Use when setting up E2E testing, screenshot assertions, browser automation, or a11y CI workflows. |
| allowed-tools | Glob, Grep, Read, Write, Edit, Bash, AskUserQuestion, TodoWrite, WebSearch, WebFetch |
| args | [--check-only] [--fix] [--a11y] [--visual] |
| argument-hint | [--check-only] [--fix] [--a11y] [--visual] |
| name | configure-ux-testing |
Check and configure UX testing infrastructure with Playwright as the primary tool for E2E, accessibility, and visual regression testing.
| Use this skill when... | Use another approach when... |
|---|---|
| Setting up Playwright E2E testing infrastructure for a project | Running existing Playwright tests (use bun test:e2e or test-runner agent) |
| Adding accessibility testing with axe-core to a project | Performing manual accessibility audits on a live site |
| Configuring visual regression testing with screenshot assertions | Debugging a specific failing E2E test (use system-debugging agent) |
| Setting up Playwright CLI or MCP for Claude browser automation | Writing individual test cases (use playwright-testing skill) |
| Creating CI/CD workflows for E2E and accessibility test execution | Configuring unit or integration tests (use /configure:tests) |
find . -maxdepth 1 \( -name 'package.json' -o -name 'bun.lockb' \)find . -maxdepth 1 -name 'playwright.config.*'find . -maxdepth 1 -name 'package.json' -exec grep -l '@playwright/test' {} +find . -maxdepth 1 -name 'package.json' -exec grep -l '@axe-core/playwright' {} +find . -maxdepth 2 -type d \( -name 'e2e' -o -name 'tests' \)find . -maxdepth 4 -type d -name '__snapshots__'find . -maxdepth 1 -name '.mcp.json'find . -path '*/.github/workflows/*' -maxdepth 3 -name 'e2e*'UX Testing Stack:
Parse from command arguments:
--check-only: Report status without offering fixes--fix: Apply all fixes automatically without prompting--a11y: Focus on accessibility testing configuration--visual: Focus on visual regression testing configurationExecute this UX testing configuration check:
Verify latest versions before configuring:
Use WebSearch or WebFetch to verify current versions.
Run the detection script to scan the project for Playwright / axe-core signals
(package.json deps + config globs), the e2e dir / __snapshots__ / e2e workflow,
and the playwright MCP-server entry:
bash "${CLAUDE_SKILL_DIR}/scripts/configure-ux-testing.sh" --home-dir "$HOME" --project-dir "$(pwd)"
Parse STATUS= and the ISSUES: block from the output. The KEY=VALUE lines
report PLAYWRIGHT_CONFIG, PLAYWRIGHT_DEP, AXE_CORE_DEP, E2E_DIR,
VISUAL_SNAPSHOTS, E2E_WORKFLOW, PLAYWRIGHT_MCP, and the rollup
PLAYWRIGHT_DETECTED / UX_SIGNALS_PRESENT.
Print a formatted compliance report showing status for Playwright core, accessibility testing, visual regression, and MCP integration.
If --check-only is set, stop here.
For the compliance report format, see REFERENCE.md.
# Core Playwright
bun add --dev @playwright/test
# Accessibility testing
bun add --dev @axe-core/playwright
# Install browsers
bunx playwright install
Create playwright.config.ts with:
For the complete playwright.config.ts template, see REFERENCE.md.
Create tests/e2e/helpers/a11y.ts with:
expectNoA11yViolations(page, options) - Assert no WCAG violationsgetA11yReport(page, options) - Generate detailed a11y reportFor the complete a11y helper code, see REFERENCE.md.
Create example tests:
tests/e2e/homepage.a11y.spec.ts - Homepage accessibility tests (WCAG 2.1 AA violations, post-interaction checks, full report)tests/e2e/visual.spec.ts - Visual regression tests (full page screenshots, component screenshots, responsive layouts, dark mode)For complete example test files, see REFERENCE.md.
Update package.json with test scripts:
{
"scripts": {
"test:e2e": "playwright test",
"test:e2e:headed": "playwright test --headed",
"test:e2e:debug": "playwright test --debug",
"test:e2e:ui": "playwright test --ui",
"test:a11y": "playwright test --project=a11y",
"test:visual": "playwright test visual.spec.ts",
"test:visual:update": "playwright test visual.spec.ts --update-snapshots",
"playwright:codegen": "playwright codegen http://localhost:3000",
"playwright:report": "playwright show-report"
}
}
Choose the appropriate browser automation approach based on the agent's environment:
Option A: Playwright CLI (preferred when shell access is available)
Playwright CLI (@playwright/cli) is 4-10x more token-efficient than MCP for AI agent browser automation (~27K vs ~114K tokens per task). Snapshots and screenshots are saved to disk instead of injected into context.
# Global install
npm install -g @playwright/cli@latest
# Or project-local
bun add --dev @playwright/cli
This enables Claude to navigate pages, take screenshots, fill forms, click elements, and capture page snapshots via CLI commands. See the playwright-cli skill for command reference.
Option B: Playwright MCP (for sandboxed environments without shell access)
Use MCP when running in environments without shell access (Claude Desktop, browser-based agents):
{
"mcpServers": {
"playwright": {
"command": "bunx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
Create .github/workflows/e2e.yml with parallel jobs for:
For the complete CI workflow template, see REFERENCE.md.
Update .project-standards.yaml:
components:
ux_testing: "2025.1"
ux_testing_framework: "playwright"
ux_testing_a11y: true
ux_testing_a11y_level: "wcag21aa"
ux_testing_visual: true
ux_testing_cli: true
ux_testing_mcp: false
Print a summary of configuration applied, scripts added, and CI/CD setup. Include next steps for starting the dev server, running tests, updating snapshots, and opening the interactive UI.
For the results report format, see REFERENCE.md.
| Context | Command |
|---|---|
| Quick compliance check | /configure:ux-testing --check-only |
| Auto-fix all issues | /configure:ux-testing --fix |
| Accessibility focus only | /configure:ux-testing --a11y |
| Visual regression focus only | /configure:ux-testing --visual |
| Run E2E tests compact | bunx playwright test --reporter=line |
| Run a11y tests only | bunx playwright test --project=a11y --reporter=dot |
| Flag | Description |
|---|---|
--check-only | Report status without offering fixes |
--fix | Apply all fixes automatically without prompting |
--a11y | Focus on accessibility testing configuration |
--visual | Focus on visual regression testing configuration |
bunx playwright install/configure:tests - Unit and integration testing configuration/configure:all - Run all compliance checksplaywright-testing, playwright-cli, accessibility-implementationux-implementation for implementing UX designsInstall, configure and troubleshoot MCP servers. Use when adding/enabling servers, editing .mcp.json, fixing OAuth, or when a server runs stale code after an upstream fix.
FinOps snapshot — org billing, workflow stats, cache usage. Use when you want a high-level view of CI spending or workflow health before diving deeper.
GitHub Actions billing, workflow efficiency, and waste analysis at org or repo level. Use when investigating CI/CD costs, wasted runs, or optimizing triggers.