skillby mastra-ai
e2e-frontend-validation
E2E validation workflow for frontend changes in playground packages using Playwright MCP
Installs: 0
Used in: 1 repos
Updated: 1mo ago
$
npx ai-builder add skill mastra-ai/e2e-frontend-validationInstalls to .claude/skills/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` |
Quick Install
$
npx ai-builder add skill mastra-ai/e2e-frontend-validationDetails
- Type
- skill
- Author
- mastra-ai
- Slug
- mastra-ai/e2e-frontend-validation
- Created
- 1mo ago