---

name: e2e-frontend-validation description: E2E validation workflow for frontend changes in playground packages using Playwright MCP model: claude-opus-4-5

E2E Validation for Frontend Modifications

Prerequisites

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

Copyclaude mcp add playwright -- npx @playwright/mcp@latest

Validation Steps

After completing frontend changes:

1. Build the CLI

Copypnpm build:cli

1. Start the dev server

Copycd examples/agent && node ../../packages/cli/dist/index.js dev

1. Verify server is running

   • URL: http://localhost:4111
   • Wait for the server to be ready before proceeding

2. Identify impacted routes

   • Routes are defined in packages/playground/src/App.tsx
   • Browse them ALL to verify behavior

3. 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