Add comprehensive Claude Code advanced features
Added three new major feature categories with complete documentation and examples: ## New Features ### 07-hooks/ - Event-driven automation with 6 example hook scripts - Pre/post tool hooks, session hooks, and git hooks - Auto-formatting, security scanning, test automation - Complete documentation with best practices ### 08-checkpoints/ - Conversation state snapshots and rewind capability - Safe experimentation and approach comparison - Real-world examples: DB migration, performance optimization, UI iteration - Checkpoint management commands and workflows ### 09-advanced-features/ - Planning Mode: detailed implementation plans before coding - Extended Thinking: deep reasoning for complex problems - Background Tasks: long-running operations without blocking - Permission Modes: unrestricted, confirm, read-only, custom - Headless Mode: CI/CD integration and automation - Session Management: multiple work sessions - Interactive Features: keyboard shortcuts, command history - 10+ configuration examples for different scenarios ## Documentation Updates - README.md: Added sections for all new features with examples - INDEX.md: Updated with new categories, file listings, and search keywords - QUICK_REFERENCE.md: Added quick reference for new features - claude_concepts_guide.md: Comprehensive guide sections for new concepts ## Statistics - Total files: 90+ (up from 71) - Categories: 9 (up from 6) - New hook scripts: 6 - New documentation files: 10+ - Configuration examples: 10+ scenarios All examples are production-ready and follow Claude Code best practices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Luong NGUYEN
899
09-advanced-features/README.md
Normal file
899
09-advanced-features/README.md
Normal file
@@ -0,0 +1,899 @@
|
||||
# Advanced Features
|
||||
|
||||
Comprehensive guide to Claude Code's advanced capabilities including planning mode, extended thinking, background tasks, permission modes, headless operation, session management, interactive features, and configuration.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Planning Mode](#planning-mode)
|
||||
2. [Extended Thinking](#extended-thinking)
|
||||
3. [Background Tasks](#background-tasks)
|
||||
4. [Permission Mode](#permission-mode)
|
||||
5. [Headless Mode](#headless-mode)
|
||||
6. [Session Management](#session-management)
|
||||
7. [Interactive Features](#interactive-features)
|
||||
8. [Configuration and Settings](#configuration-and-settings)
|
||||
|
||||
---
|
||||
|
||||
## Planning Mode
|
||||
|
||||
Planning mode allows Claude to think through complex tasks before implementing them, creating a detailed plan that you can review and approve.
|
||||
|
||||
### What is Planning Mode?
|
||||
|
||||
Planning mode is a two-phase approach:
|
||||
1. **Planning Phase**: Claude analyzes the task and creates a detailed implementation plan
|
||||
2. **Implementation Phase**: After approval, Claude executes the plan
|
||||
|
||||
### When to Use Planning Mode
|
||||
|
||||
✅ Use planning mode for:
|
||||
- Complex multi-file refactoring
|
||||
- New feature implementations
|
||||
- Architectural changes
|
||||
- Database migrations
|
||||
- Major API redesigns
|
||||
|
||||
❌ Don't use planning mode for:
|
||||
- Simple bug fixes
|
||||
- Formatting changes
|
||||
- Single-file edits
|
||||
- Quick queries
|
||||
|
||||
### Activating Planning Mode
|
||||
|
||||
**Explicit activation**:
|
||||
```
|
||||
User: /plan implement user authentication system
|
||||
```
|
||||
|
||||
**Automatic activation**:
|
||||
Claude automatically enters planning mode for complex tasks:
|
||||
```
|
||||
User: Refactor the entire API to use microservices architecture
|
||||
|
||||
Claude: This is a complex task. Let me create a plan first...
|
||||
[Enters planning mode]
|
||||
```
|
||||
|
||||
### Example: Feature Implementation
|
||||
|
||||
```
|
||||
User: /plan Add a real-time notification system
|
||||
|
||||
Claude: I'll create a plan for implementing real-time notifications.
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Infrastructure Setup
|
||||
1. Install WebSocket libraries (socket.io)
|
||||
2. Set up WebSocket server
|
||||
3. Configure connection management
|
||||
|
||||
### Phase 2: Backend Implementation
|
||||
4. Create notification service
|
||||
5. Implement notification queue
|
||||
6. Add database schema for notifications
|
||||
7. Create API endpoints
|
||||
|
||||
### Phase 3: Frontend Integration
|
||||
8. Set up WebSocket client
|
||||
9. Create notification UI components
|
||||
10. Implement notification state management
|
||||
11. Add notification permissions
|
||||
|
||||
### Phase 4: Testing & Deployment
|
||||
12. Write unit tests
|
||||
13. Write integration tests
|
||||
14. Update documentation
|
||||
15. Deploy to staging
|
||||
|
||||
Estimated time: 3-4 hours
|
||||
Files to modify: 12
|
||||
New files to create: 8
|
||||
|
||||
Ready to proceed? (yes/no/modify plan)
|
||||
|
||||
User: yes
|
||||
|
||||
Claude: [Begins implementation following the plan]
|
||||
```
|
||||
|
||||
### Plan Modifications
|
||||
|
||||
```
|
||||
User: Modify the plan - skip the queue for now, we'll add it later
|
||||
|
||||
Claude: Updated plan:
|
||||
[Shows modified plan with queue removed]
|
||||
|
||||
User: Looks good, proceed
|
||||
|
||||
Claude: [Implements modified plan]
|
||||
```
|
||||
|
||||
### Planning Mode Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"complexityThreshold": 3,
|
||||
"requireApproval": true,
|
||||
"showTimeEstimates": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Extended Thinking
|
||||
|
||||
Extended thinking allows Claude to spend more time reasoning about complex problems before providing a solution.
|
||||
|
||||
### What is Extended Thinking?
|
||||
|
||||
Extended thinking is a deliberate, step-by-step reasoning process where Claude:
|
||||
- Breaks down complex problems
|
||||
- Considers multiple approaches
|
||||
- Evaluates trade-offs
|
||||
- Reasons through edge cases
|
||||
|
||||
### Activating Extended Thinking
|
||||
|
||||
**Explicit activation**:
|
||||
```
|
||||
User: /think deeply about the best database architecture for this system
|
||||
```
|
||||
|
||||
**Automatic activation**:
|
||||
For sufficiently complex queries, Claude automatically uses extended thinking.
|
||||
|
||||
### Example: Architectural Decision
|
||||
|
||||
```
|
||||
User: /think Should we use microservices or a monolith for our e-commerce platform?
|
||||
|
||||
Claude: Let me think through this architectural decision carefully...
|
||||
|
||||
<extended_thinking>
|
||||
## Context Analysis
|
||||
- Team size: 5 developers
|
||||
- Expected traffic: 10k daily users initially
|
||||
- Need to scale to 100k+ users
|
||||
- Limited DevOps resources
|
||||
- 6-month timeline to MVP
|
||||
|
||||
## Approach 1: Microservices
|
||||
Pros:
|
||||
+ Independent scaling
|
||||
+ Technology flexibility
|
||||
+ Team independence
|
||||
+ Fault isolation
|
||||
|
||||
Cons:
|
||||
- Operational complexity
|
||||
- Network overhead
|
||||
- Distributed tracing needed
|
||||
- Requires DevOps expertise
|
||||
- Slower initial development
|
||||
|
||||
## Approach 2: Monolith
|
||||
Pros:
|
||||
+ Simpler deployment
|
||||
+ Faster initial development
|
||||
+ Easier debugging
|
||||
+ Lower operational overhead
|
||||
+ Single codebase
|
||||
|
||||
Cons:
|
||||
- Scaling challenges later
|
||||
- All-or-nothing deployments
|
||||
- Technology lock-in
|
||||
- Potential for tight coupling
|
||||
|
||||
## Decision Factors
|
||||
1. Team size (5 devs) → Favors monolith
|
||||
2. DevOps resources (limited) → Favors monolith
|
||||
3. Timeline (6 months) → Favors monolith
|
||||
4. Future scale (100k users) → Achievable with monolith + caching
|
||||
5. Complexity budget → Limited
|
||||
|
||||
## Recommendation
|
||||
Start with a **modular monolith**:
|
||||
- Single deployment unit
|
||||
- Clear module boundaries
|
||||
- Clean interfaces between modules
|
||||
- Prepare for future extraction to microservices if needed
|
||||
|
||||
This gives you:
|
||||
✓ Fast initial development
|
||||
✓ Low operational complexity
|
||||
✓ Option to extract services later
|
||||
✓ Clear architecture
|
||||
|
||||
Migration path: When you reach 50k+ users or specific modules need independent scaling, extract those modules into microservices.
|
||||
</extended_thinking>
|
||||
|
||||
**Recommendation**: Implement a modular monolith with clean module boundaries.
|
||||
|
||||
This approach balances your current constraints (team size, timeline, DevOps resources) with future scalability needs. You can migrate specific modules to microservices later when there's a clear business need.
|
||||
```
|
||||
|
||||
### Extended Thinking Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true,
|
||||
"minThinkingTime": 5,
|
||||
"maxThinkingTime": 60
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Background Tasks
|
||||
|
||||
Background tasks allow long-running operations to execute without blocking your conversation.
|
||||
|
||||
### What Are Background Tasks?
|
||||
|
||||
Background tasks run asynchronously while you continue working:
|
||||
- Long test suites
|
||||
- Build processes
|
||||
- Database migrations
|
||||
- Deployment scripts
|
||||
- Analysis tools
|
||||
|
||||
### Starting Background Tasks
|
||||
|
||||
```
|
||||
User: Run the full test suite in the background
|
||||
|
||||
Claude: Starting tests in background (task-id: bg-1234)
|
||||
You can continue working while tests run.
|
||||
|
||||
[You can continue the conversation]
|
||||
|
||||
User: Meanwhile, let's refactor the auth module
|
||||
|
||||
Claude: [Works on auth module while tests run in background]
|
||||
|
||||
[Later, when tests complete]
|
||||
|
||||
Claude: 📢 Background task bg-1234 completed:
|
||||
✅ 245 tests passed
|
||||
❌ 3 tests failed
|
||||
View results: /task show bg-1234
|
||||
```
|
||||
|
||||
### Managing Background Tasks
|
||||
|
||||
**List active tasks**:
|
||||
```
|
||||
User: /task list
|
||||
|
||||
Active background tasks:
|
||||
1. [bg-1234] Running tests (50% complete, 2min remaining)
|
||||
2. [bg-1235] Building Docker image (25% complete, 8min remaining)
|
||||
3. [bg-1236] Deploying to staging (90% complete, 30sec remaining)
|
||||
```
|
||||
|
||||
**Check task status**:
|
||||
```
|
||||
User: /task status bg-1234
|
||||
|
||||
Task bg-1234: Running tests
|
||||
Status: In progress
|
||||
Progress: 120/245 tests (49%)
|
||||
Started: 2025-11-08 10:30:15
|
||||
Estimated completion: 2025-11-08 10:34:22
|
||||
```
|
||||
|
||||
**View task output**:
|
||||
```
|
||||
User: /task show bg-1234
|
||||
|
||||
[Shows live output from the test run]
|
||||
```
|
||||
|
||||
**Cancel task**:
|
||||
```
|
||||
User: /task cancel bg-1234
|
||||
|
||||
Cancelled background task bg-1234
|
||||
```
|
||||
|
||||
### Example: Parallel Development
|
||||
|
||||
```
|
||||
User: Run the build in the background
|
||||
|
||||
Claude: Starting build... (task-id: bg-5001)
|
||||
|
||||
User: Also run the linter in background
|
||||
|
||||
Claude: Starting linter... (task-id: bg-5002)
|
||||
|
||||
User: While those run, let's implement the new API endpoint
|
||||
|
||||
Claude: [Implements API endpoint while build and linter run]
|
||||
|
||||
[10 minutes later]
|
||||
|
||||
Claude: 📢 Build completed successfully (bg-5001)
|
||||
📢 Linter found 12 issues (bg-5002)
|
||||
|
||||
User: Show me the linter issues
|
||||
|
||||
Claude: [Shows linter output from bg-5002]
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"backgroundTasks": {
|
||||
"enabled": true,
|
||||
"maxConcurrentTasks": 5,
|
||||
"notifyOnCompletion": true,
|
||||
"autoCleanup": true,
|
||||
"logOutput": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Permission Mode
|
||||
|
||||
Permission mode controls what actions Claude can take without explicit approval.
|
||||
|
||||
### Permission Levels
|
||||
|
||||
#### 1. Unrestricted Mode (Default)
|
||||
Claude can use all tools freely.
|
||||
|
||||
```
|
||||
User: /permission unrestricted
|
||||
```
|
||||
|
||||
#### 2. Confirmation Mode
|
||||
Claude asks before taking actions.
|
||||
|
||||
```
|
||||
User: /permission confirm
|
||||
|
||||
User: Fix the bug in auth.ts
|
||||
|
||||
Claude: I need to modify src/auth.ts to fix the bug.
|
||||
The change will update the password validation logic.
|
||||
|
||||
Approve this change? (yes/no/show)
|
||||
|
||||
User: show
|
||||
|
||||
Claude: [Shows the exact changes]
|
||||
|
||||
User: yes
|
||||
|
||||
Claude: [Makes the change]
|
||||
```
|
||||
|
||||
#### 3. Read-Only Mode
|
||||
Claude can only read files, not modify them.
|
||||
|
||||
```
|
||||
User: /permission readonly
|
||||
|
||||
User: Fix the bug in auth.ts
|
||||
|
||||
Claude: I'm in read-only mode. I can analyze the bug and show you the fix, but I cannot modify files.
|
||||
|
||||
Here's the bug and suggested fix:
|
||||
[Shows analysis and proposed changes]
|
||||
```
|
||||
|
||||
#### 4. Custom Permission Sets
|
||||
|
||||
```json
|
||||
{
|
||||
"permissions": {
|
||||
"mode": "custom",
|
||||
"allowed": ["Read", "Grep", "Glob"],
|
||||
"blocked": ["Write", "Edit", "Bash"],
|
||||
"requireConfirmation": ["Git"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Use Cases
|
||||
|
||||
**Code Review**:
|
||||
```
|
||||
User: /permission readonly
|
||||
User: Review this PR and suggest improvements
|
||||
|
||||
Claude: [Reads code, provides feedback, but cannot modify]
|
||||
```
|
||||
|
||||
**Pair Programming**:
|
||||
```
|
||||
User: /permission confirm
|
||||
User: Let's implement the feature together
|
||||
|
||||
Claude: [Asks for approval before each change]
|
||||
```
|
||||
|
||||
**Automated Tasks**:
|
||||
```
|
||||
User: /permission unrestricted
|
||||
User: Run the full deployment pipeline
|
||||
|
||||
Claude: [Executes all steps without asking]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Headless Mode
|
||||
|
||||
Headless mode allows Claude Code to run without interactive input, perfect for automation and CI/CD.
|
||||
|
||||
### What is Headless Mode?
|
||||
|
||||
Headless mode enables:
|
||||
- Automated script execution
|
||||
- CI/CD integration
|
||||
- Batch processing
|
||||
- Scheduled tasks
|
||||
|
||||
### Running in Headless Mode
|
||||
|
||||
```bash
|
||||
# Run a specific task
|
||||
claude-code --headless --task "Run all tests and generate coverage report"
|
||||
|
||||
# Run from a script file
|
||||
claude-code --headless --script ./tasks/deploy.claude
|
||||
|
||||
# With input from stdin
|
||||
echo "Analyze code quality" | claude-code --headless
|
||||
```
|
||||
|
||||
### Example: CI/CD Integration
|
||||
|
||||
**GitHub Actions**:
|
||||
```yaml
|
||||
# .github/workflows/code-review.yml
|
||||
name: AI Code Review
|
||||
|
||||
on: [pull_request]
|
||||
|
||||
jobs:
|
||||
review:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Run Claude Code Review
|
||||
run: |
|
||||
claude-code --headless --task "Review this PR for:
|
||||
- Code quality issues
|
||||
- Security vulnerabilities
|
||||
- Performance concerns
|
||||
- Test coverage
|
||||
Output results to review-report.md"
|
||||
|
||||
- name: Post Review Comment
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
script: |
|
||||
const fs = require('fs');
|
||||
const report = fs.readFileSync('review-report.md', 'utf8');
|
||||
github.rest.issues.createComment({
|
||||
issue_number: context.issue.number,
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
body: report
|
||||
});
|
||||
```
|
||||
|
||||
### Task Scripts
|
||||
|
||||
**deploy.claude**:
|
||||
```
|
||||
# Automated deployment script
|
||||
|
||||
1. Run full test suite
|
||||
2. If tests pass, build production bundle
|
||||
3. Run security scan
|
||||
4. If scan passes, deploy to staging
|
||||
5. Run smoke tests on staging
|
||||
6. If smoke tests pass, deploy to production
|
||||
7. Send notification to team
|
||||
```
|
||||
|
||||
Run it:
|
||||
```bash
|
||||
claude-code --headless --script deploy.claude
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"headless": {
|
||||
"exitOnError": true,
|
||||
"verbose": true,
|
||||
"timeout": 3600,
|
||||
"logFile": "./claude-headless.log"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Session Management
|
||||
|
||||
Manage multiple Claude Code sessions effectively.
|
||||
|
||||
### Session Commands
|
||||
|
||||
**List sessions**:
|
||||
```
|
||||
User: /session list
|
||||
|
||||
Active sessions:
|
||||
1. [session-abc] Main development (started 2h ago)
|
||||
2. [session-def] Bug investigation (started 30m ago)
|
||||
3. [session-ghi] Refactoring (started 5m ago)
|
||||
```
|
||||
|
||||
**Switch sessions**:
|
||||
```
|
||||
User: /session switch session-def
|
||||
|
||||
Switched to session "Bug investigation"
|
||||
```
|
||||
|
||||
**Create new session**:
|
||||
```
|
||||
User: /session new "Feature: User profiles"
|
||||
|
||||
Created new session: session-jkl
|
||||
```
|
||||
|
||||
**Save session**:
|
||||
```
|
||||
User: /session save "Before major refactor"
|
||||
|
||||
Session saved as checkpoint
|
||||
```
|
||||
|
||||
**Load session**:
|
||||
```
|
||||
User: /session load "Before major refactor"
|
||||
|
||||
Loaded session from checkpoint
|
||||
```
|
||||
|
||||
### Session Persistence
|
||||
|
||||
Sessions are automatically saved and can be resumed:
|
||||
|
||||
```bash
|
||||
# Resume last session
|
||||
claude-code --resume
|
||||
|
||||
# Resume specific session
|
||||
claude-code --session session-abc
|
||||
|
||||
# Start fresh session
|
||||
claude-code --new
|
||||
```
|
||||
|
||||
### Session Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"sessions": {
|
||||
"autoSave": true,
|
||||
"autoSaveInterval": 300,
|
||||
"maxSessions": 10,
|
||||
"persistHistory": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Interactive Features
|
||||
|
||||
### Keyboard Shortcuts
|
||||
|
||||
Claude Code supports keyboard shortcuts for efficiency:
|
||||
|
||||
| Shortcut | Action |
|
||||
|----------|--------|
|
||||
| `Ctrl + C` | Cancel current operation |
|
||||
| `Ctrl + D` | Exit Claude Code |
|
||||
| `Ctrl + L` | Clear screen |
|
||||
| `Ctrl + R` | Search command history |
|
||||
| `Ctrl + P` | Previous command |
|
||||
| `Ctrl + N` | Next command |
|
||||
| `Ctrl + A` | Move to line start |
|
||||
| `Ctrl + E` | Move to line end |
|
||||
| `Ctrl + K` | Cut to end of line |
|
||||
| `Ctrl + U` | Cut to start of line |
|
||||
| `Ctrl + W` | Delete word backward |
|
||||
| `Ctrl + Y` | Paste (yank) |
|
||||
| `Ctrl + Z` | Suspend (background) |
|
||||
| `Tab` | Autocomplete |
|
||||
| `↑ / ↓` | Command history |
|
||||
|
||||
### Tab Completion
|
||||
|
||||
Claude Code provides intelligent tab completion:
|
||||
|
||||
```
|
||||
User: /che<TAB>
|
||||
→ /checkpoint
|
||||
|
||||
User: /checkpoint <TAB>
|
||||
→ /checkpoint list
|
||||
→ /checkpoint save
|
||||
→ /checkpoint rewind
|
||||
→ /checkpoint delete
|
||||
|
||||
User: /checkpoint save<TAB>
|
||||
→ Shows recent checkpoint names
|
||||
```
|
||||
|
||||
### Command History
|
||||
|
||||
Access previous commands:
|
||||
|
||||
```
|
||||
User: <↑> # Previous command
|
||||
User: <↓> # Next command
|
||||
User: Ctrl+R # Search history
|
||||
|
||||
(reverse-i-search)`test': run all tests
|
||||
```
|
||||
|
||||
### Multi-line Input
|
||||
|
||||
For complex queries, use multi-line mode:
|
||||
|
||||
```
|
||||
User: \
|
||||
> Implement a user authentication system
|
||||
> with the following requirements:
|
||||
> - JWT tokens
|
||||
> - Email verification
|
||||
> - Password reset
|
||||
> - 2FA support
|
||||
> \end
|
||||
|
||||
Claude: [Processes the multi-line request]
|
||||
```
|
||||
|
||||
### Inline Editing
|
||||
|
||||
Edit commands before sending:
|
||||
|
||||
```
|
||||
User: Deploy to prodcution<Backspace><Backspace>uction
|
||||
|
||||
[Edit in-place before sending]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration and Settings
|
||||
|
||||
### Configuration File Locations
|
||||
|
||||
1. **Global config**: `~/.claude/config.json`
|
||||
2. **Project config**: `./.claude/config.json`
|
||||
3. **User config**: `~/.config/claude-code/settings.json`
|
||||
|
||||
### Complete Configuration Example
|
||||
|
||||
```json
|
||||
{
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.7,
|
||||
"maxTokens": 8000,
|
||||
"theme": "dark"
|
||||
},
|
||||
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"complexityThreshold": 3,
|
||||
"requireApproval": true,
|
||||
"showTimeEstimates": true
|
||||
},
|
||||
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true,
|
||||
"minThinkingTime": 5,
|
||||
"maxThinkingTime": 60
|
||||
},
|
||||
|
||||
"backgroundTasks": {
|
||||
"enabled": true,
|
||||
"maxConcurrentTasks": 5,
|
||||
"notifyOnCompletion": true,
|
||||
"autoCleanup": true,
|
||||
"logOutput": true
|
||||
},
|
||||
|
||||
"permissions": {
|
||||
"mode": "unrestricted",
|
||||
"requireConfirmationFor": ["Bash:rm", "Git:push --force"],
|
||||
"blockedCommands": ["dd", "mkfs", "format"]
|
||||
},
|
||||
|
||||
"sessions": {
|
||||
"autoSave": true,
|
||||
"autoSaveInterval": 300,
|
||||
"maxSessions": 10,
|
||||
"persistHistory": true
|
||||
},
|
||||
|
||||
"checkpoints": {
|
||||
"autoCheckpoint": true,
|
||||
"autoCheckpointInterval": 30,
|
||||
"maxCheckpoints": 20,
|
||||
"compressionEnabled": true
|
||||
},
|
||||
|
||||
"hooks": {
|
||||
"PreToolUse:Edit": "eslint --fix ${file_path}",
|
||||
"PostToolUse:Write": "~/.claude/hooks/security-scan.sh",
|
||||
"PreCommit": "npm test",
|
||||
"UserPromptSubmit": "~/.claude/hooks/validate.sh"
|
||||
},
|
||||
|
||||
"mcp": {
|
||||
"enabled": true,
|
||||
"servers": {
|
||||
"github": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-github"],
|
||||
"env": {
|
||||
"GITHUB_TOKEN": "${GITHUB_TOKEN}"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"ui": {
|
||||
"colorEnabled": true,
|
||||
"emojiEnabled": true,
|
||||
"showProgress": true,
|
||||
"compactMode": false,
|
||||
"lineNumbers": true
|
||||
},
|
||||
|
||||
"performance": {
|
||||
"cacheEnabled": true,
|
||||
"cacheTTL": 3600,
|
||||
"parallelTasks": true,
|
||||
"maxParallelTasks": 3
|
||||
},
|
||||
|
||||
"logging": {
|
||||
"level": "info",
|
||||
"file": "~/.claude/logs/claude-code.log",
|
||||
"maxSize": "10MB",
|
||||
"maxFiles": 5
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Override config with environment variables:
|
||||
|
||||
```bash
|
||||
# Model selection
|
||||
export CLAUDE_MODEL=claude-opus-4
|
||||
|
||||
# API configuration
|
||||
export ANTHROPIC_API_KEY=sk-ant-...
|
||||
|
||||
# Feature toggles
|
||||
export CLAUDE_PLANNING_MODE=true
|
||||
export CLAUDE_EXTENDED_THINKING=true
|
||||
|
||||
# Permissions
|
||||
export CLAUDE_PERMISSION_MODE=confirm
|
||||
|
||||
# Logging
|
||||
export CLAUDE_LOG_LEVEL=debug
|
||||
```
|
||||
|
||||
### Configuration Management Commands
|
||||
|
||||
```
|
||||
User: /config show
|
||||
[Shows current configuration]
|
||||
|
||||
User: /config set planning.autoEnter false
|
||||
[Updates configuration]
|
||||
|
||||
User: /config reset
|
||||
[Resets to defaults]
|
||||
|
||||
User: /config export ~/my-claude-config.json
|
||||
[Exports configuration]
|
||||
|
||||
User: /config import ~/my-claude-config.json
|
||||
[Imports configuration]
|
||||
```
|
||||
|
||||
### Per-Project Configuration
|
||||
|
||||
Create `.claude/config.json` in your project:
|
||||
|
||||
```json
|
||||
{
|
||||
"hooks": {
|
||||
"PreCommit": "npm test && npm run lint"
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "confirm"
|
||||
},
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"project-db": {
|
||||
"command": "mcp-postgres",
|
||||
"env": {
|
||||
"DATABASE_URL": "${PROJECT_DB_URL}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Planning Mode
|
||||
- ✅ Use for complex multi-step tasks
|
||||
- ✅ Review plans before approving
|
||||
- ✅ Modify plans when needed
|
||||
- ❌ Don't use for simple tasks
|
||||
|
||||
### Extended Thinking
|
||||
- ✅ Use for architectural decisions
|
||||
- ✅ Use for complex problem-solving
|
||||
- ✅ Review the thinking process
|
||||
- ❌ Don't use for simple queries
|
||||
|
||||
### Background Tasks
|
||||
- ✅ Use for long-running operations
|
||||
- ✅ Monitor task progress
|
||||
- ✅ Handle task failures gracefully
|
||||
- ❌ Don't start too many concurrent tasks
|
||||
|
||||
### Permissions
|
||||
- ✅ Use read-only for code review
|
||||
- ✅ Use confirm for learning
|
||||
- ✅ Use unrestricted for automation
|
||||
- ❌ Don't stay in restrictive modes unnecessarily
|
||||
|
||||
### Sessions
|
||||
- ✅ Use separate sessions for different tasks
|
||||
- ✅ Save important session states
|
||||
- ✅ Clean up old sessions
|
||||
- ❌ Don't mix unrelated work in one session
|
||||
253
09-advanced-features/config-examples.json
Normal file
253
09-advanced-features/config-examples.json
Normal file
@@ -0,0 +1,253 @@
|
||||
{
|
||||
"description": "Example Claude Code configurations for different use cases",
|
||||
|
||||
"examples": {
|
||||
"development": {
|
||||
"name": "Development Environment",
|
||||
"description": "Configuration for active development work",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.7
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"complexityThreshold": 3,
|
||||
"requireApproval": true
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "unrestricted"
|
||||
},
|
||||
"backgroundTasks": {
|
||||
"enabled": true,
|
||||
"maxConcurrentTasks": 3
|
||||
},
|
||||
"hooks": {
|
||||
"PreToolUse:Write": "prettier --write ${file_path}",
|
||||
"PostToolUse:Write": "eslint ${file_path}",
|
||||
"PreCommit": "npm test"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"code_review": {
|
||||
"name": "Code Review Mode",
|
||||
"description": "Configuration for reviewing code without modifications",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.3
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "readonly"
|
||||
},
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"learning": {
|
||||
"name": "Learning Mode",
|
||||
"description": "Configuration for learning and experimentation",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.5
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "confirm"
|
||||
},
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"requireApproval": true,
|
||||
"showTimeEstimates": true
|
||||
},
|
||||
"checkpoints": {
|
||||
"autoCheckpoint": true,
|
||||
"autoCheckpointInterval": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"production": {
|
||||
"name": "Production Deployment",
|
||||
"description": "Configuration for production operations with safety checks",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-opus-4",
|
||||
"temperature": 0.1
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "confirm",
|
||||
"requireConfirmationFor": ["Bash", "Git", "Write", "Edit"]
|
||||
},
|
||||
"hooks": {
|
||||
"PreCommit": "npm test && npm run lint && npm run build",
|
||||
"PrePush": "npm run test:e2e",
|
||||
"PostPush": "~/.claude/hooks/notify-team.sh"
|
||||
},
|
||||
"checkpoints": {
|
||||
"autoCheckpoint": true,
|
||||
"autoCheckpointInterval": 10
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"requireApproval": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"ci_cd": {
|
||||
"name": "CI/CD Pipeline",
|
||||
"description": "Configuration for automated CI/CD operations",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "unrestricted"
|
||||
},
|
||||
"headless": {
|
||||
"exitOnError": true,
|
||||
"verbose": true,
|
||||
"timeout": 3600
|
||||
},
|
||||
"logging": {
|
||||
"level": "debug",
|
||||
"file": "./ci-claude.log"
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": false,
|
||||
"requireApproval": false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"security_audit": {
|
||||
"name": "Security Audit",
|
||||
"description": "Configuration for security-focused code analysis",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-opus-4",
|
||||
"temperature": 0.2
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "readonly"
|
||||
},
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true,
|
||||
"minThinkingTime": 10
|
||||
},
|
||||
"hooks": {
|
||||
"PostToolUse:Read": "~/.claude/hooks/security-scan.sh ${file_path}"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"performance_optimization": {
|
||||
"name": "Performance Optimization",
|
||||
"description": "Configuration for performance analysis and optimization",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.4
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"requireApproval": true
|
||||
},
|
||||
"backgroundTasks": {
|
||||
"enabled": true,
|
||||
"maxConcurrentTasks": 5
|
||||
},
|
||||
"checkpoints": {
|
||||
"autoCheckpoint": true,
|
||||
"autoCheckpointInterval": 20
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"pair_programming": {
|
||||
"name": "Pair Programming",
|
||||
"description": "Configuration for collaborative development",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.6
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "confirm"
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"requireApproval": true,
|
||||
"showTimeEstimates": true
|
||||
},
|
||||
"extendedThinking": {
|
||||
"enabled": true,
|
||||
"showThinkingProcess": true
|
||||
},
|
||||
"ui": {
|
||||
"compactMode": false,
|
||||
"showProgress": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"refactoring": {
|
||||
"name": "Large Refactoring",
|
||||
"description": "Configuration for major refactoring work",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-opus-4",
|
||||
"temperature": 0.3
|
||||
},
|
||||
"planning": {
|
||||
"autoEnter": true,
|
||||
"requireApproval": true,
|
||||
"showTimeEstimates": true
|
||||
},
|
||||
"checkpoints": {
|
||||
"autoCheckpoint": true,
|
||||
"autoCheckpointInterval": 10,
|
||||
"maxCheckpoints": 30
|
||||
},
|
||||
"hooks": {
|
||||
"PreToolUse:Edit": "~/.claude/hooks/backup-file.sh ${file_path}",
|
||||
"PostToolUse:Edit": "npm test -- --findRelatedTests ${file_path}"
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "confirm"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"documentation": {
|
||||
"name": "Documentation Writing",
|
||||
"description": "Configuration for writing documentation",
|
||||
"config": {
|
||||
"general": {
|
||||
"model": "claude-sonnet-4-5",
|
||||
"temperature": 0.7
|
||||
},
|
||||
"permissions": {
|
||||
"mode": "unrestricted"
|
||||
},
|
||||
"hooks": {
|
||||
"PostToolUse:Write": "markdownlint ${file_path}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
533
09-advanced-features/planning-mode-examples.md
Normal file
533
09-advanced-features/planning-mode-examples.md
Normal file
@@ -0,0 +1,533 @@
|
||||
# Planning Mode Examples
|
||||
|
||||
Real-world examples demonstrating effective use of planning mode in Claude Code.
|
||||
|
||||
## Example 1: Building a REST API
|
||||
|
||||
### Without Planning Mode
|
||||
|
||||
```
|
||||
User: Build a REST API for a blog
|
||||
|
||||
Claude: I'll create the API...
|
||||
[Starts coding immediately, may miss requirements]
|
||||
```
|
||||
|
||||
### With Planning Mode
|
||||
|
||||
```
|
||||
User: /plan Build a REST API for a blog
|
||||
|
||||
Claude: Let me create a comprehensive plan for the blog API.
|
||||
|
||||
## Blog REST API Implementation Plan
|
||||
|
||||
### Phase 1: Project Setup (15 min)
|
||||
1. Initialize Node.js project with Express
|
||||
2. Set up TypeScript configuration
|
||||
3. Install dependencies (express, pg, jwt, joi)
|
||||
4. Configure environment variables
|
||||
5. Set up project structure
|
||||
|
||||
### Phase 2: Database Layer (30 min)
|
||||
6. Design database schema
|
||||
- users table (id, email, password_hash, created_at)
|
||||
- posts table (id, user_id, title, content, published, created_at, updated_at)
|
||||
- comments table (id, post_id, user_id, content, created_at)
|
||||
7. Create migration files
|
||||
8. Set up database connection pool
|
||||
9. Implement database models
|
||||
|
||||
### Phase 3: Authentication (45 min)
|
||||
10. Implement user registration endpoint
|
||||
11. Implement login endpoint with JWT
|
||||
12. Create authentication middleware
|
||||
13. Add password hashing with bcrypt
|
||||
14. Implement token refresh logic
|
||||
|
||||
### Phase 4: Posts API (40 min)
|
||||
15. GET /api/posts - List all published posts (with pagination)
|
||||
16. GET /api/posts/:id - Get single post
|
||||
17. POST /api/posts - Create new post (auth required)
|
||||
18. PUT /api/posts/:id - Update post (auth required, ownership check)
|
||||
19. DELETE /api/posts/:id - Delete post (auth required, ownership check)
|
||||
20. GET /api/users/:id/posts - Get user's posts
|
||||
|
||||
### Phase 5: Comments API (30 min)
|
||||
21. GET /api/posts/:id/comments - Get post comments
|
||||
22. POST /api/posts/:id/comments - Add comment (auth required)
|
||||
23. DELETE /api/comments/:id - Delete comment (auth required, ownership check)
|
||||
|
||||
### Phase 6: Validation & Error Handling (30 min)
|
||||
24. Add request validation with Joi
|
||||
25. Implement global error handler
|
||||
26. Add input sanitization
|
||||
27. Implement rate limiting
|
||||
|
||||
### Phase 7: Testing (60 min)
|
||||
28. Write unit tests for models
|
||||
29. Write integration tests for auth endpoints
|
||||
30. Write integration tests for posts endpoints
|
||||
31. Write integration tests for comments endpoints
|
||||
32. Achieve 80%+ code coverage
|
||||
|
||||
### Phase 8: Documentation & Deployment (30 min)
|
||||
33. Generate API documentation with Swagger
|
||||
34. Create README with setup instructions
|
||||
35. Add Docker configuration
|
||||
36. Set up CI/CD pipeline
|
||||
|
||||
**Estimated Time**: 4.5 hours
|
||||
**Files to Create**: ~25
|
||||
**Key Technologies**: Express, PostgreSQL, JWT, TypeScript
|
||||
|
||||
**API Endpoints Summary**:
|
||||
- Authentication: 2 endpoints
|
||||
- Posts: 6 endpoints
|
||||
- Comments: 3 endpoints
|
||||
- Total: 11 endpoints
|
||||
|
||||
Ready to proceed? (yes/no/modify)
|
||||
|
||||
User: yes
|
||||
|
||||
Claude: Starting Phase 1: Project Setup...
|
||||
[Implements each phase systematically]
|
||||
```
|
||||
|
||||
## Example 2: Database Migration
|
||||
|
||||
### With Planning Mode
|
||||
|
||||
```
|
||||
User: /plan Migrate from MongoDB to PostgreSQL
|
||||
|
||||
Claude: This is a complex migration. Let me create a detailed plan.
|
||||
|
||||
## MongoDB to PostgreSQL Migration Plan
|
||||
|
||||
### Phase 1: Analysis & Preparation (Day 1)
|
||||
1. Analyze current MongoDB schema
|
||||
2. Identify data relationships and constraints
|
||||
3. Document current data volume and growth rate
|
||||
4. Design equivalent PostgreSQL schema
|
||||
5. Plan data type mappings
|
||||
6. Identify potential migration challenges
|
||||
|
||||
### Phase 2: PostgreSQL Setup (Day 1)
|
||||
7. Set up PostgreSQL database
|
||||
8. Create schema with tables, indexes, constraints
|
||||
9. Set up connection pooling
|
||||
10. Configure backup strategy
|
||||
|
||||
### Phase 3: Dual-Write Implementation (Day 2-3)
|
||||
11. Create database abstraction layer
|
||||
12. Implement dual-write to both databases
|
||||
13. Add data consistency checks
|
||||
14. Deploy dual-write to staging
|
||||
15. Monitor for issues
|
||||
|
||||
### Phase 4: Data Migration (Day 4)
|
||||
16. Create data export scripts for MongoDB
|
||||
17. Create data import scripts for PostgreSQL
|
||||
18. Implement data transformation logic
|
||||
19. Run initial migration on copy of production data
|
||||
20. Validate migrated data integrity
|
||||
|
||||
### Phase 5: Gradual Cutover (Day 5-7)
|
||||
21. Enable dual-write in production
|
||||
22. Migrate historical data in batches
|
||||
23. Continuously validate data consistency
|
||||
24. Monitor both databases
|
||||
25. Fix any data synchronization issues
|
||||
|
||||
### Phase 6: PostgreSQL Primary (Day 8)
|
||||
26. Switch read operations to PostgreSQL
|
||||
27. Monitor query performance
|
||||
28. Optimize slow queries
|
||||
29. Continue dual-write for safety
|
||||
|
||||
### Phase 7: MongoDB Retirement (Day 9-10)
|
||||
30. Stop writing to MongoDB
|
||||
31. Keep MongoDB as backup for 2 weeks
|
||||
32. Remove MongoDB dependencies from code
|
||||
33. Archive MongoDB data
|
||||
34. Decommission MongoDB instance
|
||||
|
||||
**Estimated Time**: 10 days
|
||||
**Risk Level**: High
|
||||
**Rollback Strategy**: Keep MongoDB running with dual-write
|
||||
**Success Criteria**:
|
||||
- Zero data loss
|
||||
- <5% performance regression
|
||||
- All tests passing
|
||||
|
||||
**Key Risks**:
|
||||
1. Data inconsistency during migration
|
||||
2. Query performance degradation
|
||||
3. Application downtime
|
||||
4. Data loss
|
||||
|
||||
**Mitigation**:
|
||||
- Dual-write pattern for safety
|
||||
- Gradual cutover
|
||||
- Continuous monitoring
|
||||
- Quick rollback capability
|
||||
|
||||
Proceed with this plan? (yes/no/modify)
|
||||
|
||||
User: Modify - let's add a rollback plan for each phase
|
||||
|
||||
Claude: Updated plan with rollback procedures for each phase...
|
||||
```
|
||||
|
||||
## Example 3: Frontend Refactoring
|
||||
|
||||
```
|
||||
User: /plan Refactor our React app from class components to hooks
|
||||
|
||||
Claude: I'll create a systematic refactoring plan.
|
||||
|
||||
## React Class to Hooks Migration Plan
|
||||
|
||||
### Phase 1: Preparation & Analysis (2 hours)
|
||||
1. Audit all class components (find all .jsx/.tsx files)
|
||||
2. Categorize by complexity:
|
||||
- Simple (state only): ~15 components
|
||||
- Medium (lifecycle methods): ~23 components
|
||||
- Complex (multiple lifecycle, refs): ~8 components
|
||||
3. Identify third-party libraries that need updates
|
||||
4. Create component dependency graph
|
||||
5. Plan migration order (leaf nodes first)
|
||||
|
||||
### Phase 2: Setup & Tooling (1 hour)
|
||||
6. Update React to v18+
|
||||
7. Set up ESLint rules for hooks
|
||||
8. Create conversion templates
|
||||
9. Set up automated tests
|
||||
10. Create checkpoint before starting
|
||||
|
||||
### Phase 3: Migrate Simple Components (4 hours)
|
||||
11. Convert simple stateful components (15 components)
|
||||
12. Replace this.state with useState
|
||||
13. Replace this.setState with state setters
|
||||
14. Test each component after conversion
|
||||
15. Update tests
|
||||
|
||||
### Phase 4: Migrate Medium Components (8 hours)
|
||||
16. Convert components with lifecycle methods (23 components)
|
||||
17. Replace componentDidMount with useEffect
|
||||
18. Replace componentDidUpdate with useEffect
|
||||
19. Replace componentWillUnmount with useEffect cleanup
|
||||
20. Test thoroughly
|
||||
|
||||
### Phase 5: Migrate Complex Components (12 hours)
|
||||
21. Convert complex components (8 components)
|
||||
22. Replace refs with useRef
|
||||
23. Extract custom hooks for shared logic
|
||||
24. Handle edge cases (multiple useEffect)
|
||||
25. Extensive testing
|
||||
|
||||
### Phase 6: Shared Logic Extraction (6 hours)
|
||||
26. Identify duplicated logic across components
|
||||
27. Create custom hooks:
|
||||
- useAuth
|
||||
- useFetch
|
||||
- useLocalStorage
|
||||
- useDebounce
|
||||
28. Refactor components to use custom hooks
|
||||
29. Test custom hooks independently
|
||||
|
||||
### Phase 7: Performance Optimization (4 hours)
|
||||
30. Add React.memo where needed
|
||||
31. Optimize with useCallback
|
||||
32. Optimize with useMemo
|
||||
33. Profile and fix performance regressions
|
||||
|
||||
### Phase 8: Cleanup & Documentation (2 hours)
|
||||
34. Remove unused class component utilities
|
||||
35. Update documentation
|
||||
36. Update coding guidelines
|
||||
37. Create migration guide for team
|
||||
|
||||
**Estimated Time**: 5 days (39 hours)
|
||||
**Files to Modify**: 46 components
|
||||
**Risk Level**: Medium
|
||||
|
||||
**Migration Order**:
|
||||
1. Leaf components (no dependencies)
|
||||
2. Mid-level components
|
||||
3. Top-level container components
|
||||
4. App.jsx (last)
|
||||
|
||||
**Testing Strategy**:
|
||||
- Unit tests for each component
|
||||
- Integration tests for user flows
|
||||
- Visual regression tests
|
||||
- Performance benchmarks
|
||||
|
||||
**Success Metrics**:
|
||||
- All tests passing
|
||||
- No visual regressions
|
||||
- Performance maintained or improved
|
||||
- Bundle size not significantly increased
|
||||
|
||||
Proceed? (yes/no/modify)
|
||||
```
|
||||
|
||||
## Example 4: Security Implementation
|
||||
|
||||
```
|
||||
User: /plan Implement comprehensive security for our web app
|
||||
|
||||
Claude: Let me create a thorough security implementation plan.
|
||||
|
||||
## Web Application Security Implementation Plan
|
||||
|
||||
### Phase 1: Security Audit (Day 1)
|
||||
1. Run automated security scanners (npm audit, Snyk)
|
||||
2. Review dependencies for vulnerabilities
|
||||
3. Check OWASP Top 10 compliance
|
||||
4. Audit authentication flows
|
||||
5. Review data handling practices
|
||||
6. Document current security gaps
|
||||
|
||||
### Phase 2: Authentication Hardening (Day 2-3)
|
||||
7. Implement strong password requirements
|
||||
8. Add password strength meter
|
||||
9. Implement rate limiting on login
|
||||
10. Add account lockout after failed attempts
|
||||
11. Implement 2FA (TOTP)
|
||||
12. Add session management improvements
|
||||
13. Implement secure password reset flow
|
||||
|
||||
### Phase 3: Authorization & Access Control (Day 3-4)
|
||||
14. Implement RBAC (Role-Based Access Control)
|
||||
15. Add permission checks on all endpoints
|
||||
16. Implement principle of least privilege
|
||||
17. Add audit logging for sensitive operations
|
||||
18. Implement resource-level permissions
|
||||
|
||||
### Phase 4: Data Protection (Day 4-5)
|
||||
19. Implement encryption at rest (sensitive fields)
|
||||
20. Ensure TLS/SSL for all communications
|
||||
21. Implement secure session storage
|
||||
22. Add PII data masking in logs
|
||||
23. Implement data retention policies
|
||||
24. Add secure file upload handling
|
||||
|
||||
### Phase 5: Input Validation & Sanitization (Day 5-6)
|
||||
25. Implement input validation on all endpoints
|
||||
26. Add XSS protection (Content Security Policy)
|
||||
27. Implement SQL injection prevention (parameterized queries)
|
||||
28. Add CSRF protection
|
||||
29. Implement request size limits
|
||||
30. Add file upload type validation
|
||||
|
||||
### Phase 6: Security Headers & Configuration (Day 6)
|
||||
31. Add security headers:
|
||||
- Strict-Transport-Security
|
||||
- X-Content-Type-Options
|
||||
- X-Frame-Options
|
||||
- X-XSS-Protection
|
||||
- Content-Security-Policy
|
||||
32. Configure CORS properly
|
||||
33. Disable unnecessary HTTP methods
|
||||
34. Remove server version headers
|
||||
|
||||
### Phase 7: Monitoring & Logging (Day 7)
|
||||
35. Implement security event logging
|
||||
36. Add anomaly detection
|
||||
37. Set up intrusion detection
|
||||
38. Implement real-time alerting
|
||||
39. Create security dashboard
|
||||
|
||||
### Phase 8: Testing & Documentation (Day 8-9)
|
||||
40. Perform penetration testing
|
||||
41. Run security scanners
|
||||
42. Test all security features
|
||||
43. Create security documentation
|
||||
44. Train team on security practices
|
||||
45. Create incident response plan
|
||||
|
||||
### Phase 9: Compliance & Policies (Day 10)
|
||||
46. GDPR compliance check
|
||||
47. Create privacy policy
|
||||
48. Implement data subject rights
|
||||
49. Add cookie consent
|
||||
50. Create security policies documentation
|
||||
|
||||
**Estimated Time**: 10 days
|
||||
**Risk Level**: Critical
|
||||
**Priority**: High
|
||||
|
||||
**Security Improvements Summary**:
|
||||
- Authentication: 7 enhancements
|
||||
- Authorization: 5 enhancements
|
||||
- Data Protection: 6 enhancements
|
||||
- Input Validation: 6 enhancements
|
||||
- Infrastructure: 9 enhancements
|
||||
- Monitoring: 5 enhancements
|
||||
|
||||
**Compliance**: OWASP Top 10, GDPR
|
||||
|
||||
**Success Criteria**:
|
||||
- Zero critical vulnerabilities
|
||||
- All OWASP Top 10 mitigated
|
||||
- Security score >90/100
|
||||
- All pen test issues resolved
|
||||
|
||||
Proceed? (yes/no/modify)
|
||||
```
|
||||
|
||||
## Example 5: Performance Optimization
|
||||
|
||||
```
|
||||
User: /plan Optimize our slow e-commerce website
|
||||
|
||||
Claude: Let me create a comprehensive performance optimization plan.
|
||||
|
||||
## E-commerce Performance Optimization Plan
|
||||
|
||||
### Phase 1: Performance Audit (4 hours)
|
||||
1. Run Lighthouse audit
|
||||
2. Analyze Chrome DevTools performance profile
|
||||
3. Measure Core Web Vitals:
|
||||
- LCP (Largest Contentful Paint)
|
||||
- FID (First Input Delay)
|
||||
- CLS (Cumulative Layout Shift)
|
||||
4. Identify performance bottlenecks
|
||||
5. Create baseline performance metrics
|
||||
|
||||
**Current Metrics**:
|
||||
- LCP: 4.2s (target: <2.5s)
|
||||
- FID: 280ms (target: <100ms)
|
||||
- CLS: 0.25 (target: <0.1)
|
||||
- Page Load: 8.3s (target: <3s)
|
||||
|
||||
### Phase 2: Image Optimization (6 hours)
|
||||
6. Convert images to WebP format
|
||||
7. Implement responsive images
|
||||
8. Add lazy loading for images
|
||||
9. Optimize image sizes (compression)
|
||||
10. Implement CDN for images
|
||||
11. Add image placeholders
|
||||
|
||||
**Expected Impact**: -40% load time
|
||||
|
||||
### Phase 3: Code Splitting & Lazy Loading (8 hours)
|
||||
12. Implement route-based code splitting
|
||||
13. Lazy load non-critical components
|
||||
14. Split vendor bundles
|
||||
15. Optimize chunk sizes
|
||||
16. Implement dynamic imports
|
||||
17. Add preloading for critical resources
|
||||
|
||||
**Expected Impact**: -30% initial bundle size
|
||||
|
||||
### Phase 4: Caching Strategy (6 hours)
|
||||
18. Implement browser caching (Cache-Control)
|
||||
19. Add service worker for offline support
|
||||
20. Implement API response caching
|
||||
21. Add Redis cache for database queries
|
||||
22. Implement stale-while-revalidate
|
||||
23. Configure CDN caching
|
||||
|
||||
**Expected Impact**: -50% API response time
|
||||
|
||||
### Phase 5: Database Optimization (8 hours)
|
||||
24. Add database indexes
|
||||
25. Optimize slow queries (>100ms)
|
||||
26. Implement query result caching
|
||||
27. Add connection pooling
|
||||
28. Denormalize where appropriate
|
||||
29. Implement database read replicas
|
||||
|
||||
**Expected Impact**: -60% database query time
|
||||
|
||||
### Phase 6: Frontend Optimization (10 hours)
|
||||
30. Minimize and compress JavaScript
|
||||
31. Minimize and compress CSS
|
||||
32. Remove unused CSS (PurgeCSS)
|
||||
33. Implement critical CSS
|
||||
34. Defer non-critical JavaScript
|
||||
35. Reduce DOM size
|
||||
36. Optimize React rendering (memo, useMemo)
|
||||
37. Implement virtual scrolling for long lists
|
||||
|
||||
**Expected Impact**: -35% JavaScript execution time
|
||||
|
||||
### Phase 7: Network Optimization (4 hours)
|
||||
38. Enable HTTP/2
|
||||
39. Implement resource hints (preconnect, prefetch)
|
||||
40. Reduce number of HTTP requests
|
||||
41. Enable Brotli compression
|
||||
42. Optimize third-party scripts
|
||||
|
||||
**Expected Impact**: -25% network time
|
||||
|
||||
### Phase 8: Monitoring & Testing (4 hours)
|
||||
43. Set up performance monitoring (Datadog/New Relic)
|
||||
44. Add Real User Monitoring (RUM)
|
||||
45. Create performance budgets
|
||||
46. Set up automated Lighthouse CI
|
||||
47. Test on real devices
|
||||
|
||||
**Estimated Time**: 50 hours (2 weeks)
|
||||
|
||||
**Target Metrics** (90th percentile):
|
||||
- LCP: <2.0s (from 4.2s) ✅
|
||||
- FID: <50ms (from 280ms) ✅
|
||||
- CLS: <0.05 (from 0.25) ✅
|
||||
- Page Load: <2.5s (from 8.3s) ✅
|
||||
|
||||
**Expected Revenue Impact**:
|
||||
- 100ms faster = 1% conversion increase
|
||||
- Target: 5.8s improvement = ~58% conversion increase
|
||||
- Estimated additional revenue: Significant
|
||||
|
||||
**Priority Order**:
|
||||
1. Image optimization (quick wins)
|
||||
2. Code splitting (high impact)
|
||||
3. Caching (high impact)
|
||||
4. Database optimization (critical)
|
||||
5. Frontend optimization (polish)
|
||||
|
||||
Proceed with this plan? (yes/no/modify)
|
||||
```
|
||||
|
||||
## Key Takeaways
|
||||
|
||||
### Benefits of Planning Mode
|
||||
|
||||
1. **Clarity**: Clear roadmap before starting
|
||||
2. **Estimation**: Time and effort estimates
|
||||
3. **Risk Assessment**: Identify potential issues early
|
||||
4. **Prioritization**: Logical order of tasks
|
||||
5. **Approval**: Review and approve before execution
|
||||
6. **Modification**: Adjust plan based on feedback
|
||||
|
||||
### When to Use Planning Mode
|
||||
|
||||
✅ **Always use for**:
|
||||
- Multi-day projects
|
||||
- Team collaborations
|
||||
- Critical system changes
|
||||
- Learning new concepts
|
||||
- Complex refactoring
|
||||
|
||||
❌ **Don't use for**:
|
||||
- Bug fixes
|
||||
- Small tweaks
|
||||
- Simple queries
|
||||
- Quick experiments
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Review plans carefully** before approving
|
||||
2. **Modify plans** when you spot issues
|
||||
3. **Break down** complex tasks
|
||||
4. **Estimate realistic** timeframes
|
||||
5. **Include rollback** strategies
|
||||
6. **Add success** criteria
|
||||
7. **Plan for testing** at each phase
|
||||
Reference in New Issue
Block a user