hanson-hex

Frontend Test Pattern Skill — Testing skill for Claude Code

Testing community

Claude Code skill for React + Vite projects — auto-generates Vitest & Testing Library tests for utils, components, hooks, and Zustand stores.

How to install Frontend Test Pattern Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open hanson-hex/frontend-test-pattern-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Frontend Test Pattern Skill does

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.

Alternatives in Testing

Langgraphjs — by langchain-ai - Offers comprehensive build and test commands with detailed TypeScript style guidelines, laye 2.7k ★
Claude Codepro — by Max Ritter - Professional development environment for Claude Code with spec-driven workflow, TDD enforcemen 1.6k ★
Integration Test — Test elixir plugin post-edit hooks by walking through fixture projects in test/integration/fixtures/ 174 ★

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`