From workflow-skills
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
npx claudepluginhub arosenkranz/claude-code-config --plugin workflow-skillsThis skill uses the workspace's default tool permissions.
This skill ensures all code development follows TDD principles with comprehensive test coverage.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
This skill ensures all code development follows TDD principles with comprehensive test coverage.
If the project doesn't have a testing framework configured yet:
Detect project type and recommend framework:
Install and configure:
# JS/TS example with Vitest
pnpm add -D vitest @testing-library/react @testing-library/jest-dom
# Python example
pip install pytest pytest-asyncio pytest-cov
Create config files: vitest.config.ts or pytest.ini
Set coverage thresholds at 80% minimum
Add test scripts to package.json or pyproject.toml
See the tdd-example-walkthrough.md supporting file for a complete worked example.
ALWAYS write tests first, then implement code to make tests pass.
As a [role], I want to [action], so that [benefit]
Example:
As a user, I want to search for markets semantically,
so that I can find relevant markets even without exact keywords.
For each user journey, create comprehensive test cases:
describe('Semantic Search', () => {
it('returns relevant markets for query', async () => {
// Test implementation
})
it('handles empty query gracefully', async () => {
// Test edge case
})
it('falls back to substring search when Redis unavailable', async () => {
// Test fallback behavior
})
it('sorts results by similarity score', async () => {
// Test sorting logic
})
})
npm test
# Tests should fail - we haven't implemented yet
Write minimal code to make tests pass:
// Implementation guided by tests
export async function searchMarkets(query: string) {
// Implementation here
}
npm test
# Tests should now pass
Improve code quality while keeping tests green:
npm run test:coverage
# Verify 80%+ coverage achieved
import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'
describe('Button Component', () => {
it('renders with correct text', () => {
render(<Button>Click me</Button>)
expect(screen.getByText('Click me')).toBeInTheDocument()
})
it('calls onClick when clicked', () => {
const handleClick = jest.fn()
render(<Button onClick={handleClick}>Click</Button>)
fireEvent.click(screen.getByRole('button'))
expect(handleClick).toHaveBeenCalledTimes(1)
})
it('is disabled when disabled prop is true', () => {
render(<Button disabled>Click</Button>)
expect(screen.getByRole('button')).toBeDisabled()
})
})
import { NextRequest } from 'next/server'
import { GET } from './route'
describe('GET /api/markets', () => {
it('returns markets successfully', async () => {
const request = new NextRequest('http://localhost/api/markets')
const response = await GET(request)
const data = await response.json()
expect(response.status).toBe(200)
expect(data.success).toBe(true)
expect(Array.isArray(data.data)).toBe(true)
})
it('validates query parameters', async () => {
const request = new NextRequest('http://localhost/api/markets?limit=invalid')
const response = await GET(request)
expect(response.status).toBe(400)
})
it('handles database errors gracefully', async () => {
// Mock database failure
const request = new NextRequest('http://localhost/api/markets')
// Test error handling
})
})
# Test: user can search and filter markets
agent-browser open http://localhost:3000
agent-browser snapshot -i
agent-browser find text "Markets" click # Navigate to markets
agent-browser wait --load networkidle
agent-browser snapshot -i
# Search for markets
agent-browser find label "Search markets" fill "election"
agent-browser wait 600 # Debounce
agent-browser snapshot -i # Verify results appear
# Filter by status
agent-browser find text "Active" click
agent-browser snapshot -i # Verify filtered results
# Test: user can create a new market
agent-browser open http://localhost:3000/creator-dashboard
agent-browser snapshot -i
agent-browser find label "name" fill "Test Market"
agent-browser find label "description" fill "Test description"
agent-browser find label "endDate" fill "2025-12-31"
agent-browser find role button click --name "Submit"
agent-browser wait --text "Market created successfully"
agent-browser get url # Verify redirect to /markets/test-market
## Test File Organization
src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.test.tsx # Unit tests │ │ └── Button.stories.tsx # Storybook │ └── MarketCard/ │ ├── MarketCard.tsx │ └── MarketCard.test.tsx ├── app/ │ └── api/ │ └── markets/ │ ├── route.ts │ └── route.test.ts # Integration tests └── e2e/ ├── markets.spec.ts # E2E tests ├── trading.spec.ts └── auth.spec.ts
## Mocking External Services
### Supabase Mock
```typescript
jest.mock('@/lib/supabase', () => ({
supabase: {
from: jest.fn(() => ({
select: jest.fn(() => ({
eq: jest.fn(() => Promise.resolve({
data: [{ id: 1, name: 'Test Market' }],
error: null
}))
}))
}))
}
}))
jest.mock('@/lib/redis', () => ({
searchMarketsByVector: jest.fn(() => Promise.resolve([
{ slug: 'test-market', similarity_score: 0.95 }
])),
checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true }))
}))
jest.mock('@/lib/openai', () => ({
generateEmbedding: jest.fn(() => Promise.resolve(
new Array(1536).fill(0.1) // Mock 1536-dim embedding
))
}))
npm run test:coverage
{
"jest": {
"coverageThresholds": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
}
}
// Don't test internal state
expect(component.state.count).toBe(5)
// Test what users see
expect(screen.getByText('Count: 5')).toBeInTheDocument()
// Breaks easily
await page.click('.css-class-xyz')
// Resilient to changes
await page.click('button:has-text("Submit")')
await page.click('[data-testid="submit-button"]')
// Tests depend on each other
test('creates user', () => { /* ... */ })
test('updates same user', () => { /* depends on previous test */ })
// Each test sets up its own data
test('creates user', () => {
const user = createTestUser()
// Test logic
})
test('updates user', () => {
const user = createTestUser()
// Update logic
})
npm test -- --watch
# Tests run automatically on file changes
# Runs before every commit
npm test && npm run lint
# GitHub Actions
- name: Run Tests
run: npm test -- --coverage
- name: Upload Coverage
uses: codecov/codecov-action@v3
Remember: Tests are not optional. They are the safety net that enables confident refactoring, rapid development, and production reliability.