Docs/nextra docs

.claude/commands/plan-create.md

@@ -1,6 +1,6 @@
 # Plan Create - Interactive Implementation Planning System
 
-Create comprehensive implementation plans through deep interactive dialogue.
+Create comprehensive development plans markdown content through deep interactive dialogue and run cli with that content.
 
 **Usage**: `/plan-create`
 
@@ -23,128 +23,146 @@ EOF
 
 ## Interactive Deep-Dive Process
 
-### Step 1: Initial Scope Understanding (MANDATORY)
+## Interactive Planning Process
 
-**CRITICAL: Only proceed to Step 4 (CLI execution) after completing Steps 1-3 dialogue. Do not use implementation tools during discovery phase.**
+**Simple Workflow:**
+1. Ask what the user wants to plan
+2. Have a conversation to understand details
+3. Create the plan with CLI command
 
-When user types `/plan-create`, the agent MUST first ask:
+**MANDATORY: Infinite Interactive Dialogue Process**
 
+**Start by asking:**
 ```
-I'll help you create a comprehensive implementation plan through detailed conversation.
+What would you like to plan?
 
-First, I need to understand what you're planning to implement:
-
-**What would you like to plan?**
-
-Please describe in detail:
-- The feature, fix, or system you want to implement
-- The problem it solves or requirement it fulfills
-- Your current technical environment and constraints
-- Any specific approaches or technologies you're considering
-
-The more detail you provide about the implementation context and requirements, the better I can help create a plan that perfectly fits your project's needs and constraints.
-
-Take your time - this initial context is crucial for creating an actionable implementation plan.
+Please describe:
+- What you want to implement
+- The problem it solves
+- Your current tech setup
 ```
 
-### Step 2: Extensive Interactive Discovery
-
-Based on the user's response, engage in a **fully interactive, extensive dialogue** to understand every implementation aspect:
-
-**Technical Context Deep-Dive:**
-- Current tech stack and framework versions
-- Existing architecture and patterns
-- Database and infrastructure setup
-- Authentication and security requirements
-- Performance and scalability needs
-- Testing and deployment processes
-
-**Implementation Requirements Discovery:**
-- Specific functionality and user stories
-- Technical design and architecture decisions
-- Files and modules that need changes
-- Dependencies and integrations required
-- Error handling and edge cases
-- Success metrics and validation criteria
-
-### Step 3: Implementation Planning
-
-After thorough discovery, determine the plan structure based on implementation type:
-
-**For New Features:**
-- User stories and acceptance criteria
-- Technical architecture and design patterns
-- Database schema changes
-- API endpoints and interfaces
-- Frontend components and user flows
-- Integration points and data flow
-- Testing strategy and scenarios
-
-**For Bug Fixes:**
-- Root cause analysis and diagnosis
-- Impact assessment and affected systems
-- Fix strategy and implementation approach
-- Testing and validation requirements
-- Deployment and rollback considerations
-
-**For Performance/Refactoring:**
-- Current bottlenecks and target metrics
-- Refactoring strategy and migration steps
-- Backward compatibility considerations
-- Monitoring and observability improvements
-- Rollout and validation approach
-
-### Step 4: Create Implementation Plan
-
-Execute CLI command to create the plan:
+**CRITICAL: After every user response, analyze what implementation details are still missing and ask deeper questions. NEVER stop asking until you know exactly how to implement everything.**
+
+**Self-Assessment Questions - Ask yourself after each user response:**
+- "What files exactly need to be created or modified?"
+- "What specific code changes are required?"
+- "What dependencies need to be installed?"
+- "What configuration changes are needed?"
+- "How will this integrate with existing code?"
+- "What testing approach should be used?"
+
+**Continuous Implementation Deep-Dive Pattern:**
+- If user says "add authentication" → Ask: Which files handle auth? What database changes? JWT or sessions? Middleware needed? Registration flow? Password reset?
+- If user says "improve performance" → Ask: What specific bottlenecks? Which components are slow? Database queries? Frontend rendering? API endpoints? Caching strategy?
+- If user says "refactor components" → Ask: Which exact components? What's the new structure? How to maintain backwards compatibility? Migration steps?
+
+**Keep Digging Until You Know:**
+- Exact file paths that need changes
+- Specific functions/components to create/modify
+- Complete dependency list with versions
+- Step-by-step implementation sequence
+- All configuration changes required
+- Comprehensive testing strategy
+- Success criteria with measurable outcomes
+
+**Signs You Need More Implementation Details:**
+- You don't know exact file paths → ASK MORE
+- You're unsure about code structure → ASK MORE
+- Dependencies are unclear → ASK MORE
+- Implementation steps are vague → DRILL DOWN
+- Testing approach is undefined → ASK MORE
+- You can't write specific todo items → ASK MORE
+
+**ONLY create the plan when you can confidently say: "I know exactly which files to modify, what code to write, what dependencies to install, and how to test everything."**
+
+After complete implementation understanding, create the plan using:
 
 ```bash
 npx -y cc-self-refer plan create "<plan-title>" <<'EOF'
-<comprehensive-plan-content>
+<plan-content>
 EOF
 ```
 
-### Interactive Q&A Strategy
-
-**Start broad, then get specific based on answers:**
-
-Example for "implement rate limiting":
-```
-Round 1 - Context:
-- What's your API framework?
-- Do you have Redis available?
-- Current traffic patterns?
-
-Round 2 - Requirements (based on Round 1):
-- Rate limit thresholds?
-- Different limits per user type?
-- Which endpoints to protect?
-
-Round 3 - Implementation:
-- User identification method?
-- Response when exceeded?
-- Monitoring needs?
-
-[Continue until all details clear]
-```
-
 ## Plan Document Template
 
+**IMPORTANT: the following implementation details are just example. The content of implementation section will vary depend on the plan requirement. **
+
+======================TEMPLATE=====================
 ```markdown
 # <Task Name>
 
 ## Overview
 [Concise description of what needs to be done, why it's needed, and expected outcome]
 
 ## Implementation
-[Detailed technical implementation including:
-- Framework/library choices (without version, assume latest versions'll be used)
-- Specific files to create/modify with exact paths
-- Code snippets or pseudo-code for core logic
-- Package dependencies to install
-- API endpoints or interfaces to implement
-- Database schema changes if needed
-- Configuration and environment variables]
+
+### Required Content
+
+
+**Technical Stack & Dependencies**
+- Framework: [React, Vue, Node.js, etc.]
+- Language & Version: [TypeScript 5.x, Node 18+, etc.]  
+- Package Manager: [npm, pnpm, yarn]
+- Required Dependencies: List exact package names and versions
+- New Dependencies to Install: Exact commands to run
+  ```bash
+  npm install package-name@version
+  pnpm add package-name
+  ```
+
+**Architecture & File Structure **
+- Directory Structure: Show exact paths where files will be created/modified
+- Component/Module Design: Describe the main classes, functions, or components
+- Data Flow: How data moves through the system
+- State Management: Redux, Context, or other patterns used
+
+**Implementation Steps **
+1. **Setup Phase**
+   - Environment configuration
+   - Dependency installation commands (exact CLI commands)
+   - Database migration commands (if needed)
+
+2. **Core Development**
+   - File Creation: List all new files to create with their exact paths
+   - File Modification: List existing files to modify with specific functions/sections
+   - Code Patterns: Reference existing patterns or describe new ones
+
+3. **Integration Phase**  
+   - API Integration: Exact endpoint URLs, request/response formats
+   - Component Integration: How new components connect to existing ones
+   - Testing Integration: Test file locations and testing commands
+
+4. **Validation & Deployment**
+   - Build Commands: `npm run build`, `pnpm build`, etc.
+   - Test Commands: `npm test`, `pnpm test`, `npm run e2e`, etc.
+   - Linting Commands: `npm run lint`, `pnpm lint`, etc.
+
+**Configuration Details **
+- Environment Variables: Exact variable names and example values
+- Config Files: Which files need modification (tsconfig.json, package.json, etc.)
+- Build Settings: Webpack, Vite, or other build tool configurations
+
+**External References **
+- Documentation Links: Include exact URLs for libraries, APIs, or frameworks
+- CLI Commands from Docs: Copy exact commands from documentation
+  ```bash
+  # Example: From Next.js docs
+  npx create-next-app@latest my-app --typescript --tailwind
+  ```
+- Code Examples: Include relevant code snippets from documentation
+
+**Error Handling & Edge Cases (에러 처리 및 엣지 케이스)**
+- Common Error Scenarios: What could go wrong and how to handle it
+- Validation Rules: Input validation, data validation requirements
+- Fallback Strategies: What to do when primary approach fails
+
+**Performance Considerations (성능 고려사항)**
+- Optimization Strategies: Lazy loading, caching, bundling
+- Monitoring: How to measure success (metrics, logging)
+- Scalability: How the solution handles growth
+
+
 
 ## Todo List
 - [ ] [Specific action item 1]
@@ -165,48 +183,7 @@ Round 3 - Implementation:
 - Docs: [External documentation link if needed]
 ```
 
-### Example Plan
-
-```markdown
-# Fix Memory Leak in WebSocket Handler
-
-## Overview
-Resolve memory leak causing server crashes after 24 hours of operation. Event listeners are not being properly cleaned up on disconnect.
-
-## Implementation
-**Root Cause:** Event listeners not removed on socket disconnect
-**Affected Service:** WebSocket server (`src/services/websocket.ts`)
-
-**Fix approach:**
-```typescript
-// Add cleanup in disconnect handler
-socket.on('disconnect', () => {
-  socket.removeAllListeners();
-  clearInterval(heartbeatInterval);
-  delete activeSockets[socket.id];
-});
-```
-
-**Memory profiling:**
-- Use Chrome DevTools for heap snapshots
-- Monitor with `process.memoryUsage()`
-
-## Todo List
-- [ ] Add memory profiling logs
-- [ ] Implement proper cleanup handlers
-- [ ] Test with connection stress tool
-- [ ] Monitor for 48 hours in staging
-- [ ] Deploy fix to production
-
-## Success Criteria
-- [ ] Memory usage stable over 48 hours
-- [ ] No orphaned event listeners in heap dumps
-- [ ] Server handles 10k connect/disconnect cycles
-
-## References
-- Page #23: Previous WebSocket issues
-- Pattern #7: Resource cleanup patterns
-```
+======================TEMPLATE END=====================
 
 ### Q&A Completion Checklist
 
@@ -232,14 +209,6 @@ socket.on('disconnect', () => {
 
 **Keep it practical:** Include only what's needed for execution. Skip sections if they don't apply.
 
-## Key Principles
-
-1. **Deep Discovery Through Dialogue** - Have extensive conversations to understand every implementation detail
-2. **Adaptive Questioning** - Each question builds on previous answers to go deeper
-3. **Comprehensive Planning** - Don't stop until all technical and business requirements are clear
-4. **Actionable Plans** - Create specific, implementable plans with clear steps
-5. **Context-Aware** - Consider existing codebase patterns and constraints
-
 ## Output Characteristics
 
 The implementation plans created should:

.claude/commands/plan-resolve.md

@@ -4,6 +4,21 @@ Load a strategic plan and systematically work through all todos until completion
 
 **Usage**: `/plan-resolve <id|keyword>`
 
+## ⚠️ CRITICAL: Direct Plan File Modification Required
+
+**This command requires direct modification of the original plan file in `.claude/plans/` directory:**
+
+1. **TODO Checkboxes**: Mark completed todos with `[x]` directly in the plan file
+2. **Success Criteria**: Update success criteria checkboxes `[x]` as they are achieved  
+3. **File Location Display**: The `plan view` command shows the exact file path for direct editing
+4. **Real-time Progress**: Check off items in the actual plan file to track progress
+
+**Workflow Pattern:**
+- Load plan with `npx cc-self-refer plan view <id>` (shows file location)
+- Edit the plan file directly: `.claude/plans/001-example-plan.md`
+- Check off `- [x]` completed todos and success criteria as you complete them
+- Use the plan file as your live progress tracker throughout implementation
+
 ## Purpose
 
 This command facilitates comprehensive execution of strategic plans by: