Menú
Provides comprehensive testing strategies and patterns for React applications. This skill should be used when writing tests, setting up testing infrastructure, or deciding what to test.
Patterns for auditing and improving erify_api query performance and response efficiency. Use when detecting N+1 queries, reducing over-fetching, designing lean select/include strategies, replacing in-memory joins with DB aggregations, adding pagination guards, or defining API performance baselines before scaling. Complements database-patterns which covers the basic N+1 and Promise.all rules.
Frontend data compatibility and fallback patterns for API contract migrations. Use when building UI that must handle both old and new API response shapes during a cutover, or when centralizing field-access helpers for dual-field responses.
Enforces repo-aligned engineering best practices for review and refactoring. This skill should be used when auditing or refactoring code across eridu-services with priority on local architecture/context, then official framework docs, then principles such as SOLID.
Enforces the Zod-based environment configuration pattern. Use this skill when reading, adding, or modifying environment variables (e.g., process.env or import.meta.env). Outlines how to define a central Zod schema, infer strict types, enforce defaults, and gracefully crash on missing required keys.
Provides patterns for structuring the API layer in React applications. This skill should be used when setting up API clients, defining API request declarations, or integrating with TanStack Query for data fetching.
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
| name | frontend-testing-patterns |
| description | Provides comprehensive testing strategies and patterns for React applications. This skill should be used when writing tests, setting up testing infrastructure, or deciding what to test. |
Testing patterns for React applications. Test runner: Vitest (not Jest).
See references/testing-examples.md for detailed code examples.
E2E Tests (Few) ← Playwright
Integration Tests (Some) ← React Testing Library
Unit Tests (Many) ← Vitest
screen queries (not destructured getBy*)userEvent for interactions (not fireEvent)waitFor/findBy* for async operationssetupServer)QueryClientProvider via createWrapper()| ✅ Test | ❌ Skip |
|---|---|
| User interactions | Implementation details |
| Conditional rendering (loading/error/empty) | Third-party internals |
| Accessibility (ARIA, keyboard) | Styling |
| Hook + context integration | Trivial code |
| Edge cases and errors | |
| Route search-param behavior |
When decomposing a large route component, verify:
renderHook with proper wrappersuserEvent for interactions