claude-code-pilot 3.0.0 → 3.1.1

package/src/agents/performance-optimizer.md

@@ -0,0 +1,446 @@
+---
+name: performance-optimizer
+description: Performance analysis and optimization specialist. Use PROACTIVELY for identifying bottlenecks, optimizing slow code, reducing bundle sizes, and improving runtime performance. Profiling, memory leaks, render optimization, and algorithmic improvements.
+tools: ["Read", "Write", "Edit", "Bash", "Grep", "Glob"]
+model: sonnet
+---
+
+# Performance Optimizer
+
+You are an expert performance specialist focused on identifying bottlenecks and optimizing application speed, memory usage, and efficiency. Your mission is to make code faster, lighter, and more responsive.
+
+## Core Responsibilities
+
+1. **Performance Profiling** — Identify slow code paths, memory leaks, and bottlenecks
+2. **Bundle Optimization** — Reduce JavaScript bundle sizes, lazy loading, code splitting
+3. **Runtime Optimization** — Improve algorithmic efficiency, reduce unnecessary computations
+4. **React/Rendering Optimization** — Prevent unnecessary re-renders, optimize component trees
+5. **Database & Network** — Optimize queries, reduce API calls, implement caching
+6. **Memory Management** — Detect leaks, optimize memory usage, cleanup resources
+
+## Analysis Commands
+
+```bash
+# Bundle analysis
+npx bundle-analyzer
+npx source-map-explorer build/static/js/*.js
+
+# Lighthouse performance audit
+npx lighthouse https://your-app.com --view
+
+# Node.js profiling
+node --prof your-app.js
+node --prof-process isolate-*.log
+
+# Memory analysis
+node --inspect your-app.js  # Then use Chrome DevTools
+
+# React profiling (in browser)
+# React DevTools > Profiler tab
+
+# Network analysis
+npx webpack-bundle-analyzer
+```
+
+## Performance Review Workflow
+
+### 1. Identify Performance Issues
+
+**Critical Performance Indicators:**
+
+| Metric | Target | Action if Exceeded |
+|--------|--------|-------------------|
+| First Contentful Paint | < 1.8s | Optimize critical path, inline critical CSS |
+| Largest Contentful Paint | < 2.5s | Lazy load images, optimize server response |
+| Time to Interactive | < 3.8s | Code splitting, reduce JavaScript |
+| Cumulative Layout Shift | < 0.1 | Reserve space for images, avoid layout thrashing |
+| Total Blocking Time | < 200ms | Break up long tasks, use web workers |
+| Bundle Size (gzipped) | < 200KB | Tree shaking, lazy loading, code splitting |
+
+### 2. Algorithmic Analysis
+
+Check for inefficient algorithms:
+
+| Pattern | Complexity | Better Alternative |
+|---------|------------|-------------------|
+| Nested loops on same data | O(n²) | Use Map/Set for O(1) lookups |
+| Repeated array searches | O(n) per search | Convert to Map for O(1) |
+| Sorting inside loop | O(n² log n) | Sort once outside loop |
+| String concatenation in loop | O(n²) | Use array.join() |
+| Deep cloning large objects | O(n) each time | Use shallow copy or immer |
+| Recursion without memoization | O(2^n) | Add memoization |
+
+```typescript
+// BAD: O(n²) - searching array in loop
+for (const user of users) {
+  const posts = allPosts.filter(p => p.userId === user.id); // O(n) per user
+}
+
+// GOOD: O(n) - group once with Map
+const postsByUser = new Map<number, Post[]>();
+for (const post of allPosts) {
+  const userPosts = postsByUser.get(post.userId) || [];
+  userPosts.push(post);
+  postsByUser.set(post.userId, userPosts);
+}
+// Now O(1) lookup per user
+```
+
+### 3. React Performance Optimization
+
+**Common React Anti-patterns:**
+
+```tsx
+// BAD: Inline function creation in render
+<Button onClick={() => handleClick(id)}>Submit</Button>
+
+// GOOD: Stable callback with useCallback
+const handleButtonClick = useCallback(() => handleClick(id), [handleClick, id]);
+<Button onClick={handleButtonClick}>Submit</Button>
+
+// BAD: Object creation in render
+<Child style={{ color: 'red' }} />
+
+// GOOD: Stable object reference
+const style = useMemo(() => ({ color: 'red' }), []);
+<Child style={style} />
+
+// BAD: Expensive computation on every render
+const sortedItems = items.sort((a, b) => a.name.localeCompare(b.name));
+
+// GOOD: Memoize expensive computations
+const sortedItems = useMemo(
+  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
+  [items]
+);
+
+// BAD: List without keys or with index
+{items.map((item, index) => <Item key={index} />)}
+
+// GOOD: Stable unique keys
+{items.map(item => <Item key={item.id} item={item} />)}
+```
+
+**React Performance Checklist:**
+
+- [ ] `useMemo` for expensive computations
+- [ ] `useCallback` for functions passed to children
+- [ ] `React.memo` for frequently re-rendered components
+- [ ] Proper dependency arrays in hooks
+- [ ] Virtualization for long lists (react-window, react-virtualized)
+- [ ] Lazy loading for heavy components (`React.lazy`)
+- [ ] Code splitting at route level
+
+### 4. Bundle Size Optimization
+
+**Bundle Analysis Checklist:**
+
+```bash
+# Analyze bundle composition
+npx webpack-bundle-analyzer build/static/js/*.js
+
+# Check for duplicate dependencies
+npx duplicate-package-checker-analyzer
+
+# Find largest files
+du -sh node_modules/* | sort -hr | head -20
+```
+
+**Optimization Strategies:**
+
+| Issue | Solution |
+|-------|----------|
+| Large vendor bundle | Tree shaking, smaller alternatives |
+| Duplicate code | Extract to shared module |
+| Unused exports | Remove dead code with knip |
+| Moment.js | Use date-fns or dayjs (smaller) |
+| Lodash | Use lodash-es or native methods |
+| Large icons library | Import only needed icons |
+
+```javascript
+// BAD: Import entire library
+import _ from 'lodash';
+import moment from 'moment';
+
+// GOOD: Import only what you need
+import debounce from 'lodash/debounce';
+import { format, addDays } from 'date-fns';
+
+// Or use lodash-es with tree shaking
+import { debounce, throttle } from 'lodash-es';
+```
+
+### 5. Database & Query Optimization
+
+**Query Optimization Patterns:**
+
+```sql
+-- BAD: Select all columns
+SELECT * FROM users WHERE active = true;
+
+-- GOOD: Select only needed columns
+SELECT id, name, email FROM users WHERE active = true;
+
+-- BAD: N+1 queries (in application loop)
+-- 1 query for users, then N queries for each user's orders
+
+-- GOOD: Single query with JOIN or batch fetch
+SELECT u.*, o.id as order_id, o.total
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.active = true;
+
+-- Add index for frequently queried columns
+CREATE INDEX idx_users_active ON users(active);
+CREATE INDEX idx_orders_user_id ON orders(user_id);
+```
+
+**Database Performance Checklist:**
+
+- [ ] Indexes on frequently queried columns
+- [ ] Composite indexes for multi-column queries
+- [ ] Avoid SELECT * in production code
+- [ ] Use connection pooling
+- [ ] Implement query result caching
+- [ ] Use pagination for large result sets
+- [ ] Monitor slow query logs
+
+### 6. Network & API Optimization
+
+**Network Optimization Strategies:**
+
+```typescript
+// BAD: Multiple sequential requests
+const user = await fetchUser(id);
+const posts = await fetchPosts(user.id);
+const comments = await fetchComments(posts[0].id);
+
+// GOOD: Parallel requests when independent
+const [user, posts] = await Promise.all([
+  fetchUser(id),
+  fetchPosts(id)
+]);
+
+// GOOD: Batch requests when possible
+const results = await batchFetch(['user1', 'user2', 'user3']);
+
+// Implement request caching
+const fetchWithCache = async (url: string, ttl = 300000) => {
+  const cached = cache.get(url);
+  if (cached) return cached;
+
+  const data = await fetch(url).then(r => r.json());
+  cache.set(url, data, ttl);
+  return data;
+};
+
+// Debounce rapid API calls
+const debouncedSearch = debounce(async (query: string) => {
+  const results = await searchAPI(query);
+  setResults(results);
+}, 300);
+```
+
+**Network Optimization Checklist:**
+
+- [ ] Parallel independent requests with `Promise.all`
+- [ ] Implement request caching
+- [ ] Debounce rapid-fire requests
+- [ ] Use streaming for large responses
+- [ ] Implement pagination for large datasets
+- [ ] Use GraphQL or API batching to reduce requests
+- [ ] Enable compression (gzip/brotli) on server
+
+### 7. Memory Leak Detection
+
+**Common Memory Leak Patterns:**
+
+```typescript
+// BAD: Event listener without cleanup
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  // Missing cleanup!
+}, []);
+
+// GOOD: Clean up event listeners
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, []);
+
+// BAD: Timer without cleanup
+useEffect(() => {
+  setInterval(() => pollData(), 1000);
+  // Missing cleanup!
+}, []);
+
+// GOOD: Clean up timers
+useEffect(() => {
+  const interval = setInterval(() => pollData(), 1000);
+  return () => clearInterval(interval);
+}, []);
+
+// BAD: Holding references in closures
+const Component = () => {
+  const largeData = useLargeData();
+  useEffect(() => {
+    eventEmitter.on('update', () => {
+      console.log(largeData); // Closure keeps reference
+    });
+  }, [largeData]);
+};
+
+// GOOD: Use refs or proper dependencies
+const largeDataRef = useRef(largeData);
+useEffect(() => {
+  largeDataRef.current = largeData;
+}, [largeData]);
+
+useEffect(() => {
+  const handleUpdate = () => {
+    console.log(largeDataRef.current);
+  };
+  eventEmitter.on('update', handleUpdate);
+  return () => eventEmitter.off('update', handleUpdate);
+}, []);
+```
+
+**Memory Leak Detection:**
+
+```bash
+# Chrome DevTools Memory tab:
+# 1. Take heap snapshot
+# 2. Perform action
+# 3. Take another snapshot
+# 4. Compare to find objects that shouldn't exist
+# 5. Look for detached DOM nodes, event listeners, closures
+
+# Node.js memory debugging
+node --inspect app.js
+# Open chrome://inspect
+# Take heap snapshots and compare
+```
+
+## Performance Testing
+
+### Lighthouse Audits
+
+```bash
+# Run full lighthouse audit
+npx lighthouse https://your-app.com --view --preset=desktop
+
+# CI mode for automated checks
+npx lighthouse https://your-app.com --output=json --output-path=./lighthouse.json
+
+# Check specific metrics
+npx lighthouse https://your-app.com --only-categories=performance
+```
+
+### Performance Budgets
+
+```json
+// package.json
+{
+  "bundlesize": [
+    {
+      "path": "./build/static/js/*.js",
+      "maxSize": "200 kB"
+    }
+  ]
+}
+```
+
+### Web Vitals Monitoring
+
+```typescript
+// Track Core Web Vitals
+import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
+
+getCLS(console.log);  // Cumulative Layout Shift
+getFID(console.log);  // First Input Delay
+getLCP(console.log);  // Largest Contentful Paint
+getFCP(console.log);  // First Contentful Paint
+getTTFB(console.log); // Time to First Byte
+```
+
+## Performance Report Template
+
+````markdown
+# Performance Audit Report
+
+## Executive Summary
+- **Overall Score**: X/100
+- **Critical Issues**: X
+- **Recommendations**: X
+
+## Bundle Analysis
+| Metric | Current | Target | Status |
+|--------|---------|--------|--------|
+| Total Size (gzip) | XXX KB | < 200 KB | WARNING: |
+| Main Bundle | XXX KB | < 100 KB | PASS: |
+| Vendor Bundle | XXX KB | < 150 KB | WARNING: |
+
+## Web Vitals
+| Metric | Current | Target | Status |
+|--------|---------|--------|--------|
+| LCP | X.Xs | < 2.5s | PASS: |
+| FID | XXms | < 100ms | PASS: |
+| CLS | X.XX | < 0.1 | WARNING: |
+
+## Critical Issues
+
+### 1. [Issue Title]
+**File**: path/to/file.ts:42
+**Impact**: High - Causes XXXms delay
+**Fix**: [Description of fix]
+
+```typescript
+// Before (slow)
+const slowCode = ...;
+
+// After (optimized)
+const fastCode = ...;
+```
+
+### 2. [Issue Title]
+...
+
+## Recommendations
+1. [Priority recommendation]
+2. [Priority recommendation]
+3. [Priority recommendation]
+
+## Estimated Impact
+- Bundle size reduction: XX KB (XX%)
+- LCP improvement: XXms
+- Time to Interactive improvement: XXms
+````
+
+## When to Run
+
+**ALWAYS:** Before major releases, after adding new features, when users report slowness, during performance regression testing.
+
+**IMMEDIATELY:** Lighthouse score drops, bundle size increases >10%, memory usage grows, slow page loads.
+
+## Red Flags - Act Immediately
+
+| Issue | Action |
+|-------|--------|
+| Bundle > 500KB gzip | Code split, lazy load, tree shake |
+| LCP > 4s | Optimize critical path, preload resources |
+| Memory usage growing | Check for leaks, review useEffect cleanup |
+| CPU spikes | Profile with Chrome DevTools |
+| Database query > 1s | Add index, optimize query, cache results |
+
+## Success Metrics
+
+- Lighthouse performance score > 90
+- All Core Web Vitals in "good" range
+- Bundle size under budget
+- No memory leaks detected
+- Test suite still passing
+- No performance regressions
+
+---
+
+**Remember**: Performance is a feature. Users notice speed. Every 100ms of improvement matters. Optimize for the 90th percentile, not the average.

package/src/available-rules/README.md

@@ -32,7 +32,7 @@ available-rules/
 
 ## Installation
 
-Rules are installed automatically by Claude Code Pilot. The `/setup` wizard detects your project's tech stack and copies the appropriate common + language-specific rule directories into `.claude/rules/`.
+Rules are installed automatically by Claude Code Pilot. The `/ccp:setup` wizard detects your project's tech stack and copies the appropriate common + language-specific rule directories into `.claude/rules/`.
 
 > **Important:** Rules directories must maintain their structure (common/ and language-specific/ as separate directories). Do NOT flatten them -- common and language-specific directories contain files with the same names. Flattening causes language-specific files to overwrite common rules, and breaks the relative `../common/` references.
 

package/src/commands/{aside.md → ccp/aside.md}

@@ -1,4 +1,5 @@
 ---
+name: ccp:aside
 description: Answer a quick side question without interrupting or losing context from the current task. Resume work automatically after answering.
 ---
 
@@ -17,12 +18,12 @@ Ask a question mid-task and get an immediate, focused answer — then continue r
 ## Usage
 
 ```
-/aside <your question>
-/aside what does this function actually return?
-/aside is this pattern thread-safe?
-/aside why are we using X instead of Y here?
-/aside what's the difference between foo() and bar()?
-/aside should we be worried about the N+1 query we just added?
+/ccp:aside <your question>
+/ccp:aside what does this function actually return?
+/ccp:aside is this pattern thread-safe?
+/ccp:aside why are we using X instead of Y here?
+/ccp:aside what's the difference between foo() and bar()?
+/ccp:aside should we be worried about the N+1 query we just added?
 ```
 
 ## Process
@@ -31,7 +32,7 @@ Ask a question mid-task and get an immediate, focused answer — then continue r
 
 Before answering anything, mentally note:
 - What is the active task? (what file, feature, or problem was being worked on)
-- What step was in progress at the moment `/aside` was invoked?
+- What step was in progress at the moment `/ccp:aside` was invoked?
 - What was about to happen next?
 
 Do NOT touch, edit, create, or delete any files during the aside.
@@ -63,7 +64,7 @@ After delivering the answer, immediately continue the active task from the exact
 
 ## Edge Cases
 
-**No question provided (`/aside` with nothing after it):**
+**No question provided (`/ccp:aside` with nothing after it):**
 Respond:
 ```
 ASIDE: no question provided
@@ -83,7 +84,7 @@ ASIDE: [answer]
 Wait for the user's decision before resuming.
 
 **Question is actually a task redirect (not a side question):**
-If the question implies changing what is being built (e.g., `/aside actually, let's use Redis instead`), clarify:
+If the question implies changing what is being built (e.g., `/ccp:aside actually, let's use Redis instead`), clarify:
 ```
 ASIDE: That sounds like a direction change, not just a side question.
 Do you want to:
@@ -95,7 +96,7 @@ Wait for the user's answer — do not make assumptions.
 **Question is about the currently open file or code:**
 Answer from the live context. If the file was read earlier in the session, reference it directly. If not, read it now (read-only) and answer with a file:line reference.
 
-**No active task (nothing in progress when `/aside` is invoked):**
+**No active task (nothing in progress when `/ccp:aside` is invoked):**
 Still use the standard wrapper so the response shape stays consistent:
 ```
 ASIDE: [restate the question briefly]
@@ -111,7 +112,7 @@ Give the essential answer concisely, then offer:
 That's the short version. Want a deeper explanation after we finish [current task]?
 ```
 
-**Multiple `/aside` questions in a row:**
+**Multiple `/ccp:aside` questions in a row:**
 Answer each one in sequence. After the last answer, resume the main task. Do not lose task state across a chain of asides.
 
 **Aside answer implies a code change is needed:**
@@ -130,7 +131,7 @@ Ask one clarifying question — the shortest question that gets the information
 ## Example Output
 
 ```
-User: /aside what does fetchWithRetry() actually do?
+User: /ccp:aside what does fetchWithRetry() actually do?
 
 ASIDE: what does fetchWithRetry() do?
 
@@ -142,7 +143,7 @@ network errors — 4xx errors are treated as final and not retried.
 ```
 
 ```
-User: /aside is the approach we're taking thread-safe?
+User: /ccp:aside is the approach we're taking thread-safe?
 
 ASIDE: is the current approach thread-safe?
 

package/src/commands/{build-fix.md → ccp/build-fix.md}

@@ -1,3 +1,8 @@
+---
+name: ccp:build-fix
+description: "Incrementally fix build and type errors with minimal, safe changes"
+---
+
 # Build and Fix
 
 Incrementally fix build and type errors with minimal, safe changes.

package/src/commands/{checkpoint.md → ccp/checkpoint.md}

@@ -1,16 +1,21 @@
+---
+name: ccp:checkpoint
+description: "Create or verify a checkpoint in your workflow"
+---
+
 # Checkpoint Command
 
 Create or verify a checkpoint in your workflow.
 
 ## Usage
 
-`/checkpoint [create|verify|list] [name]`
+`/ccp:checkpoint [create|verify|list] [name]`
 
 ## Create Checkpoint
 
 When creating a checkpoint:
 
-1. Run `/verify quick` to ensure current state is clean
+1. Run `/ccp:verify quick` to ensure current state is clean
 2. Create a git stash or commit with checkpoint name
 3. Log checkpoint to `.claude/checkpoints.log`:
 
@@ -54,15 +59,15 @@ Show all checkpoints with:
 Typical checkpoint flow:
 
 ```
-[Start] --> /checkpoint create "feature-start"
+[Start] --> /ccp:checkpoint create "feature-start"
    |
-[Implement] --> /checkpoint create "core-done"
+[Implement] --> /ccp:checkpoint create "core-done"
    |
-[Test] --> /checkpoint verify "core-done"
+[Test] --> /ccp:checkpoint verify "core-done"
    |
-[Refactor] --> /checkpoint create "refactor-done"
+[Refactor] --> /ccp:checkpoint create "refactor-done"
    |
-[PR] --> /checkpoint verify "feature-start"
+[PR] --> /ccp:checkpoint verify "feature-start"
 ```
 
 ## Arguments

package/src/commands/{code-review.md → ccp/code-review.md}

@@ -1,3 +1,8 @@
+---
+name: ccp:code-review
+description: "Comprehensive security and quality review of uncommitted changes"
+---
+
 # Code Review
 
 Comprehensive security and quality review of uncommitted changes:

package/src/commands/{context-budget.md → ccp/context-budget.md}

@@ -1,4 +1,5 @@
 ---
+name: ccp:context-budget
 description: Analyze context window usage across agents, skills, MCP servers, and rules to find optimization opportunities. Helps reduce token overhead and avoid performance warnings.
 ---
 
@@ -9,7 +10,7 @@ Analyze your Claude Code setup's context window consumption and produce actionab
 ## Usage
 
 ```
-/context-budget [--verbose]
+/ccp:context-budget [--verbose]
 ```
 
 - Default: summary with top recommendations

package/src/commands/{cpp-build.md → ccp/cpp-build.md}

@@ -1,4 +1,5 @@
 ---
+name: ccp:cpp-build
 description: Fix C++ build errors, CMake issues, and linker problems incrementally. Invokes the cpp-build-resolver agent for minimal, surgical fixes.
 ---
 
@@ -16,7 +17,7 @@ This command invokes the **cpp-build-resolver** agent to incrementally fix C++ b
 
 ## When to Use
 
-Use `/cpp-build` when:
+Use `/ccp:cpp-build` when:
 - `cmake --build build` fails with errors
 - Linker errors (undefined references, multiple definitions)
 - Template instantiation failures
@@ -40,7 +41,7 @@ cppcheck --enable=all src/
 ## Example Session
 
 ```text
-User: /cpp-build
+User: /ccp:cpp-build
 
 Agent:
 # C++ Build Resolution
@@ -163,9 +164,9 @@ The agent will stop and report if:
 
 ## Related Commands
 
-- `/cpp-test` - Run tests after build succeeds
-- `/cpp-review` - Review code quality
-- `/verify` - Full verification loop
+- `/ccp:cpp-test` - Run tests after build succeeds
+- `/ccp:cpp-review` - Review code quality
+- `/ccp:verify` - Full verification loop
 
 ## Related
 

package/src/commands/{cpp-review.md → ccp/cpp-review.md}

@@ -1,4 +1,5 @@
 ---
+name: ccp:cpp-review
 description: Comprehensive C++ code review for memory safety, modern C++ idioms, concurrency, and security. Invokes the cpp-reviewer agent.
 ---
 
@@ -17,7 +18,7 @@ This command invokes the **cpp-reviewer** agent for comprehensive C++-specific c
 
 ## When to Use
 
-Use `/cpp-review` when:
+Use `/ccp:cpp-review` when:
 - After writing or modifying C++ code
 - Before committing C++ changes
 - Reviewing pull requests with C++ code
@@ -64,7 +65,7 @@ cmake --build build -- -Wall -Wextra -Wpedantic
 ## Example Usage
 
 ```text
-User: /cpp-review
+User: /ccp:cpp-review
 
 Agent:
 # C++ Code Review Report
@@ -121,10 +122,10 @@ Recommendation: ❌ Block merge until CRITICAL issue is fixed
 
 ## Integration with Other Commands
 
-- Use `/cpp-test` first to ensure tests pass
-- Use `/cpp-build` if build errors occur
-- Use `/cpp-review` before committing
-- Use `/code-review` for non-C++ specific concerns
+- Use `/ccp:cpp-test` first to ensure tests pass
+- Use `/ccp:cpp-build` if build errors occur
+- Use `/ccp:cpp-review` before committing
+- Use `/ccp:code-review` for non-C++ specific concerns
 
 ## Related