All skills
Skillintermediate
New Feature Workflow
Develop new features with test-first approach.
Claude Code Knowledge Pack7/10/2026
Overview
New Feature Workflow
Develop new features with test-first approach.
Agents Used
test-writer- Write tests first (TDD)code-fixer- Implement the featuretest-runner- Verify tests passbrowser-qa-agent- Visual verification
Trigger
- Manual: When starting a new feature
Execution
claude "Run new-feature workflow for [FEATURE]:
1. test-writer: Create tests for expected behavior
2. code-fixer: Implement feature to pass tests
3. test-runner: Verify all tests pass
4. browser-qa-agent: Test in browser (if UI feature)
Feature specification:
[Describe the feature requirements]"
Agent Chain
┌─────────────────────────────────────────────────┐
│ 1. test-writer │
│ - Analyze feature requirements │
│ - Write failing tests first │
│ - Cover happy path + edge cases │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 2. code-fixer │
│ - Implement feature │
│ - Follow existing patterns │
│ - Make tests pass │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 3. test-runner │
│ - Run all tests │
│ - Verify new tests pass │
│ - Check no regressions │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 4. browser-qa-agent (if UI) │
│ - Navigate to feature │
│ - Test interactions │
│ - Check for console errors │
└─────────────────────────────────────────────────┘
Example Usage
API Feature
claude "Run new-feature workflow:
Feature: User profile update endpoint
- PUT /api/users/:id
- Allow updating: name, email, avatar
- Require authentication
- Validate email format
- Return updated user
Use test-first approach."
UI Feature
claude "Run new-feature workflow:
Feature: Dark mode toggle
- Add toggle to settings page
- Persist preference to localStorage
- Apply theme immediately
- Support system preference
Start with component tests, then implement."
Expected Output
Phase 1: test-writer
Created tests:
- src/api/users/[id].test.ts
- should return 401 without auth
- should return 404 for non-existent user
- should update name successfully
- should validate email format
- should return updated user
Phase 2: code-fixer
Implemented:
- src/api/users/[id]/route.ts (new)
- src/lib/validation.ts (updated)
Phase 3: test-runner
Tests: 5 passed, 0 failed
Coverage: 95%
Phase 4: browser-qa-agent
Browser tests:
- [x] Profile page loads
- [x] Edit form displays
- [x] Save updates correctly
- [x] No console errors
Best Practices
- Clear requirements - Be specific about expected behavior
- Test first - Let test-writer define the contract
- Small increments - One feature at a time
- Verify visually - Always check in browser for UI
- Check coverage - Ensure new code is tested
Skip browser-qa for
- Pure API features (no UI)
- Library/utility code
- Database migrations
- Background jobs