Agent skill
feature
Execute a complete feature development workflow for wouterwisse.com using Opus subagents.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/feature-wouterwisse-wouterwisse-com
SKILL.md
Feature Skill - Orchestrator
Orchestrator ONLY spawns Opus subagents and collects summaries. ALL work is delegated.
Critical Rules
- NEVER read files - subagents read files
- NEVER run commands - subagents run commands
- NEVER create commits - subagents create commits
- Orchestrator only: spawns agents, tracks todos, reports summaries
- Always use Opus model for ALL Task agents (
model: "opus")
Phase 0: Setup Subagent
Spawn a single subagent to understand the user story and set up branches:
Task(general-purpose, model: opus):
Parse user story and set up feature branch.
---
## Tasks
1. **Parse User Story**:
- Extract title and description
- Identify affected areas (pages, components, styling, scripts)
- List acceptance criteria
2. **Validate Story**:
- Is it implementable? (clear, specific, no conflicts)
- What areas are affected?
- Any new dependencies needed?
3. **Create Feature Branch**:
```bash
git checkout main && git pull && git checkout -b feature/<name>
Output Format
---
STORY_VALID: true | false
QUESTIONS_IF_INVALID: []
USER_STORY:
title: "[task name]"
description: "[full description]"
acceptance_criteria: [list]
AFFECTED_AREAS:
- pages: [list of routes]
- components: [list of components]
- styles: [styling changes needed]
- scripts: [generation scripts affected]
BRANCH_NAME: feature/<name>
---
**If STORY_VALID: false** → Ask user for clarification before proceeding.
---
## Phase 1: Research Subagents (Parallel)
Spawn parallel research subagents:
Task(Explore, model: opus, run_in_background: true): Research existing patterns in src/app/ for [feature].
Find:
- Similar pages and their patterns
- Existing components that might be reused
- How similar features handle state, animations, loading
Output only the relevant findings as a summary.
Task(Explore, model: opus, run_in_background: true): Research src/components/ for reusable UI components.
Find:
- Components matching the feature needs
- Common patterns for layout, interactions
- Tailwind CSS patterns used
- Framer Motion animation patterns
Output only the relevant findings as a summary.
Task(Explore, model: opus, run_in_background: true): Research src/config/ and src/hooks/ for configuration and utilities.
Find:
- Relevant configuration files
- Custom hooks that might be useful
- Theme and styling patterns
Output only the relevant findings as a summary.
Wait for all research subagents with TaskOutput. Synthesize findings for planning.
---
## Phase 2: Planning Subagent
Spawn planning subagent with research results:
Task(Plan, model: opus):
Create implementation plan for user story.
Context
USER_STORY: [from Phase 0] RESEARCH_FINDINGS: [synthesis from Phase 1] AFFECTED_AREAS: [list]
Requirements
- Write plan to: .claude/plans/.plan.md
- Order steps: config → components → pages → styling
- Mark each step with tdd: true | false
- Include dependencies between steps
- Be specific about files to create/modify
Output Format
---
PLAN_FILE: .claude/plans/<name>.plan.md
STEPS_COUNT: X
STEP_SUMMARY:
- id: config-1
content: "Add configuration for new feature"
tdd: false
- id: component-1
content: "Create FeatureCard component"
tdd: false
- id: page-1
content: "Create feature page route"
tdd: false
---
---
## Phase 3: Review Subagent
Spawn review subagent to validate plan:
Task(general-purpose, model: opus):
Review implementation plan for completeness and correctness.
Tasks
-
Read: .claude/plans/.plan.md
-
Validate:
- Complete coverage of user story requirements
- Correct order (config → components → pages)
- Dependencies are accurate
- TDD marking is correct (logic = true, UI = false)
-
If issues found: FIX THEM directly in the plan file
Output Format
---
REVIEW_RESULT: APPROVED | NEEDS_REVISION
CHANGES_MADE: [list of changes, if any]
---
---
## Phase 4: Implementation Subagents
Execute plan steps by invoking `/task` skill. Analyze dependencies for wave-based execution:
Wave 1: Steps with no dependencies (parallel) Wave 2: Steps depending only on Wave 1 (parallel) Wave 3: Steps depending on Wave 2 (parallel) ...
For EACH step, spawn subagent that invokes `/task`:
Task(general-purpose, model: opus):
Execute implementation step by invoking /task skill.
Step Details
STEP_ID: [from plan] CONTENT: [step description from plan] TDD: [true | false from plan]
Workflow
-
Invoke the /task skill:
Skill(task)Pass these details to /task:
- TASK: [CONTENT from step details]
- Note: /task will handle TDD, quality checks, and commit
-
After /task completes, return the result.
Output Format
---
STEP_ID: [id]
STATUS: SUCCESS | FAILURE
COMMIT: [short hash from /task]
FILES_CHANGED: [list from /task]
BUILD: PASSED | FAILED
LINT: PASSED | FAILED
TESTS: PASSED | FAILED | SKIPPED
ERRORS: [if FAILURE]
---
**Spawn wave steps in parallel** (single message with multiple Task calls).
Wait for wave completion before starting next wave.
---
## Phase 5: Verification Subagents (Parallel)
Spawn parallel verification subagents:
Task(general-purpose, model: opus, run_in_background: true):
Verify code quality and patterns.
Checks
-
TypeScript strict compliance: npx tsc --noEmit
-
Lint compliance: npm run lint
-
No forbidden patterns: grep -rn 'console.log|TODO|FIXME' --include='.ts' --include='.tsx' src/
Output Format
---
STATUS: PASSED | FAILED
VIOLATIONS: [list if any]
---
Task(general-purpose, model: opus, run_in_background: true):
Run full build.
Commands
- Build: npm run build
Output Format
---
STATUS: PASSED | FAILED
BUILD: PASSED | FAILED
FAILURES: [list of failed items if any]
---
**Both must pass before proceeding.**
---
## Phase 6: Completion Subagent
Spawn completion subagent:
Task(general-purpose, model: opus):
Finalize user story implementation.
Context
BRANCH_NAME: [from Phase 0] PLAN_FILE: .claude/plans/.plan.md USER_STORY_TITLE: [from Phase 0]
Tasks
-
Final validation:
- Build passes
- No uncommitted changes
- Quality checks pass
-
Push feature branch:
bashgit push -u origin [branch] -
Create PR:
bashgh pr create --base main --title "[title]" --body "## Summary [bullets from plan] ## Test Plan - [ ] Build passes - [ ] TypeScript strict mode passes - [ ] Lint passes - [ ] Manual testing: [steps]" -
DELETE plan file (MANDATORY):
bashrm -f .claude/plans/<name>.plan.md
Output Format
---
STATUS: COMPLETE
PR_URL: [url]
PLAN_DELETED: true
---
---
## Phase 7: Report to User
Summarize all results:
```markdown
## User Story Complete
**Story**: [title]
### Implementation
- Steps completed: X
- Commits: Y
- PR created: [url]
### Verification
- Build: PASSED
- TypeScript: PASSED
- Lint: PASSED
### Next Steps
1. Review the PR
2. Run `/fix-pr` to address review comments
3. Merge when ready
Progress Tracking
Use TodoWrite throughout:
todos:
- content: "Parse story and setup branch"
status: completed
- content: "Research patterns"
status: completed
- content: "Create plan"
status: completed
- content: "Review plan"
status: completed
- content: "Execute config-1"
status: completed
- content: "Execute component-1"
status: in_progress
- content: "Execute page-1"
status: pending
- content: "Verify and create PR"
status: pending
Key Principles
- Orchestrator is minimal - only spawns and collects
- Each step uses /task - consistent implementation workflow
- Waves for parallelism - independent steps run simultaneously
- Research informs planning - patterns discovered before plan created
- Clean completion - plan files deleted, PRs created
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?