frontend-testing-best-practices
π―Skillfrom sergiodxa/agent-skills
|Frontend testing best practices skills emphasizing E2E tests over unit tests, minimal mocking, and testing user behavior rather than implementation details.
Overview
A Claude Code skill that establishes testing best practices for frontend applications, strongly favoring end-to-end tests over unit tests. It provides six focused rules covering E2E test preference, minimal mocking, behavior-based testing, and proper test structure, all aimed at producing tests that give real confidence in application quality.
Key Features
- E2E-First Strategy - Default to end-to-end tests for all user-facing functionality; only write unit tests for pure functions with no dependencies
- Minimal Mocking Rule - If a test needs more than three mocks, it should be rewritten as an E2E test instead
- Behavior Over Implementation - Test what users see and do rather than internal component details, avoiding brittle tests that break during refactoring
- Anti-Component-Test Stance - Explicitly discourages unit testing React components, recommending E2E tests that cover components naturally through real user flows
- Structured E2E Patterns - Provides concrete Playwright test examples with proper test structure, including setup utilities like createTestingAccount and MSW for simple mock scenarios
Who is this for?
This skill is designed for frontend development teams that want to shift their testing strategy toward high-confidence E2E tests and away from fragile unit tests. It is especially valuable for teams using React and Playwright who want clear, opinionated guidelines on when to use each test type and how to structure their test suites for maximum reliability.
Same repository
sergiodxa/agent-skills(11 items)
Installation
npx vibeindex add sergiodxa/agent-skills --skill frontend-testing-best-practicesnpx skills add sergiodxa/agent-skills --skill frontend-testing-best-practices~/.claude/skills/frontend-testing-best-practices/SKILL.mdSKILL.md
More from this repository10
Performs comprehensive security audits on web applications and REST APIs, systematically checking for OWASP Top 10 vulnerabilities across authentication, data protection, and input security domains.
React performance optimization skill with 33 rules across 6 categories, covering bundle size optimization (avoiding barrel imports, conditional loading, preloading), re-render reduction with functional setState, and component composition patterns.
Tailwind CSS styling patterns and conventions skill with 10 rules covering custom stack utilities (v-stack, h-stack, z-stack), gap-based spacing over margins, responsive layout direction switching, color schemes, and className merging.
Accessibility best practices skill for React applications following WCAG standards, with 7 rules covering semantic HTML landmarks, screen reader support (sr-only, aria-live regions), keyboard navigation, and user preferences for building inclusive UIs.
Optimizes React Router performance by providing best practices for data loading, route organization, and efficient routing patterns.
Frontend testing best practices skills emphasizing E2E tests over unit tests, minimal mocking, and testing user behavior rather than implementation details.
Async/await optimization skill with 5 rules focused on eliminating request waterfalls and maximizing parallelism using Promise.all(), deferred awaits, and proper dependency chaining for Remix loaders, actions, and data fetching logic.
Enables seamless internationalization in React Router apps by configuring locale detection, resource management, and language switching with remix-i18next.
AI agent skill writing best practices skill with 6 rules covering directory structure, content patterns, and writing style for creating effective skills that capture coding conventions
A Ruby on Rails best practices skill following Basecamp conventions for models, controllers, jobs, and concerns in Rails applications.