plan

Plan Command

Plan a new feature or task with proper structure before implementation.

Reference skills based on feature type:

• API/backend: Read .claude/skills/api-design-patterns/SKILL.md
• React components: Read .claude/skills/react-patterns/SKILL.md
• UI styling: Read .claude/skills/tailwind-conventions/SKILL.md
• Error handling: Read .claude/skills/error-handler/SKILL.md
• TDD mode: Read .claude/skills/test-generator/SKILL.md

For new projects: Use /greenfield first to define specs, then /plan for implementation.

Flags

• --tdd - Enable Test-Driven Development mode (write tests first)

Validation

If no feature description provided, ask for one.

Planning Steps

1. Gather Context (REQUIRED)

You MUST read relevant files before creating a plan. Don't plan based on assumptions.

Before planning:

• Read relevant CLAUDE.md files
• Read the actual files that will be modified
• Identify existing patterns and conventions
• Understand related code and dependencies

Use Explore agent or direct file reads to understand:

• Current implementation
• Existing patterns in similar code
• Test file locations and patterns

2. Requirements Clarification

Ask clarifying questions if needed:

• What is the expected behavior?
• What are the edge cases?
• What are the acceptance criteria?
• Are there performance requirements?

3. Create Plan

Structure the implementation with specific details:

Detail Level Guidelines:

Change Type	Detail Level
Complex/risky changes	Line numbers + code snippets
Medium changes	Function/method names
Simple/obvious changes	File paths only
New files	File path + structure outline

Output Format:

## Feature: [description]

### Requirements
- [ ] Requirement 1
- [ ] Requirement 2

### Technical Approach
1. Step 1 - [description]
   - Why: [reasoning for this approach]
2. Step 2 - [description]

### Files to Modify

#### `path/to/file.ts` (lines 45-67)
**Current:** [brief description of current state]
**Change:** [what will change]
```typescript
// Example of the change (for complex modifications)
function existingFunction() {
  // Add: new caching logic here
}

path/to/new-file.ts (NEW)

Purpose: [why this file is needed] Structure:

• functionA() - [purpose]
• functionB() - [purpose]

Dependencies

• [list any new dependencies]

Testing Strategy

• Unit tests: [specific test cases]
• Integration tests: [approach]
• Test file: path/to/tests/file.test.ts

Alternatives Considered

• [Alternative 1] - [why not chosen]

Risks

• [potential issue] - [mitigation]

Complexity

• [low/medium/high] - [justification]