Agent skill
e2e-frontend-validation
E2E validation workflow for frontend changes in playground packages using Playwright MCP
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/e2e-frontend-validation
SKILL.md
E2E Validation for Frontend Modifications
Prerequisites
Requires Playwright MCP server. If the browser_navigate tool is unavailable, instruct the user to add it:
claude mcp add playwright -- npx @playwright/mcp@latest
Validation Steps
After completing frontend changes:
- Build the CLI
pnpm build:cli
- Start the dev server
cd examples/agent && node ../../packages/cli/dist/index.js dev
-
Verify server is running
- URL: http://localhost:4111
- Wait for the server to be ready before proceeding
-
Identify impacted routes
- Routes are defined in
packages/playground/src/App.tsx - Browse them ALL to verify behavior
- Routes are defined in
-
Test with Playwright MCP
- Use
browser_navigateto visit each impacted route - Visually verify the changes render correctly
- Test any interactive elements modified
- Use
browser_screenshotto capture results for the user
- Use
Quick Reference
| Step | Command/Action |
|---|---|
| Build | pnpm build:cli |
| Start | cd examples/agent && node ../../packages/cli/dist/index.js dev |
| App URL | http://localhost:4111 |
| Routes | @packages/playground/src/App.tsx |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?