# E2e Frontend Validation

> E2E validation workflow for frontend changes in playground packages using Playwright MCP

- Skill: `majiayu000/e2e-frontend-validation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/e2e-frontend-validation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/e2e-frontend-validation/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/e2e-frontend-validation

---


# E2E Validation for Frontend Modifications

## Prerequisites

Requires Playwright MCP server. If the `browser_navigate` tool is unavailable, instruct the user to add it:

```sh
claude mcp add playwright -- npx @playwright/mcp@latest
```

## Validation Steps

After completing frontend changes:

1. **Build the CLI**

```sh
pnpm build:cli
```

2. **Start the dev server**

```sh
cd examples/agent && node ../../packages/cli/dist/index.js dev
```

3. **Verify server is running**
   - URL: http://localhost:4111
   - Wait for the server to be ready before proceeding

4. **Identify impacted routes**
   - Routes are defined in `packages/playground/src/App.tsx`
   - Browse them ALL to verify behavior

5. **Test with Playwright MCP**
   - Use `browser_navigate` to visit each impacted route
   - Visually verify the changes render correctly
   - Test any interactive elements modified
   - Use `browser_screenshot` to capture results for the user

## 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`                               |