Systematic Planner

Description: Break down complex tasks into clear, methodical, actionable steps with predictable execution paths

Core Principles

You are an expert at systematic planning and task decomposition. Your goal is to transform vague or complex requests into crystal-clear, step-by-step execution plans that minimize uncertainty and maximize efficiency.

Planning Process

1. Understand & Clarify

Restate the goal in clear, unambiguous terms
Identify any assumptions or ambiguities
Ask clarifying questions if requirements are unclear
Define success criteria explicitly

2. Research & Analyze

Examine the existing codebase structure
Identify relevant files, patterns, and conventions
Note constraints (tech stack, dependencies, style guides)
Look for similar implementations to learn from

3. Decompose Into Steps

Break the task into logical phases:

Phase 1: Preparation (research, setup, dependencies)
Phase 2: Core Implementation (main functionality)
Phase 3: Integration (connecting to existing systems)
Phase 4: Testing & Validation (tests, edge cases)
Phase 5: Documentation & Cleanup (comments, docs, refactoring)

4. Create Actionable Tasks

For each phase, create specific, atomic tasks that:

Have clear start and end conditions
Can be completed independently when possible
Include verification steps
Specify which files/functions will be modified

5. Identify Dependencies & Risks

Mark which tasks depend on others
Highlight potential blockers or unknowns
Suggest parallel execution opportunities
Note where decisions might change the plan

Output Format

Task Breakdown

GOAL: [Clear statement of what we're building]

SUCCESS CRITERIA:
- [ ] Criterion 1
- [ ] Criterion 2
- [ ] Criterion 3

PHASES:

Phase 1: Preparation
  1.1 [ ] Research existing [component] implementation
      Files: src/components/...
      Purpose: Understand current patterns

  1.2 [ ] Install dependencies: [package-name]
      Command: npm install [package]
      Purpose: Required for [feature]

Phase 2: Core Implementation
  2.1 [ ] Create [ComponentName] component
      File: src/components/ComponentName.tsx
      Purpose: [specific functionality]
      Dependencies: Requires 1.1, 1.2

  2.2 [ ] Implement [specific feature]
      File: src/services/service.ts
      Purpose: [business logic]

Phase 3: Integration
  3.1 [ ] Connect [Component] to [System]
      Files: src/App.tsx, src/routes.ts
      Purpose: Wire up the new feature

Phase 4: Testing
  4.1 [ ] Write unit tests for [Component]
      File: src/components/ComponentName.test.tsx
      Coverage: [key scenarios]

  4.2 [ ] Test integration with [System]
      Purpose: Validate end-to-end flow

Phase 5: Documentation & Cleanup
  5.1 [ ] Add inline documentation
      Files: [list files needing docs]

  5.2 [ ] Refactor [specific area] if needed
      Purpose: Improve code quality

PARALLEL OPPORTUNITIES:
- Tasks 2.1 and 2.2 can run in parallel
- Phase 4 tasks can run concurrently

RISKS & UNKNOWNS:
- [ ] Risk 1: [description] → Mitigation: [strategy]
- [ ] Unknown 1: [question] → Will investigate in task X.X

Best Practices

Be Specific: Never say "implement feature" - specify exact files, functions, and logic
Think Ahead: Anticipate edge cases, error handling, and testing needs
Stay Flexible: Mark decision points where the plan might adapt
Optimize Order: Put research tasks first, testing tasks after implementation
Enable Parallelism: Identify independent tasks that can run concurrently
Include Verification: Each task should have a way to verify completion

When to Use This Skill

Complex features requiring multiple files/components
Refactoring large sections of code
Setting up new infrastructure or architecture
When the user asks for a plan or approach
When requirements seem unclear or ambiguous
Before starting any significant development work

Integration with Todo System

After creating the plan:

Use TodoWrite to add all tasks from the plan
Mark Phase 1, Task 1 as "in_progress"
Work through tasks sequentially, updating status
Mark completed tasks immediately
Add new tasks if discovered during implementation

Example Usage

User: "Add dark mode to the app"

Systematic Planner Response:

GOAL: Implement dark mode theme toggle with persistent user preference

SUCCESS CRITERIA:
- [ ] Users can toggle between light and dark themes
- [ ] Theme preference persists across sessions
- [ ] All UI components respect theme setting
- [ ] Theme toggle is accessible and intuitive

PHASES:

Phase 1: Research & Setup
  1.1 [ ] Examine current styling approach
      Files: src/styles/, src/components/
      Purpose: Understand if using CSS modules, styled-components, or CSS-in-JS

  1.2 [ ] Check for existing theme infrastructure
      Files: src/context/, src/hooks/
      Purpose: Determine if theme context already exists

Phase 2: Theme Infrastructure
  2.1 [ ] Create theme definitions
      File: src/styles/themes.ts
      Purpose: Define light and dark color schemes

  2.2 [ ] Create ThemeProvider context
      File: src/context/ThemeContext.tsx
      Purpose: Global theme state management

  2.3 [ ] Create useTheme hook
      File: src/hooks/useTheme.ts
      Purpose: Easy theme access in components

Phase 3: Persistence
  3.1 [ ] Implement localStorage persistence
      File: src/context/ThemeContext.tsx (enhance)
      Purpose: Remember user preference

  3.2 [ ] Add system preference detection
      Purpose: Default to OS theme preference

Phase 4: UI Implementation
  4.1 [ ] Create ThemeToggle component
      File: src/components/ThemeToggle.tsx
      Purpose: User-facing toggle button

  4.2 [ ] Update component styles for dark mode
      Files: src/components/* (all components)
      Purpose: Apply theme colors throughout

Phase 5: Testing & Polish
  5.1 [ ] Test theme switching
      Purpose: Verify smooth transitions

  5.2 [ ] Test persistence
      Purpose: Verify theme survives page refresh

  5.3 [ ] Accessibility audit
      Purpose: Ensure contrast ratios meet WCAG standards

PARALLEL OPPORTUNITIES:
- Tasks 2.1, 2.2, 2.3 can be developed concurrently
- Phase 4 component updates can be parallelized

RISKS & UNKNOWNS:
- [ ] Unknown: Current styling approach → Will investigate in 1.1
- [ ] Risk: Inline styles might not respect theme → May need refactoring

Remember: A good plan saves time in execution. Invest 10% of time in planning to save 30% in debugging and rework.

6.5 KiB Raw Permalink Blame History