Get the FREE Ultimate OpenClaw Setup Guide →

portfolio-context

npx machina-cli add skill aiskillstore/marketplace/portfolio-context --openclaw
Files (1)
SKILL.md
4.8 KB

Portfolio Buddy 2 - Project Context

Tech Stack

  • Frontend: React 19, TypeScript, Vite
  • UI: Tailwind CSS, shadcn/ui (color system only)
  • Charts: Chart.js, react-chartjs-2, chartjs plugins (zoom, annotation, date adapter)
  • State: Plain React (useState, useMemo, useCallback)
  • Data Utils: date-fns for date manipulation
  • Backend: Supabase (PostgreSQL)
  • Deployment: Cloudflare Pages

Project Purpose

Portfolio analysis tool for investors and futures traders to:

  • Compare trading strategies vs benchmark assets (SPY, GLD)
  • Calculate correlation matrices between assets (Spearman & Pearson)
  • Analyze risk metrics and performance (Sharpe, Sortino, Max DD, etc.)
  • Upload trade data via CSV and visualize results
  • Apply contract multipliers to adjust metrics for futures trading
  • Filter data by date range for period-specific analysis

Known Issues & Tech Debt

Current Tech Debt

  1. Unused Dependency: Recharts (11.5KB) installed but never imported

    • Should be removed from package.json
    • Currently using Chart.js instead

  2. Oversized Components: Violate 200-line standard

    • PortfolioSection.tsx (591 lines) → needs refactoring into subcomponents
    • App.tsx (351 lines) → extract sections into components
    • MetricsTable.tsx (242 lines) → improved but still over limit

  3. TypeScript Violations: 15 instances of any type

    • usePortfolio.ts: 11 occurrences in trade/metrics types
    • useMetrics.ts: 4 occurrences in sort comparisons
    • dataUtils.ts: 1 occurrence in Metrics interface

Known Bugs

  1. Supabase Upload Errors: Intermittent 500 errors on large uploads
    • Enhanced error handling added in commit 9fb7fdb
    • Check error handling in upload hooks
    • Verify row limits aren't exceeded on free tier

Recent Features Added

  • Sortino Ratio Calculation (commits 258ba3a, 9f25040)
    • Location: Implemented inline in PortfolioSection.tsx (lines 133-158)
    • Risk-free rate input state for user-specified risk-free rate
    • Annualized downside deviation using sqrt(365) factor
    • Corrected variance calculation (divides by total returns, not just negative)
    • Displayed in portfolio stats section (line 535)
    • Note: NOT in dataUtils.ts - kept in component due to portfolio-level context
  • Date Range Filtering (commit 258ba3a)
    • Filter portfolio data by start/end date
    • Implemented in usePortfolio hook
  • Advanced Multi-Column Sorting (useSorting hook)
    • Sort by multiple columns with priority
    • Custom comparison logic per column

Architectural Constraints

  • Component Limit: Max 200 lines per component (currently violated by 3 components)
  • Hook Pattern: Custom hooks in /src/hooks/
  • Utils Pattern: Pure functions in /src/utils/
  • Type Safety: Strict TypeScript, no any types (15 violations exist as tech debt)
  • State Management: Plain React hooks only - no Zustand or TanStack Query

Key Components Structure

src/
├── components/
│   ├── AnalyticsControls.tsx     (toggle Metrics/Portfolio/Correlation views)
│   ├── ContractInput.tsx         (contract multiplier inputs)
│   ├── CorrelationHeatmap.tsx    (correlation visualization)
│   ├── CorrelationSection.tsx    (correlation analysis wrapper)
│   ├── CustomTooltip.tsx         (chart tooltips)
│   ├── ErrorList.tsx             (error display)
│   ├── Header.tsx                (app header)
│   ├── MasterContractControl.tsx (apply contract value to all)
│   ├── MetricsTable.tsx          (metrics display & selection)
│   ├── PortfolioSection.tsx      (portfolio charts & analysis - 591 lines!)
│   ├── SessionComplete.tsx       (completion UI)
│   ├── SortableHeader.tsx        (table header with sort indicators)
│   ├── UploadedFilesList.tsx     (list of uploaded files)
│   └── UploadSection.tsx         (file upload to Supabase)
├── hooks/
│   ├── useContractMultipliers.ts (manage contract multipliers)
│   ├── useMetrics.ts             (calculate trading metrics)
│   ├── usePortfolio.ts           (portfolio data & date filtering)
│   └── useSorting.ts             (advanced multi-column sorting)
└── utils/
    └── dataUtils.ts              (metric calculations, CSV parsing, correlations)

Migration Context

Migrating 40 features from old app (35/40 completed). See migration-tracker skill for details.

Source

git clone https://github.com/aiskillstore/marketplace/blob/main/skills/5minfutures/portfolio-context/SKILL.mdView on GitHub

Overview

Auto-loaded context for Portfolio Buddy 2 development. Use this context for any task involving React 19 development, TypeScript, portfolio analysis features, metrics calculations, or trading-strategy comparisons within the Portfolio Buddy 2 codebase. It includes the tech stack, known issues, and architectural constraints to guide implementation and debugging.

How This Skill Works

This skill provides a centralized, task-ready reference that encapsulates the Portfolio Buddy 2 tech stack, architectural rules, known issues, and debt. When you work on features or debugging, consult this context to align your code with the project’s structure (hooks-based state, pure utilities, TS safety) and deployment specifics (Supabase, Cloudflare Pages, Vite).

When to Use It

  • Starting a React 19 + TypeScript task in the Portfolio Buddy 2 codebase
  • Implementing or validating portfolio analysis features and metrics calculations
  • Comparing trading strategies against benchmarks (e.g., SPY, GLD) within the app
  • Refactoring oversized components to meet the 200-line limit (e.g., PortfolioSection.tsx, App.tsx, MetricsTable.tsx)
  • Auditing for known issues and architectural constraints (tech debt, TS 'any' violations, unused dependencies)

Quick Start

  1. Step 1: Load this portfolio-context before starting any Portfolio Buddy 2 task
  2. Step 2: Review the tech stack, known issues, and architectural constraints
  3. Step 3: Proceed with development, referencing the context to stay aligned with project practices

Best Practices

  • Prioritize reducing oversized components (target 200 lines) and refactor into subcomponents
  • Remove unused dependencies (e.g., Recharts) and rely on the existing Chart.js ecosystem
  • Enforce strict TypeScript safety; address all 'any' type violations across usePortfolio, useMetrics, and dataUtils
  • Follow the project’s hook pattern in /src/hooks/ and keep utilities pure in /src/utils
  • Leverage date-fns for date handling and ensure date-range filtering aligns with usePortfolio

Example Use Cases

  • Audit PortfolioSection.tsx to split into smaller components and reduce line count
  • Add and validate Sortino ratio inline in portfolio stats as described (risk metrics exposure)
  • Improve error handling for large Supabase uploads and verify row limits on the free tier
  • Remove an unused Recharts dependency and ensure Chart.js is the sole chart library
  • Update date range filtering in the usePortfolio hook and verify results across time windows

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗