Frontend Test Pattern Skill
Description
Claude Code skill for React + Vite projects — auto-generates Vitest & Testing Library tests for utils, components, hooks, and Zustand stores. Companion to python-test-pattern.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
frontend-test-pattern
A skill for generating high-quality tests in React + Vite projects using Vitest + @testing-library/react.
Coverage
| Test type | Framework | Pattern file |
|---|---|---|
| Pure functions / utilities | Vitest | patterns/pure_function_test.md |
| React components | Vitest + @testing-library/react | patterns/component_test.md |
| Custom hooks | Vitest + renderHook | patterns/hook_test.md |
| Zustand stores | Vitest | patterns/store_test.md |
| API mocking | vi.mock / msw | patterns/api_mock.md |
| Heavy page components | Factory + Capture pattern | patterns/page_test.md |
| E2E (optional) | Playwright | patterns/e2e_playwright.md |
Install
bash install.shUsage
In Claude Code, this skill activates automatically when you need to write tests for a React/Vite project.
You can also say: "Write tests for utils.ts" or "Set up Vitest for this project".
Related Skills
Spec Kit
💫 Toolkit to help you get started with Spec-Driven Development
Webapp Testing
Test local web applications using Playwright for UI verification and debugging
#29
, [#52](https://github.com/affaan-m/everything-claude-code/issues/52), [#103](https://github.com/affaan-m/ever
Fix Issue
by metabase - Addresses GitHub issues by taking issue number as parameter, analyzing context, implementing sol
Pypict Test Design
Design comprehensive test cases using PICT (Pairwise Independent Combinatorial Testing) for optimized test sui
gstack
| 15,000+ | Garry Tan's exact Claude Code setup: 6 opinionated tools that serve as CEO, Eng Manager, Release M
