From saurun
Use when implementing React + Vite + TypeScript features or bugfixes with Vitest + React Testing Library tests, before writing implementation code.
npx claudepluginhub fiatkongen/saurun-marketplace --plugin saurunThis skill uses the workspace's default tool permissions.
Mandatory TDD constraints for all React code. Violations must be fixed before committing.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Mandatory TDD constraints for all React code. Violations must be fixed before committing.
1. NO IMPLEMENTATION CODE WITHOUT A FAILING TEST FIRST
2. NEVER add test-only methods/props to production components
3. MOCK API BOUNDARIES ONLY (MSW) — never domain logic
4. COMMIT after each green cycle
Write code before test? Delete it. git checkout . — not stash, not "reference."
| Step | Action | Verify |
|---|---|---|
| RED | Write one failing test | Fails for expected reason (missing component, not typo) |
| GREEN | Write minimal code to pass | This test + all others pass |
| REFACTOR | Clean up, no new behavior | All tests still green |
| COMMIT | After each green cycle | git commit with passing tests |
Mock API boundaries with MSW. NEVER mock domain logic or React internals.
| OK to mock | NEVER mock |
|---|---|
HTTP endpoints (MSW http.get, http.post) | Zustand stores |
window.location, navigator.*, timers | React components |
IntersectionObserver, ResizeObserver | Custom hooks |
| Utility functions |
// OK: MSW for API boundary
server.use(http.get('/api/products/:id', () => HttpResponse.json({ id: '1', name: 'Widget' })))
// VIOLATION
vi.mock('../stores/useCartStore') // Never mock stores
vi.mock('./CartItem') // Never mock components
vi.mock on a store, component, or hook is always a violation.
Test behavior, not structure. Ask: "If this test didn't exist, what bug could ship?"
Priority:
NEVER test: className assertions, "renders without crashing", prop types, store getter values, hook return shapes.
it('should [behavior] when [condition]') — "and" in name = split into two testsit.each for parameterized cases.expect().import { beforeAll, afterEach, afterAll } from 'vitest'
import { server } from './mocks/server'
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())
Use real stores. Reset in beforeEach. Never mock.
beforeEach(() => {
useCartStore.getState().reset() // Use store's reset action
})
vi.mock on Zustand store is a violation. useStore.setState() to set values then asserting those same values is a violation — test through component interaction instead.
| Anti-Pattern | What it looks like | Fix |
|---|---|---|
| StoreMock | vi.mock('../stores/useXStore') | Use real store, reset in beforeEach |
| ClassNameTest | expect(el).toHaveClass('bg-red-500') | Test visible behavior, not CSS |
| Assertionless | it('renders', () => { render(<X />) }) | Add expect() on visible content |
| MockVerifyOnly | Only assertion is toHaveBeenCalled | Assert on real UI outcome |
| DirectSetState | setState(x) then expect(getState().x) | Test through component interaction |
| ProviderDuplicate | Provider wrapping copy-pasted per test | Use shared custom render |
should [x] when [y].vi.mock on stores, components, or hooksit.each