E2e Tests Studio
This generates Playwright E2E tests for the Claude playground's frontend, but it's opinionated about what you should actually test. It pushes you hard to validate product behavior (does selecting an LLM provider actually use that provider in requests?) rather than UI states (does the dropdown open?). The prompt includes a test pattern library with examples for configuration changes, data persistence, tool execution, and workflow chaining. It requires the Playwright MCP server and assumes you're working in packages/playground-ui or packages/playground. The mapping table from feature categories to test assertions is genuinely useful if you're the type who writes tests that just check if buttons render.
- skills.sh installs
- 2.5K
- GitHub stars
- 29.4K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add mastra-ai/mastra --skill e2e-tests-studio --agent claude-codeInstalls into .claude/skills of the current project.
Files
E2E Behavior Validation for Frontend Modifications
Core Principle: Test Product Behavior, Not UI States
CRITICAL: Tests must verify that product features WORK correctly, not just that UI elements render.
What NOT to test (UI States):
- ❌ "Dropdown opens when clicked"
- ❌ "Modal appears after button click"
- ❌ "Loading spinner shows during request"
- ❌ "Form fields are visible"
- ❌ "Sidebar collapses"
What TO test (Product Behavior):
- ✅ "Selecting an LLM provider configures the agent to use that provider"
- ✅ "Creating a new agent persists it and shows in the agents list"
- ✅ "Running a tool with parameters returns the expected output"
- ✅ "Chat messages stream correctly and maintain conversation context"
- ✅ "Workflow execution triggers tools in the correct order"
BDD Structure (REQUIRED)
Every E2E spec MUST follow the same BDD shape as the MSW tests. In packages/playground, e2e-bdd/test-needs-when-describe enforces this shape.
The structure has exactly three levels:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/mastra-ai/mastra
- Categories
- Frontend Development, Testing & QA, Code Review & Quality, Debugging
- First seen
- May 16, 2026
More from mastra-ai/mastra
All 6Recommended
More Frontend Development
update-docsvercel/next.jsGuided workflow for updating Next.js documentation based on code changes and PR reviews.2.4Kskills.sh installs
nuqspproenca/dot-skillsnuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code t2.4Kskills.sh installs
tailwindcss-animationsjosiahsiegel/claude-plugin-marketplaceTailwind CSS animations and transitions including built-in utilities and custom keyframes. PROACTIVELY activate for: (1) animate-* utilities (spin, ping, pulse,2.4Kskills.sh installs
r3f-fundamentalsenzed/r3f-skillsReact Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling t2.3Kskills.sh installs
interface-kitjuliusbrussee/skillsAuthoritative guide for implementing stunning, accessible, performant UI. Synthesizes design engineering philosophy, accessibility standards, animation principl2.3Kskills.sh installs
gsap-frameworksnexu-io/open-designOfficial GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue2.2Kskills.sh installs