[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EJ0HAZ5JSXDCNCTAZQF8HT":3,"skill-same:01M6EJ0HAZ5JSXDCNCTAZQF8HT":65},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":39,"repositoryHtmlUrl":40,"repositoryHomepageUrl":41,"ownerHtmlUrl":42,"ownerBlogUrl":6,"ownerDescription":43,"updatedAt":44,"install":45,"resources":58},"01M6EJ0HAZ5JSXDCNCTAZQF8HT","planning-framework",null,"Apply structured thinking before coding. Use when: starting new features, making architectural decisions, refactoring large components, or evaluating implementation approaches. Includes Musk's 5-step algorithm and ICE scoring framework.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002F5minfutures\u002Fplanning-framework\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"planning","framework","planning framework","components","refactoring","coding","decisions","use","implementation","thinking","scoring","structured","2026-11-10 10:12:30",false,"---\nname: planning-framework\ndescription: \"Apply structured thinking before coding. Use when: starting new features, making architectural decisions, refactoring large components, or evaluating implementation approaches. Includes Musk's 5-step algorithm and ICE scoring framework.\"\n---\n\n# Planning Framework\n\n## When to Use\nBefore starting ANY significant coding task:\n- New features (> 50 lines of code)\n- Refactoring existing components\n- Architectural changes\n- Debugging complex issues\n\n## Musk's 5-Step Algorithm\n\n### Step 1: Make Requirements Less Dumb\n**Question everything:**\n- Who requested this feature? Why?\n- What problem does it actually solve?\n- Is there a simpler way to achieve the same outcome?\n- What happens if we don't build this?\n\n**Portfolio Buddy 2 Example**:\n> **Request**: \"Add sortable columns to metrics table\"\n>\n> **Questions**:\n> - Why? Users want to find best\u002Fworst performing strategies quickly\n> - Simpler solution? Just default sort by Sharpe Ratio (most important metric)\n> - Alternative? Add \"Top 3\" and \"Bottom 3\" highlight sections\n>\n> **Decision**: Implemented full multi-column sorting via `useSorting` hook because:\n> - Different users care about different metrics (Sharpe vs Sortino vs Max DD)\n> - Sorting is O(n log n) - negligible for \u003C100 strategies\n> - Reusable hook can be used in future tables\n\n### Step 2: Delete the Part or Process\n**What can we eliminate?**\n- Remove features that serve no clear purpose\n- Cut unnecessary steps in workflows\n- Simplify data structures\n- Delete unused dependencies\n\n**Rule**: If you don't add back 10% of what you deleted, you didn't delete enough.\n\n**Portfolio Buddy 2 Example**:\n> **Discovery**: Recharts library (11.5KB) installed but never imported\n>\n> **Questions**:\n> - Is it used anywhere? NO - search reveals zero imports\n> - Why was it installed? Probably initial plan, switched to Chart.js\n> - Can we delete it? YES - nothing depends on it\n>\n> **Action**: `npm uninstall recharts` (saves 11.5KB in bundle)\n>\n> **Result**: Cleaner dependency tree, faster installs, smaller bundle\n\n### Step 3: Simplify or Optimize\n**Only after deleting:**\n- Simplify remaining code\n- Extract reusable functions\n- Improve type safety\n- Reduce complexity\n\n**Portfolio Buddy 2 Example**:\n> **Problem**: PortfolioSection.tsx is 591 lines (3x the 200-line limit)\n>\n> **Before Optimization**:\n> ```typescript\n> function PortfolioSection() {\n>   \u002F\u002F 50 lines of contract multiplier logic\n>   \u002F\u002F 40 lines of date filtering logic\n>   \u002F\u002F 100 lines of Chart.js configuration\n>   \u002F\u002F 80 lines of statistics calculations\n>   \u002F\u002F 300+ lines of JSX rendering\n> }\n> ```\n>\n> **After Simplification**:\n> ```typescript\n> \u002F\u002F Extract hooks\n> const portfolio = usePortfolio(files, dateRange)\n> const contracts = useContractMultipliers(strategies)\n>\n> \u002F\u002F Extract components\n> \u003CContractControls {...contracts} \u002F>\n> \u003CEquityChartSection data={portfolio.equity} \u002F>\n> \u003CPortfolioStats metrics={portfolio.metrics} \u002F>\n> ```\n>\n> **Result**: Main component \u003C 100 lines, logic encapsulated, reusable\n\n### Step 4: Accelerate Cycle Time\n- Reduce build\u002Ftest time\n- Improve developer experience\n- Add helpful error messages\n- Optimize feedback loops\n\n**Portfolio Buddy 2 Example**:\n> **Before**: Create React App build time: ~30 seconds\n>\n> **Action**: Migrated to Vite\n>\n> **After**: Vite build time: ~2 seconds (15x faster)\n>\n> **Impact**: Developer can iterate 15x more per hour\n\n### Step 5: Automate\nLast step only - automate what's proven necessary.\n\n**Portfolio Buddy 2 Example**:\n> **Don't automate yet**: CI\u002FCD pipeline\n> - Manual Cloudflare deployments work fine for now\n> - Only deploying 2-3x per month\n> - Setting up GitHub Actions would take 2-4 hours\n> - Wait until deployment frequency increases\n>\n> **Should automate**: TypeScript checking on commit\n> - Would catch `any` type violations before merge\n> - Git pre-commit hook: `tsc --noEmit`\n> - Saves debugging time later\n\n## ICE Scoring Framework\n\nEvaluate solutions using:\n- **Impact**: How much does this move the needle? (1-10)\n- **Confidence**: How certain are we this will work? (1-10)\n- **Ease**: How simple to implement? (1-10)\n\n**ICE Score = (Impact × Confidence × Ease) \u002F 10**\n\n### Portfolio Buddy 2 Examples\n\n#### Example 1: Error Boundaries (High Priority)\n**Feature**: Add React error boundaries around risky components\n- **Impact**: 7 (prevents full app crashes from component errors)\n- **Confidence**: 9 (standard React pattern, well-documented)\n- **Ease**: 8 (wrapper component + fallback UI, ~50 lines)\n- **ICE Score**: (7 × 9 × 8) \u002F 10 = **50.4** → **HIGH PRIORITY**\n\n**Decision**: Should implement soon. Quick win, high impact.\n\n#### Example 2: Export to Excel (Medium-High Priority)\n**Feature**: Add Excel export button for metrics table\n- **Impact**: 8 (users explicitly requested it)\n- **Confidence**: 8 (libraries like xlsx exist, proven solution)\n- **Ease**: 7 (format data, generate file, trigger download)\n- **ICE Score**: (8 × 8 × 7) \u002F 10 = **44.8** → **HIGH PRIORITY**\n\n**Decision**: Worth implementing. Clear user value, reasonable effort.\n\n#### Example 3: Refactor PortfolioSection (Medium Priority)\n**Feature**: Split 591-line component into smaller pieces\n- **Impact**: 6 (improves maintainability, no user-facing change)\n- **Confidence**: 8 (clear extraction points identified)\n- **Ease**: 4 (tedious, 4-6 hours, risk of breaking things)\n- **ICE Score**: (6 × 8 × 4) \u002F 10 = **19.2** → **MEDIUM PRIORITY**\n\n**Decision**: Important for code health, but not urgent. Do after user-facing features.\n\n#### Example 4: Real-time Price Updates via WebSocket (Low Priority)\n**Feature**: Live market data updates in charts\n- **Impact**: 6 (nice to have, but app analyzes historical data)\n- **Confidence**: 5 (complex integration, data source needed)\n- **Ease**: 3 (WebSocket setup, state management, error handling)\n- **ICE Score**: (6 × 5 × 3) \u002F 10 = **9** → **LOW PRIORITY**\n\n**Decision**: Skip for now. Doesn't fit core use case (historical analysis).\n\n#### Example 5: Remove Recharts Dependency (Quick Win)\n**Feature**: Uninstall unused Recharts library\n- **Impact**: 3 (small bundle size reduction, cleaner deps)\n- **Confidence**: 10 (confirmed never imported anywhere)\n- **Ease**: 10 (one command: `npm uninstall recharts`)\n- **ICE Score**: (3 × 10 × 10) \u002F 10 = **30** → **MEDIUM PRIORITY**\n\n**Decision**: Easy quick win. Do it next time touching package.json.\n\n#### Example 6: Sortino Ratio Calculation (Completed)\n**Feature**: Add Sortino Ratio metric (already completed)\n- **Impact**: 8 (important risk-adjusted metric for traders)\n- **Confidence**: 9 (well-defined formula, similar to Sharpe)\n- **Ease**: 7 (calculation + UI + risk-free rate input)\n- **ICE Score**: (8 × 9 × 7) \u002F 10 = **50.4** → **HIGH PRIORITY**\n\n**Result**: Successfully implemented in commits 258ba3a & 9f25040.\n\n### ICE Score Interpretation\n\n| ICE Score Range | Priority | Action |\n|-----------------|----------|--------|\n| 40+ | High | Do soon, within 1-2 sprints |\n| 25-39 | Medium-High | Plan for next 2-3 sprints |\n| 15-24 | Medium | Backlog, do when capacity available |\n| 10-14 | Low | Consider if very easy or strategic |\n| \u003C 10 | Very Low | Probably skip unless requirements change |\n\n## Planning Checklist\n\nBefore coding:\n- [ ] Applied Step 1: Questioned requirements thoroughly\n- [ ] Applied Step 2: Identified what can be deleted\u002Fsimplified\n- [ ] Calculated ICE score (for features > 100 lines)\n- [ ] Confirmed simpler solution doesn't exist\n- [ ] Identified which components\u002Fhooks will be affected\n- [ ] Checked for existing similar functionality in codebase\n- [ ] Reviewed related code to understand context\n\nAfter planning:\n- [ ] Written approach in 3-5 bullet points\n- [ ] Identified potential issues\u002Fedge cases\n- [ ] Estimated time realistically (multiply initial guess by 2)\n- [ ] Confirmed TypeScript types are planned (no `any`)\n- [ ] Verified component won't exceed 200 lines\n\n## Portfolio Buddy 2 Planning Examples\n\n### Example: Adding Sortino Ratio (Completed Feature)\n\n**Step 1 - Requirements**:\n- Users need Sortino Ratio alongside Sharpe Ratio\n- Sortino focuses on downside risk (more relevant for traders)\n- Requires risk-free rate input\n\n**Step 2 - Delete**:\n- Don't need separate page for advanced metrics\n- Don't need tutorial\u002Fhelp text (formula is standard)\n\n**Step 3 - Simplify**:\n- Add single risk-free rate input (not per-strategy)\n- Calculate in existing `calculateMetrics()` function\n- Add column to existing MetricsTable\n\n**ICE Score**: 50.4 (High Priority)\n\n**Approach**:\n1. Add `calculateSortino()` to dataUtils.ts\n2. Include Sortino in metrics calculation\n3. Add risk-free rate input to PortfolioSection\n4. Add Sortino column to MetricsTable\n5. Test with sample data\n\n**Time Estimate**: 3-4 hours\n\n**Result**: Completed successfully, but found calculation bug (commit 9f25040 fixed it).\n\n**Implementation Note**: Sortino was implemented inline in PortfolioSection.tsx (lines 133-158) rather than in dataUtils.ts. This decision was made because:\n- Sortino requires portfolio-level daily returns (not trade-level metrics)\n- Needs user input state (risk-free rate)\n- Different calculation context than win rate, profit factor, etc.\n- Team should discuss whether to extract to dataUtils for consistency\n\n### Example: Refactoring PortfolioSection (Future Work)\n\n**Step 1 - Requirements**:\n- Component is 591 lines (3x limit)\n- Hard to maintain and understand\n- Want to follow coding standards\n\n**Step 2 - Delete**:\n- Review for duplicate logic\n- Remove commented-out code\n- Consolidate similar state handlers\n\n**Step 3 - Simplify**:\n- Extract `ContractControls.tsx` (contract multiplier UI)\n- Extract `EquityChartSection.tsx` (Chart.js config)\n- Extract `PortfolioStats.tsx` (statistics display)\n- Keep only orchestration in main component\n\n**ICE Score**: 19.2 (Medium Priority)\n\n**Approach**:\n1. Create EquityChartSection component (150 lines)\n2. Create PortfolioStats component (80 lines)\n3. Create ContractControls component (100 lines)\n4. Refactor main PortfolioSection to \u003C100 lines\n5. Test all functionality still works\n\n**Time Estimate**: 4-6 hours (tedious but straightforward)\n\n**Risks**:\n- Breaking existing functionality\n- Props drilling if not careful\n- Testing all edge cases\n\n**Decision**: Medium priority. Do after more urgent user-facing features.\n\n### Example: Vitest Testing Setup (Future Work)\n\n**Step 1 - Requirements**:\n- No tests currently\n- Critical calculations need testing (Sharpe, Sortino, correlation)\n- Prevent regressions in metric calculations\n\n**Step 2 - Delete**:\n- Don't need 100% coverage\n- Skip UI\u002Fcomponent testing for now\n- Focus only on calculation functions\n\n**Step 3 - Simplify**:\n- Test only dataUtils.ts functions\n- Use Vitest (built-in with Vite)\n- Mock data from real CSV files\n\n**ICE Score**: 24 (Medium Priority)\n\n**Approach**:\n1. Install Vitest: `npm install -D vitest`\n2. Add test script to package.json\n3. Create `dataUtils.test.ts`\n4. Write tests for critical calculations\n5. Run tests in CI eventually\n\n**Time Estimate**: 6-8 hours (learning curve + writing tests)\n\n**Tests to Write**:\n- `calculateSharpe()` with known data\n- `calculateSortino()` with known data\n- `calculateCorrelation()` edge cases\n- `parseCSV()` error handling\n\n## Red Flags to Watch For\n\n### During Planning\n- ❌ \"This will only take 30 minutes\" (usually takes 2-3 hours)\n- ❌ \"I'll just use `any` types for now\" (technical debt accumulates)\n- ❌ \"We might need this later\" (YAGNI - You Aren't Gonna Need It)\n- ❌ \"Everyone does it this way\" (verify it fits your use case)\n\n### During Implementation\n- ❌ Component approaching 200 lines (refactor NOW, not later)\n- ❌ Duplicating logic from another file (extract to shared utility)\n- ❌ Adding dependency without checking size\u002Falternatives\n- ❌ No error handling (\"will add later\" = never happens)\n\n### Portfolio Buddy 2 Lessons\n- ✅ **Did well**: Questioned need for Redux, used plain React hooks instead\n- ✅ **Did well**: Chose Chart.js over Recharts after testing both\n- ❌ **Should improve**: Let PortfolioSection grow to 591 lines\n- ❌ **Should improve**: Accumulated 14 `any` type violations\n\n## Framework in Action\n\n**When you're about to start coding, ask**:\n1. What am I building? (clear requirement)\n2. Why am I building it? (real problem to solve)\n3. What can I delete? (remove unnecessary parts)\n4. What's the simplest version? (MVP approach)\n5. How confident am I? (ICE scoring)\n6. What's the time estimate? (be realistic, multiply by 2)\n\n**Then write your plan as**:\n- 3-5 bullet point approach\n- Time estimate\n- Files that will change\n- Potential issues\n\n**Finally**:\n- Get feedback if >4 hours of work\n- Start with smallest testable increment\n- Commit frequently","# Planning Framework\n\n## When to Use\nBefore starting ANY significant coding task:\n- New features (> 50 lines of code)\n- Refactoring existing components\n- Architectural changes\n- Debugging complex issues\n\n## Musk's 5-Step Algorithm\n\n### Step 1: Make Requirements Less Dumb\n**Question everything:**\n- Who requested this feature? Why?\n- What problem does it actually solve?\n- Is there a simpler way to achieve the same outcome?\n- What happens if we don't build this?\n\n**Portfolio Buddy 2 Example**:\n> **Request**: \"Add sortable columns to metrics table\"\n>\n> **Questions**:\n> - Why? Users want to find best\u002Fworst performing strategies quickly\n> - Simpler solution? Just default sort by Sharpe Ratio (most important metric)\n> - Alternative? Add \"Top 3\" and \"Bottom 3\" highlight sections\n>\n> **Decision**: Implemented full multi-column sorting via `useSorting` hook because:\n> - Different users care about different metrics (Sharpe vs Sortino vs Max DD)\n> - Sorting is O(n log n) - negligible for \u003C100 strategies\n> - Reusable hook can be used in future tables\n\n### Step 2: Delete the Part or Process\n**What can we eliminate?**\n- Remove features that serve no clear purpose\n- Cut unnecessary steps in workflows\n- Simplify data structures\n- Delete unused dependencies\n\n**Rule**: If you don't add back 10% of what you deleted, you didn't delete enough.\n\n**Portfolio Buddy 2 Example**:\n> **Discovery**: Recharts library (11.5KB) installed but never imported\n>\n> **Questions**:\n> - Is it used anywhere? NO - search reveals zero imports\n> - Why was it installed? Probably initial plan, switched to Chart.js\n> - Can we delete it? YES - nothing depends on it\n>\n> **Action**: `npm uninstall recharts` (saves 11.5KB in bundle)\n>\n> **Result**: Cleaner dependency tree, faster installs, smaller bundle\n\n### Step 3: Simplify or Optimize\n**Only after deleting:**\n- Simplify remaining code\n- Extract reusable functions\n- Improve type safety\n- Reduce complexity\n\n**Portfolio Buddy 2 Example**:\n> **Problem**: PortfolioSection.tsx is 591 lines (3x the 200-line limit)\n>\n> **Before Optimization**:\n> ```typescript\n> function PortfolioSection() {\n>   \u002F\u002F 50 lines of contract multiplier logic\n>   \u002F\u002F 40 lines of date filtering logic\n>   \u002F\u002F 100 lines of Chart.js configuration\n>   \u002F\u002F 80 lines of statistics calculations\n>   \u002F\u002F 300+ lines of JSX rendering\n> }\n> ```\n>\n> **After Simplification**:\n> ```typescript\n> \u002F\u002F Extract hooks\n> const portfolio = usePortfolio(files, dateRange)\n> const contracts = useContractMultipliers(strategies)\n>\n> \u002F\u002F Extract components\n> \u003CContractControls {...contracts} \u002F>\n> \u003CEquityChartSection data={portfolio.equity} \u002F>\n> \u003CPortfolioStats metrics={portfolio.metrics} \u002F>\n> ```\n>\n> **Result**: Main component \u003C 100 lines, logic encapsulated, reusable\n\n### Step 4: Accelerate Cycle Time\n- Reduce build\u002Ftest time\n- Improve developer experience\n- Add helpful error messages\n- Optimize feedback loops\n\n**Portfolio Buddy 2 Example**:\n> **Before**: Create React App build time: ~30 seconds\n>\n> **Action**: Migrated to Vite\n>\n> **After**: Vite build time: ~2 seconds (15x faster)\n>\n> **Impact**: Developer can iterate 15x more per hour\n\n### Step 5: Automate\nLast step only - automate what's proven necessary.\n\n**Portfolio Buddy 2 Example**:\n> **Don't automate yet**: CI\u002FCD pipeline\n> - Manual Cloudflare deployments work fine for now\n> - Only deploying 2-3x per month\n> - Setting up GitHub Actions would take 2-4 hours\n> - Wait until deployment frequency increases\n>\n> **Should automate**: TypeScript checking on commit\n> - Would catch `any` type violations before merge\n> - Git pre-commit hook: `tsc --noEmit`\n> - Saves debugging time later\n\n## ICE Scoring Framework\n\nEvaluate solutions using:\n- **Impact**: How much does this move the needle? (1-10)\n- **Confidence**: How certain are we this will work? (1-10)\n- **Ease**: How simple to implement? (1-10)\n\n**ICE Score = (Impact × Confidence × Ease) \u002F 10**\n\n### Portfolio Buddy 2 Examples\n\n#### Example 1: Error Boundaries (High Priority)\n**Feature**: Add React error boundaries around risky components\n- **Impact**: 7 (prevents full app crashes from component errors)\n- **Confidence**: 9 (standard React pattern, well-documented)\n- **Ease**: 8 (wrapper component + fallback UI, ~50 lines)\n- **ICE Score**: (7 × 9 × 8) \u002F 10 = **50.4** → **HIGH PRIORITY**\n\n**Decision**: Should implement soon. Quick win, high impact.\n\n#### Example 2: Export to Excel (Medium-High Priority)\n**Feature**: Add Excel export button for metrics table\n- **Impact**: 8 (users explicitly requested it)\n- **Confidence**: 8 (libraries like xlsx exist, proven solution)\n- **Ease**: 7 (format data, generate file, trigger download)\n- **ICE Score**: (8 × 8 × 7) \u002F 10 = **44.8** → **HIGH PRIORITY**\n\n**Decision**: Worth implementing. Clear user value, reasonable effort.\n\n#### Example 3: Refactor PortfolioSection (Medium Priority)\n**Feature**: Split 591-line component into smaller pieces\n- **Impact**: 6 (improves maintainability, no user-facing change)\n- **Confidence**: 8 (clear extraction points identified)\n- **Ease**: 4 (tedious, 4-6 hours, risk of breaking things)\n- **ICE Score**: (6 × 8 × 4) \u002F 10 = **19.2** → **MEDIUM PRIORITY**\n\n**Decision**: Important for code health, but not urgent. Do after user-facing features.\n\n#### Example 4: Real-time Price Updates via WebSocket (Low Priority)\n**Feature**: Live market data updates in charts\n- **Impact**: 6 (nice to have, but app analyzes historical data)\n- **Confidence**: 5 (complex integration, data source needed)\n- **Ease**: 3 (WebSocket setup, state management, error handling)\n- **ICE Score**: (6 × 5 × 3) \u002F 10 = **9** → **LOW PRIORITY**\n\n**Decision**: Skip for now. Doesn't fit core use case (historical analysis).\n\n#### Example 5: Remove Recharts Dependency (Quick Win)\n**Feature**: Uninstall unused Recharts library\n- **Impact**: 3 (small bundle size reduction, cleaner deps)\n- **Confidence**: 10 (confirmed never imported anywhere)\n- **Ease**: 10 (one command: `npm uninstall recharts`)\n- **ICE Score**: (3 × 10 × 10) \u002F 10 = **30** → **MEDIUM PRIORITY**\n\n**Decision**: Easy quick win. Do it next time touching package.json.\n\n#### Example 6: Sortino Ratio Calculation (Completed)\n**Feature**: Add Sortino Ratio metric (already completed)\n- **Impact**: 8 (important risk-adjusted metric for traders)\n- **Confidence**: 9 (well-defined formula, similar to Sharpe)\n- **Ease**: 7 (calculation + UI + risk-free rate input)\n- **ICE Score**: (8 × 9 × 7) \u002F 10 = **50.4** → **HIGH PRIORITY**\n\n**Result**: Successfully implemented in commits 258ba3a & 9f25040.\n\n### ICE Score Interpretation\n\n| ICE Score Range | Priority | Action |\n|-----------------|----------|--------|\n| 40+ | High | Do soon, within 1-2 sprints |\n| 25-39 | Medium-High | Plan for next 2-3 sprints |\n| 15-24 | Medium | Backlog, do when capacity available |\n| 10-14 | Low | Consider if very easy or strategic |\n| \u003C 10 | Very Low | Probably skip unless requirements change |\n\n## Planning Checklist\n\nBefore coding:\n- [ ] Applied Step 1: Questioned requirements thoroughly\n- [ ] Applied Step 2: Identified what can be deleted\u002Fsimplified\n- [ ] Calculated ICE score (for features > 100 lines)\n- [ ] Confirmed simpler solution doesn't exist\n- [ ] Identified which components\u002Fhooks will be affected\n- [ ] Checked for existing similar functionality in codebase\n- [ ] Reviewed related code to understand context\n\nAfter planning:\n- [ ] Written approach in 3-5 bullet points\n- [ ] Identified potential issues\u002Fedge cases\n- [ ] Estimated time realistically (multiply initial guess by 2)\n- [ ] Confirmed TypeScript types are planned (no `any`)\n- [ ] Verified component won't exceed 200 lines\n\n## Portfolio Buddy 2 Planning Examples\n\n### Example: Adding Sortino Ratio (Completed Feature)\n\n**Step 1 - Requirements**:\n- Users need Sortino Ratio alongside Sharpe Ratio\n- Sortino focuses on downside risk (more relevant for traders)\n- Requires risk-free rate input\n\n**Step 2 - Delete**:\n- Don't need separate page for advanced metrics\n- Don't need tutorial\u002Fhelp text (formula is standard)\n\n**Step 3 - Simplify**:\n- Add single risk-free rate input (not per-strategy)\n- Calculate in existing `calculateMetrics()` function\n- Add column to existing MetricsTable\n\n**ICE Score**: 50.4 (High Priority)\n\n**Approach**:\n1. Add `calculateSortino()` to dataUtils.ts\n2. Include Sortino in metrics calculation\n3. Add risk-free rate input to PortfolioSection\n4. Add Sortino column to MetricsTable\n5. Test with sample data\n\n**Time Estimate**: 3-4 hours\n\n**Result**: Completed successfully, but found calculation bug (commit 9f25040 fixed it).\n\n**Implementation Note**: Sortino was implemented inline in PortfolioSection.tsx (lines 133-158) rather than in dataUtils.ts. This decision was made because:\n- Sortino requires portfolio-level daily returns (not trade-level metrics)\n- Needs user input state (risk-free rate)\n- Different calculation context than win rate, profit factor, etc.\n- Team should discuss whether to extract to dataUtils for consistency\n\n### Example: Refactoring PortfolioSection (Future Work)\n\n**Step 1 - Requirements**:\n- Component is 591 lines (3x limit)\n- Hard to maintain and understand\n- Want to follow coding standards\n\n**Step 2 - Delete**:\n- Review for duplicate logic\n- Remove commented-out code\n- Consolidate similar state handlers\n\n**Step 3 - Simplify**:\n- Extract `ContractControls.tsx` (contract multiplier UI)\n- Extract `EquityChartSection.tsx` (Chart.js config)\n- Extract `PortfolioStats.tsx` (statistics display)\n- Keep only orchestration in main component\n\n**ICE Score**: 19.2 (Medium Priority)\n\n**Approach**:\n1. Create EquityChartSection component (150 lines)\n2. Create PortfolioStats component (80 lines)\n3. Create ContractControls component (100 lines)\n4. Refactor main PortfolioSection to \u003C100 lines\n5. Test all functionality still works\n\n**Time Estimate**: 4-6 hours (tedious but straightforward)\n\n**Risks**:\n- Breaking existing functionality\n- Props drilling if not careful\n- Testing all edge cases\n\n**Decision**: Medium priority. Do after more urgent user-facing features.\n\n### Example: Vitest Testing Setup (Future Work)\n\n**Step 1 - Requirements**:\n- No tests currently\n- Critical calculations need testing (Sharpe, Sortino, correlation)\n- Prevent regressions in metric calculations\n\n**Step 2 - Delete**:\n- Don't need 100% coverage\n- Skip UI\u002Fcomponent testing for now\n- Focus only on calculation functions\n\n**Step 3 - Simplify**:\n- Test only dataUtils.ts functions\n- Use Vitest (built-in with Vite)\n- Mock data from real CSV files\n\n**ICE Score**: 24 (Medium Priority)\n\n**Approach**:\n1. Install Vitest: `npm install -D vitest`\n2. Add test script to package.json\n3. Create `dataUtils.test.ts`\n4. Write tests for critical calculations\n5. Run tests in CI eventually\n\n**Time Estimate**: 6-8 hours (learning curve + writing tests)\n\n**Tests to Write**:\n- `calculateSharpe()` with known data\n- `calculateSortino()` with known data\n- `calculateCorrelation()` edge cases\n- `parseCSV()` error handling\n\n## Red Flags to Watch For\n\n### During Planning\n- ❌ \"This will only take 30 minutes\" (usually takes 2-3 hours)\n- ❌ \"I'll just use `any` types for now\" (technical debt accumulates)\n- ❌ \"We might need this later\" (YAGNI - You Aren't Gonna Need It)\n- ❌ \"Everyone does it this way\" (verify it fits your use case)\n\n### During Implementation\n- ❌ Component approaching 200 lines (refactor NOW, not later)\n- ❌ Duplicating logic from another file (extract to shared utility)\n- ❌ Adding dependency without checking size\u002Falternatives\n- ❌ No error handling (\"will add later\" = never happens)\n\n### Portfolio Buddy 2 Lessons\n- ✅ **Did well**: Questioned need for Redux, used plain React hooks instead\n- ✅ **Did well**: Chose Chart.js over Recharts after testing both\n- ❌ **Should improve**: Let PortfolioSection grow to 591 lines\n- ❌ **Should improve**: Accumulated 14 `any` type violations\n\n## Framework in Action\n\n**When you're about to start coding, ask**:\n1. What am I building? (clear requirement)\n2. Why am I building it? (real problem to solve)\n3. What can I delete? (remove unnecessary parts)\n4. What's the simplest version? (MVP approach)\n5. How confident am I? (ICE scoring)\n6. What's the time estimate? (be realistic, multiply by 2)\n\n**Then write your plan as**:\n- 3-5 bullet point approach\n- Time estimate\n- Files that will change\n- Potential issues\n\n**Finally**:\n- Get feedback if >4 hours of work\n- Start with smallest testable increment\n- Commit frequently",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002F5minfutures\u002Fplanning-framework",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill planning-framework",{"tool":51,"command":52},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill planning-framework",{"tool":54,"command":55},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill planning-framework","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002F5minfutures\u002Fplanning-framework\u002FSKILL.md",true,[59],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"skill-report.json","REFERENCE","参考文档",12060,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002F5minfutures\u002Fplanning-framework\u002Fskill-report.json",[66,80,90,99,105,112],{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":31},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[77,78,79],"model","model hierarchy","model hierarchy skill",{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":86,"publishedAt":31},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[85],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[87,88,89],"MCP","zoom","zoom mcp",{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":31},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[96,97,98,88],"sdk","zoom apps sdk","apps",{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":31},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[101],{"skillNo":106,"name":107,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":111,"publishedAt":31},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[110],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[107],{"skillNo":113,"name":114,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":31},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[114]]