jpskill.com
🛠️ 開発・MCP コミュニティ

portfolio-context

Portfolio Buddy 2の開発に関するReact 19、TypeScript、ポートフォリオ分析、指標計算、取引戦略比較、コードベース操作など、あらゆるタスクで技術スタックや既知の問題、構造上の制約を考慮して作業を効率化するSkill。

📜 元の英語説明(参考)

Auto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Portfolio Buddy 2の開発に関するReact 19、TypeScript、ポートフォリオ分析、指標計算、取引戦略比較、コードベース操作など、あらゆるタスクで技術スタックや既知の問題、構造上の制約を考慮して作業を効率化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o portfolio-context.zip https://jpskill.com/download/16753.zip && unzip -o portfolio-context.zip && rm portfolio-context.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16753.zip -OutFile "$d\portfolio-context.zip"; Expand-Archive "$d\portfolio-context.zip" -DestinationPath $d -Force; ri "$d\portfolio-context.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して portfolio-context.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → portfolio-context フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Portfolio Buddy 2 - プロジェクトのコンテキスト

技術スタック

  • フロントエンド: React 19, TypeScript, Vite
  • UI: Tailwind CSS, shadcn/ui (カラーシステムのみ)
  • チャート: Chart.js, react-chartjs-2, chartjs plugins (zoom, annotation, date adapter)
  • 状態管理: プレーンな React (useState, useMemo, useCallback)
  • データユーティリティ: date-fns (日付操作)
  • バックエンド: Supabase (PostgreSQL)
  • デプロイメント: Cloudflare Pages

プロジェクトの目的

投資家および先物トレーダー向けのポートフォリオ分析ツール：

  • トレーディング戦略とベンチマーク資産（SPY、GLD）の比較
  • 資産間の相関行列の計算（Spearman & Pearson）
  • リスク指標とパフォーマンスの分析（Sharpe、Sortino、Max DDなど）
  • CSV経由での取引データのアップロードと結果の可視化
  • 先物取引の指標を調整するための契約乗数の適用
  • 期間固有の分析のための日付範囲によるデータのフィルタリング

既知の問題と技術的負債

現在の技術的負債

  1. 未使用の依存関係: Recharts (11.5KB) がインストールされているが、一度もインポートされていない

    • package.json から削除する必要がある
    • 現在は Chart.js を代わりに使用している

  2. 肥大化したコンポーネント: 200行の標準に違反

    • PortfolioSection.tsx (591行) → サブコンポーネントへのリファクタリングが必要
    • App.tsx (351行) → セクションをコンポーネントに抽出
    • MetricsTable.tsx (242行) → 改善されたが、まだ制限を超えている

  3. TypeScript の違反: any 型のインスタンスが15件

    • usePortfolio.ts: 取引/指標の型で11件
    • useMetrics.ts: ソート比較で4件
    • dataUtils.ts: Metrics インターフェースで1件

既知のバグ

  1. Supabase アップロードエラー: 大量のアップロードで断続的な 500 エラーが発生
    • コミット 9fb7fdb でエラー処理を強化
    • アップロードフックのエラー処理を確認
    • 無料プランで、行数制限を超えていないか確認

最近追加された機能

  • Sortinoレシオの計算 (コミット 258ba3a, 9f25040)
    • 場所: PortfolioSection.tsx にインラインで実装 (133-158行目)
    • ユーザー指定の無リスク金利のための無リスク金利入力状態
    • sqrt(365) ファクターを使用した年換算された下方偏差
    • 修正された分散計算（負のリターンだけでなく、総リターンで除算）
    • ポートフォリオ統計セクションに表示 (535行目)
    • 注: dataUtils.ts にはない - ポートフォリオレベルのコンテキストのため、コンポーネント内に保持
  • 日付範囲フィルタリング (コミット 258ba3a)
    • 開始/終了日でポートフォリオデータをフィルタリング
    • usePortfolio フックに実装
  • 高度な複数列ソート (useSorting フック)
    • 優先度付きの複数列でソート
    • 列ごとのカスタム比較ロジック

アーキテクチャ上の制約

  • コンポーネント制限: コンポーネントあたり最大200行 (現在、3つのコンポーネントが違反)
  • フックパターン: /src/hooks/ 内のカスタムフック
  • ユーティリティパターン: /src/utils/ 内の純粋関数
  • 型安全性: 厳密な TypeScript、any 型なし (技術的負債として15件の違反が存在)
  • 状態管理: プレーンな React フックのみ - Zustand または TanStack Query は使用しない

主要なコンポーネント構造

src/
├── components/
│   ├── AnalyticsControls.tsx     (Metrics/Portfolio/Correlation ビューの切り替え)
│   ├── ContractInput.tsx         (契約乗数入力)
│   ├── CorrelationHeatmap.tsx    (相関の可視化)
│   ├── CorrelationSection.tsx    (相関分析ラッパー)
│   ├── CustomTooltip.tsx         (チャートのツールチップ)
│   ├── ErrorList.tsx             (エラー表示)
│   ├── Header.tsx                (アプリヘッダー)
│   ├── MasterContractControl.tsx (すべての契約に乗数値を適用)
│   ├── MetricsTable.tsx          (指標の表示と選択)
│   ├── PortfolioSection.tsx      (ポートフォリオチャートと分析 - 591行！)
│   ├── SessionComplete.tsx       (完了UI)
│   ├── SortableHeader.tsx        (ソートインジケーター付きのテーブルヘッダー)
│   ├── UploadedFilesList.tsx     (アップロードされたファイルのリスト)
│   └── UploadSection.tsx         (Supabase へのファイルアップロード)
├── hooks/
│   ├── useContractMultipliers.ts (契約乗数の管理)
│   ├── useMetrics.ts             (取引指標の計算)
│   ├── usePortfolio.ts           (ポートフォリオデータと日付フィルタリング)
│   └── useSorting.ts             (高度な複数列ソート)
└── utils/
    └── dataUtils.ts              (指標計算、CSV パース、相関)

移行のコンテキスト

古いアプリから40個の機能を移行中（35/40完了）。詳細は migration-tracker スキルを参照。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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.