planning
Planning
Create detailed technical implementation plans through research, codebase analysis, solution design, and comprehensive documentation.
When to Use
Use this skill when:
- Planning new feature implementations
- Architecting system designs
- Evaluating technical approaches
- Creating implementation roadmaps
- Breaking down complex requirements
- Assessing technical trade-offs
Core Responsibilities & Rules
Always honoring YAGNI, KISS, and DRY principles. Be honest, be brutal, straight to the point, and be concise.
1. Research & Analysis
Load: references/research-phase.md
Skip if: Provided with researcher reports
2. Codebase Understanding
Load: references/codebase-understanding.md
Skip if: Provided with scout reports
3. Solution Design
Load: references/solution-design.md
4. Plan Creation & Organization
Load: references/plan-organization.md
5. Task Breakdown & Output Standards
Load: references/output-standards.md
Workflow Process
- Initial Analysis → Read codebase docs, understand context
- Research Phase → Spawn researchers, investigate approaches
- Synthesis → Analyze reports, identify optimal solution
- Design Phase → Create architecture, implementation design
- Plan Documentation → Write comprehensive plan
- Review & Refine → Ensure completeness, clarity, actionability
Output Requirements
- DO NOT implement code - only create plans
- Respond with plan file path and summary
- Ensure self-contained plans with necessary context
- Include code snippets/pseudocode when clarifying
- Provide multiple options with trade-offs when appropriate
- Fully respect the
./docs/development-rules.mdfile.
Task Integration (Optional)
When session has CLAUDE_CODE_TASK_LIST_ID set (active plan):
- Use TaskCreate to create tasks for each phase with clear subjects
- Set dependencies: Phase N+1
blockedByPhase N - Subagents coordinate via shared task list automatically
- Use TaskUpdate to mark progress (in_progress → completed)
Important
DO NOT create plans or reports in USER directory. ALWAYS create plans or reports in CURRENT WORKING PROJECT DIRECTORY.
Plan Directory Structure IN CURRENT WORKING PROJECT DIRECTORY:
plans/
└── {date}-plan-name/
├── research/
│ ├── researcher-XX-report.md
│ └── ...
├── reports/
│ ├── XX-report.md
│ └── ...
├── scout/
│ ├── scout-XX-report.md
│ └── ...
├── plan.md
├── phase-XX-phase-name-here.md
└── ...
Active Plan State
Prevents version proliferation by tracking current working plan via session state.
Active vs Suggested Plans
Check the ## Plan Context section injected by hooks:
- "Plan: {path}" = Active plan, explicitly set via
set-active-plan.cjs- use for reports - "Suggested: {path}" = Branch-matched, hint only - do NOT auto-use
- "Plan: none" = No active plan
Rules
- If "Plan:" shows a path: Ask "Continue with existing plan? [Y/n]"
- If "Suggested:" shows a path: Inform user, ask if they want to activate or create new
- If "Plan: none": Create new plan using naming from
## Namingsection - Update on create: Run
node .claude/scripts/set-active-plan.cjs {plan-dir}
Report Output Location
All agents writing reports MUST:
- Check
## Namingsection injected by hooks for the computed naming pattern - Active plans use plan-specific reports path
- Suggested plans use default reports path (not plan folder)
Important
DO NOT create plans or reports in USER directory. ALWAYS create plans or reports in CURRENT WORKING PROJECT DIRECTORY.
Important: Suggested plans do NOT get plan-specific reports - this prevents pollution of old plan folders.
Quality Standards
- Be thorough and specific
- Consider long-term maintainability
- Research thoroughly when uncertain
- Address security and performance concerns
- Make plans detailed enough for junior developers
- Validate against existing codebase patterns
Remember: Plan quality determines implementation success. Be comprehensive and consider all solution aspects.
More from hotriluan/alkana-dashboard
frontend-design
Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
19ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
3frontend-dev-guidelines
Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization.
3copywriting
Conversion copywriting formulas, headline templates, email copy patterns, landing page structures, CTA optimization, and writing style extraction. Activate for writing high-converting copy, crafting headlines, email campaigns, landing pages, or applying custom writing styles from assets/writing-styles/ directory.
3ui-styling
Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
3media-processing
Process media with FFmpeg (video/audio), ImageMagick (images), RMBG (AI background removal). Use for encoding, format conversion, filters, thumbnails, batch processing, HLS/DASH streaming.
3