SkillHub ClubShip Full StackFull StackFrontendTesting

e2e-frontend-validation

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

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

22,125

Hot score

Updated

March 20, 2026

Overall rating

C5.0

Composite score

5.0

Best-practice grade

B81.2

Install command

npx @skill-hub/cli install mastra-ai-mastra-e2e-frontend-validation

Repository

mastra-ai/mastra

Skill path: .claude/skills/e2e-frontend-validation

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

Open repository

Best for

Primary workflow: Ship Full Stack.

Technical facets: Full Stack, Frontend, Testing, Integration.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: mastra-ai.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install e2e-frontend-validation into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/mastra-ai/mastra before adding e2e-frontend-validation to shared team environments
Use e2e-frontend-validation for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
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:

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