</action>

<branch-naming>
Infer the branch type from the issue labels and title:

| Issue signal | Branch prefix |
|--------------|---------------|
| `bug` label, "fix", "broken", "error" | `fix/` |
| `enhancement` label, "add", "new", "feature" | `feat/` |
| "refactor", "clean up", "reorganize" | `refactor/` |
| "docs", "documentation" | `docs/` |
| Unclear | Ask the user |

Use a short, kebab-case description derived from the issue title.
Example: issue "Dashboard sidebar doesn't collapse on mobile" -> `fix/dashboard-sidebar-mobile-collapse`
</branch-naming>
</phase>

<phase name="investigate">
### Phase 3: Investigate

Explore the codebase to understand the root cause. Use the Explore agent and relevant skills.

<action>
1. Identify which files, components, hooks, and routes are involved
2. Read the relevant source code
3. Check for related types in `~/types/generated/`
4. If the issue references error messages or logs, trace them through the code
5. Check recent commits for context (`git log --oneline -10`)
</action>

<delegate>
- Use the **issue-handler** skill if the issue might belong to the API or another repo
- Use the **typescript-types-expert** skill context for type-related issues
- Use the **design-system** skill context for styling or component issues
- Use the **hooks-architect** skill context for hook pattern issues
- Use the **react-query-auditor** skill context for caching or query issues
</delegate>
</phase>

<phase name="plan">
### Phase 4: Plan the Fix

Present the plan to the user before writing any code.

<ask-user>
Explain:
1. **Root cause**: What is going wrong and why
2. **Proposed fix**: What changes are needed and where
3. **Files to modify**: List of files that will be touched
4. **Risk assessment**: What could go wrong, what else this might affect

Wait for user approval before proceeding.
</ask-user>
</phase>

<phase name="implement">
### Phase 5: Implement

Write the fix, keeping changes minimal and focused.

<guidelines>
- Only change what is necessary to resolve the issue
- Don't refactor surrounding code unless it's part of the fix
- Don't add features beyond what the issue describes
- Follow existing patterns in the codebase
- Import types from `~/types/generated` — never define API types locally
- Import icons from `~/components/icons` — never from `lucide-react` directly
- Use semantic colors only — never hardcoded colors like `text-green-600`
- Use shadcn/ui components from `~/components/ui/`
- Never use `module` as a variable name — use `courseModule`
- Add or update tests if the fix is testable
</guidelines>
</phase>

<phase name="verify">
### Phase 6: Verify

Confirm the fix type-checks and builds before handing off.

<action>
```bash
# Type check
npm run typecheck

# Build check
npm run build