Files
Claude-Code-Workflow/.claude/skills/team-ux-improve/role-specs/implementer.md
catlog22 3d92478772 feat: Implement UX improvement pipeline with role specifications and task management
- Added role specifications for explorer, implementer, scanner, tester, and diagnoser.
- Created dispatch and monitor commands for orchestrating task execution.
- Defined team configuration for the UX improvement pipeline, including roles and responsibilities.
- Established structured task descriptions for scanning, diagnosing, designing, implementing, and testing UI components.
- Introduced caching mechanisms for exploration results and context accumulation for implementer tasks.
- Enhanced error handling and validation processes across roles.
2026-03-05 16:42:56 +08:00

126 lines
3.4 KiB
Markdown

---
prefix: IMPL
inner_loop: true
message_types:
success: impl_complete
error: error
---
# Code Implementer
Generate executable fix code with proper state management, event handling, and UI feedback bindings.
## Phase 2: Task & Design Loading
1. Extract session path from task description
2. Read design guide: `<session>/artifacts/design-guide.md`
3. Extract implementation tasks from design guide
4. Load framework conventions from wisdom files (if available)
5. **For inner loop**: Load context_accumulator from prior IMPL tasks
### Context Accumulator (Inner Loop)
```
context_accumulator = {
completed_fixes: [<fix-1>, <fix-2>],
modified_files: [<file-1>, <file-2>],
patterns_applied: [<pattern-1>]
}
```
## Phase 3: Code Implementation
Implementation backend selection:
| Backend | Condition | Method |
|---------|-----------|--------|
| CLI | Complex multi-file changes | `ccw cli --tool gemini --mode write` |
| Direct | Simple single-file changes | Inline Edit/Write |
### CLI Implementation (Complex)
```
Bash(`ccw cli -p "PURPOSE: Implement loading state and error handling for upload form
TASK:
- Add useState for isLoading and error
- Wrap async call in try/catch/finally
- Update UI bindings for button and error display
CONTEXT: @src/components/Upload.tsx
EXPECTED: Modified Upload.tsx with complete implementation
CONSTRAINTS: Maintain existing code style" --tool gemini --mode write`)
```
### Direct Implementation (Simple)
For simple state variable additions or UI binding changes:
```
Edit({
file_path: "src/components/Upload.tsx",
old_string: "const handleUpload = async () => {",
new_string: "const [isLoading, setIsLoading] = useState(false);\nconst [error, setError] = useState<string | null>(null);\n\nconst handleUpload = async () => {\n setIsLoading(true);\n setError(null);\n try {"
})
```
### Implementation Steps
For each fix in design guide:
1. Read target file
2. Determine complexity (simple vs complex)
3. Apply fix using appropriate backend
4. Verify syntax (no compilation errors)
5. Append to context_accumulator
## Phase 4: Self-Validation
| Check | Method | Pass Criteria |
|-------|--------|---------------|
| Syntax | IDE diagnostics or tsc --noEmit | No errors |
| File existence | Verify planned files exist | All present |
| Acceptance criteria | Match against design guide | All met |
Validation steps:
1. Run syntax check on modified files
2. Verify all files from design guide exist
3. Check acceptance criteria from design guide
4. If validation fails -> attempt auto-fix (max 2 attempts)
### Context Accumulator Update
Append to context_accumulator:
```
{
completed_fixes: [...prev, <current-fix>],
modified_files: [...prev, <current-files>],
patterns_applied: [...prev, <current-patterns>]
}
```
Write summary to `<session>/artifacts/fixes/README.md`:
```markdown
# Implementation Summary
## Completed Fixes
- Issue #1: Upload form loading state - DONE
- Issue #2: Error handling - DONE
## Modified Files
- src/components/Upload.tsx
- src/components/Form.tsx
## Patterns Applied
- React useState for loading/error states
- try/catch/finally for async handling
- Conditional rendering for error messages
```
Share state via team_msg:
```
team_msg(operation="log", session_id=<session-id>, from="implementer",
type="state_update", data={
completed_fixes: <count>,
modified_files: [<file-list>],
validation_passed: true
})
```