# Navigate Portfolio Buddy Architecture

Portfolio Buddy changes require quick context about components, hooks, and data flow. This skill gives a concise project map for safer feature work.

## Install

```bash
npx skillstore add 5minfutures/architecture-reference
```

## Metadata

- Status: approved
- Slug: 5minfutures-architecture-reference
- Skillstore revision: r1
- Version status: missing
- Tree hash: 560e4031af0fbbfdfef3fd7f3f59ddb50b35c1e4d0c4d162abd200c86f26bd0d
- Author: 5MinFutures
- GitHub username: 5MinFutures
- License: MIT
- Repository: https://github.com/5MinFutures/futures-arena/tree/main/.claude/skills/architecture-reference
- Ref: 820ccb93d2e2fe828678ed05433bafd1054e5000
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/5minfutures-architecture-reference
- Manifest: https://skillstore.pages.dev/api/skills/5minfutures-architecture-reference/manifest

## Capabilities

- Explains the Portfolio Buddy 2 component hierarchy and major UI sections.
- Summarizes custom hooks for metrics, portfolio filtering, contract multipliers, and sorting.
- Documents data flow from CSV upload through Supabase storage and analytics rendering.
- Identifies utility functions for parsing, formatting, correlations, and trading calculations.
- Highlights refactoring targets, TypeScript patterns, and Chart.js usage constraints.

## Use Cases

- Onboard to Portfolio Buddy: Use the reference to learn the app layout, data path, and main hooks before editing code.
- Plan a Metrics Feature: Find where metric calculations, tables, sorting, and chart updates should be changed.
- Scope Refactoring Work: Review component size warnings and extraction targets before splitting large React components.

## Prompt Templates

### Find the Right File

```
Use the architecture reference to tell me which Portfolio Buddy files are relevant for adding a new displayed metric.
```

### Trace Data Flow

```
Explain the Portfolio Buddy upload and processing flow from CSV upload to metrics display.
```

### Plan a Hook Change

```
Use the architecture reference to plan changes for date-filtered portfolio analytics without introducing global state.
```

### Design a Refactor

```
Create a refactoring plan for PortfolioSection using the documented component size guidelines and Chart.js constraints.
```

## Limitations

- It is a static architecture reference, not a live code analyzer.
- It focuses on Portfolio Buddy 2 and may not fit unrelated projects.
- It does not validate current source files after repository changes.
- It does not execute tests or verify runtime behavior.

## Best Practices

- Use the reference before editing unfamiliar Portfolio Buddy components or hooks.
- Confirm source files still match the reference before making large changes.
- Keep new work aligned with the documented React hooks, TypeScript, and Chart.js patterns.

## Anti Patterns

- Do not treat the reference as proof that the current repository is unchanged.
- Do not introduce global state libraries when the reference calls for local hooks and props.
- Do not add Recharts-based charts when the project standard is Chart.js.

## Security Audit

- Audited at: 2026-07-20T17:14:44.481\+00:00
- Summary: All 75 static detections are false positives. The analyzer interpreted Markdown backticks and ordinary reference text as shell execution or reconnaissance. SKILL.md is a passive architecture guide with no executable instructions, network operations, or prompt-injection content.

## Stats

- Views: 256
- Downloads: 15
- Favorites: 0
- Popularity score: 0