frontend-testing

This skill enables Claude to generate high-quality, comprehensive frontend tests following established conventions and best practices. ## When to Apply This Skill Apply this skill when the user: - Asks to **write tests** for a component, hook, or utility - Asks to **review existing tests** for completeness - Mentions **Vitest**, **React Testing Library**, **RTL**, or **spec files** - Requests **test coverage** improvement - Mentions **testing**, **unit tests**, or **integration tests** for frontend code - Wants to understand **testing patterns** in the frontend codebase **Do NOT apply** when: - User is asking about E2E tests (Playwright) - User is only asking conceptual questions without code context ## Quick Reference ### Tech Stack | Tool | Version | Purpose | | --------------------- | ------- | ----------------- | | Vitest | 4+ | Test runner | | React Testing Library | 16+ | Component testing | | jsdom | - | Test environment | | TypeScript | 5+ | Type safety | Note: keep this list up to date with the project's dependencies. ### Key Commands **Always prefer running specific tests over the entire suite** for faster feedback: ```bash # Run ALL tests (avoid during development) npx vitest run # ✅ PREFERRED: Run specific file npx vitest run src/components/Button.spec.tsx # ✅ PREFERRED: Run tests matching a pattern npx vitest run --grep "Button" npx vitest run -t "s...