---

name: planning-guidelines description: "Core planning principles for Portfolio Buddy 2 development. Use when: planning any feature implementation, modification, or refactoring. Ensures code preservation, mobile/desktop optimization, and thorough requirement gathering."

Planning Guidelines for Portfolio Buddy 2

Core Principles

When planning and implementing features for Portfolio Buddy 2, always follow these fundamental principles:

1. Preserve Existing Code - Default to extending rather than replacing
2. Optimize for Mobile & Desktop - Every feature must work well on both
3. Ask Clarifying Questions - Gather complete context before execution
4. Integrate Seamlessly - New code should feel native to the existing codebase

---

Code Preservation Strategy

Default Behavior: Always Preserve

Rule: Preserve existing code unless explicitly instructed to refactor or rewrite.

When implementing new features or fixes:

• ✅ Extend existing components
• ✅ Add new functions alongside existing ones
• ✅ Preserve existing patterns and conventions
• ✅ Maintain backward compatibility
• ❌ Don't refactor working code "just because"
• ❌ Don't introduce new patterns without justification

Exception: Massively Better Options

You MAY propose improvements to existing code ONLY when ALL conditions are met:

1. Very Low Risk - Change is isolated, well-understood, easily reversible
2. Massive Upside - Significant benefit (correctness, performance, maintainability)
3. No Unnecessary Complexity - Solution is simpler or equal complexity
4. Clear Justification - Can explain why exception applies

When exception applies, you MUST:

• Explain the problem with current implementation
• Show the proposed improvement
• Demonstrate why it meets all three criteria
• Get user approval before implementing

Real Example: Annual Growth Rate Fix

Situation: During implementation of Trading Days update, discovered Annual Growth Rate calculation was mathematically incorrect.

Current (incorrect) code:

Copyconst tradingPeriodDays = uniqueTradingDates.size || 1;  // 150 days
const annualGrowthRate = (totalPnl / startingCapital / tradingPeriodDays) * 365 * 100;
// Result: Inflated by mixing trading days (denominator) with calendar day annualization (365)

Why exception applied:

1. Very Low Risk ✅

   • Isolated calculation (one line)
   • Easy to understand (calendar days vs trading days)
   • Easily reversible if wrong

2. Massive Upside ✅

   • Fixes incorrect financial metric (accuracy critical)
   • Returns were inflated by ~2.4x
   • Aligns with financial industry standards

3. No Unnecessary Complexity ✅

   • Added 9 lines (calendar day calculation)
   • Clearer, more correct logic
   • No new dependencies

Result: User approved fix immediately because exception criteria were clearly met.

---

Mobile & Desktop Optimization

Every feature must be optimized for both mobile and desktop experiences.

Quick Reference Checklist

✅ Use Responsive Tailwind Classes

• Base styles for mobile (no prefix)
• sm: for small screens (640px+)
• md: for medium screens (768px+)
• lg: for large screens (1024px+)

✅ Touch Targets

• Minimum 44x44 pixels for all interactive elements
• Use touch-manipulation CSS class for better touch response

✅ Test Both Viewports

• Verify layout works on mobile and desktop before completion
• Check that text is readable on small screens
• Ensure buttons/inputs are appropriately sized

Existing Patterns to Follow

Portfolio Buddy 2 already has excellent responsive patterns. Reference these:

Example 1: Responsive Text Sizing

CopyclassName="text-xs sm:text-sm"        // Smaller on mobile
className="text-base sm:text-lg"      // Larger on desktop

Example 2: Responsive Spacing

CopyclassName="gap-1 sm:gap-2"           // Tighter gaps on mobile
className="px-2 sm:px-4 py-2 sm:py-3" // Smaller padding on mobile

Example 3: Responsive Layout

CopyclassName="flex flex-col sm:flex-row"  // Stack on mobile, row on desktop

Example 4: Responsive Visibility

Copy<span className="hidden sm:inline">Total Margin</span>  // Hide text on mobile, show on desktop

See: src/components/PortfolioSection.tsx for comprehensive examples of responsive patterns throughout the application.

---

Clarifying Questions Framework

When to Ask Questions

Ask clarifying questions BEFORE executing when:

• Requirements are ambiguous
• Multiple valid approaches exist
• Decision affects architecture or user experience
• User's request could be interpreted multiple ways
• You need context about business logic or domain knowledge

Question Format Template

Use this structure for ALL clarifying questions:

Copy## Clarifying Question: [Topic]

[Brief context about why you need to ask]

**Option A: [Approach Name]** ✅ (Recommended)
- [Detail about approach]
- [Key characteristics]
- **Pros:** [Benefits]
- **Cons:** [Trade-offs]
- **Why experts prefer this:** [Technical reasoning from domain expert perspective]

**Option B: [Alternative Approach]**
- [Detail about approach]
- [Key characteristics]
- **Pros:** [Benefits]
- **Cons:** [Trade-offs]
- **Trade-offs:** [Why this isn't the top choice]

**Option C: [Another Alternative]** (if applicable)
- [Detail about approach]
- [Key characteristics]
- **Pros:** [Benefits]
- **Cons:** [Trade-offs]
- **Trade-offs:** [Why this isn't the top choice]

Key Requirements

1. Mark Best Option - Use ✅ to indicate expert-recommended choice
2. Explain Reasoning - "Why experts prefer this" section required
3. Unbiased Options - Present all options fairly, let marking indicate preference
4. Complete Context - User should understand trade-offs without additional research

Real Example: Trading Days Calculation

From today's conversation about how to calculate Trading Days:

Copy## Clarifying Question 2: Trading Days Calculation with Date Filters

When the user sets a custom date range (Start Date/End Date), should Trading Days represent:

**Option A: The number of calendar days in the selected date range** ✅ (Recommended)
- Example: Jan 1 to Jan 31 = 31 days
- **Pros:** Simple, matches user's mental model of "days in range"
- **Cons:** Doesn't account for non-trading days
- **Why experts prefer this:** For portfolio analysis, calendar days provide accurate time-based performance metrics and match financial industry standards for annualized returns.

**Option B: The number of actual trading days (days with trades) within the date range**
- Example: Jan 1 to Jan 31 = only count days where trades occurred (e.g., 18 days)
- **Pros:** Reflects actual market activity
- **Cons:** Can be misleading - a strategy might not trade every day by design
- **Trade-offs:** Better for measuring trading frequency, not time-based performance

Outcome: User chose Option B, demonstrating how clear options enable informed decisions.

---

Decision Criteria

When to Preserve vs Improve

Use this decision tree:

CopyIs the code broken or incorrect?
├─ YES → Fix it (with explanation)
└─ NO → Is there a massively better option?
    ├─ YES → Does it meet ALL exception criteria?
    │   ├─ YES → Propose improvement (get approval)
    │   └─ NO → Preserve existing code
    └─ NO → Preserve existing code

Risk Assessment Checklist

Before proposing any change to existing code, verify:

• Change is isolated to specific files/functions
• No ripple effects on other features
• TypeScript compilation succeeds
• No breaking changes to interfaces
• Existing tests still pass (if tests exist)
• Can be reverted with single git revert

Complexity Evaluation

Avoid unnecessary complexity:

• ❌ Adding new libraries when existing ones suffice
• ❌ Introducing new patterns when existing patterns work
• ❌ Over-engineering simple features
• ❌ Premature optimization
• ✅ Using existing utilities and components
• ✅ Following established patterns
• ✅ Simple, readable solutions

---

Integration with Other Skills

This skill works alongside other Portfolio Buddy 2 skills:

• Use with planning-framework - Apply Musk's 5-step algorithm and ICE scoring for feature planning
• Reference coding-standards - Follow React 19 and TypeScript standards during implementation
• Check architecture-reference - Understand component hierarchy and existing patterns before adding code
• Consult migration-tracker - Verify feature parity and check for known issues before starting
• Load portfolio-context - Get tech stack and architectural constraints context

Workflow:

1. Load planning-guidelines (this skill) → Understand principles
2. Load planning-framework → Plan the feature approach
3. Check architecture-reference → Find where code goes
4. Apply coding-standards → Write the code correctly
5. Update migration-tracker → Document what was added

---

Real Portfolio Buddy 2 Examples

Example 1: Risk-Free Rate Default (Code Preservation)

Task: Set Risk-Free Rate default to 4%

Approach: Pure preservation

• Found existing code: useState<number>(0)
• Changed ONLY the default value: useState<number>(4)
• Preserved everything else: input field, validation, usage in Sortino Ratio
• Result: One line changed, zero risk

Example 2: Trading Days Update (Code Preservation)

Task: Make Trading Days recalculate when date range changes

Approach: Extend existing calculation

• Kept existing tradingPeriodDays variable and display
• Added new logic to count unique dates from filtered trades
• Preserved all downstream usage (Annual Growth Rate, etc.)
• Result: Extended, didn't replace

Example 3: Total Margin Button (Seamless Integration)

Task: Add "Set to Total Margin" button for Starting Capital

Approach: Mobile/desktop optimized integration

• Added button next to existing Starting Capital input
• Used existing Portfolio Buddy 2 responsive patterns:
  • className="flex items-center gap-1 sm:gap-2" (responsive spacing)
  • <span className="hidden sm:inline">Total Margin</span> (hide text on mobile)
  • className="h-3 w-3 sm:h-3.5 sm:w-3.5" (smaller icon on mobile)
  • touch-manipulation class for better mobile interaction
• Matched existing blue theme and styling
• Only appears when portfolioData exists (conditional rendering)
• Result: Feels native, works on both viewports

Example 4: Annual Growth Rate Fix (Exception Case)

Task: Originally just fixing Trading Days calculation

Discovery: Found Annual Growth Rate calculation was mathematically incorrect

Exception Applied:

• Very Low Risk: Isolated calculation, 9 lines added, clear logic
• Massive Upside: Fixed inflated returns (was ~2.4x too high), critical for financial accuracy
• No Complexity: Simpler logic (calendar days vs trading days), more maintainable

Approach:

1. Explained the problem clearly
2. Showed incorrect vs correct formula with examples
3. Demonstrated exception criteria were met
4. Got user approval
5. Implemented fix

Result: User approved immediately because criteria were objective and clearly met.

---

Summary

Always:

• Preserve existing code by default
• Optimize for mobile AND desktop
• Ask clarifying questions with ✅ marked recommendations
• Integrate seamlessly with existing patterns

Only when ALL criteria met:

• Propose improvements (low risk + massive upside + no added complexity)
• Get user approval before implementing

Never:

• Refactor working code without justification
• Add complexity unnecessarily
• Guess at requirements when you could ask
• Ignore mobile or desktop experience

---

This skill ensures Portfolio Buddy 2 remains maintainable, consistent, and user-friendly across all devices while preserving the stability of working code.