// |
| name | finance-charts |
| description | Financial data collection and visualization using TradingView lightweight-charts. Fetches market data from trusted sources and renders interactive charts. USE WHEN user says "create chart", "visualize stock data", "show price chart", "fetch market data", "display financial chart", "chart [ticker]", "plot [asset]", or any request related to financial data visualization and charting. |
| location | user |
Financial Data Visualization System
CRITICAL: This section MUST be FIRST and route EVERY workflow.
When user requests fetching financial data: Examples: "fetch stock data", "get market data for AAPL", "retrieve price data", "download financial data", "pull data for BTC" โ READ: ~/.claude/skills/finance-charts/workflows/fetch-data.md โ EXECUTE: Fetch financial data from trusted source (Yahoo Finance, Alpha Vantage, or Coinbase)
When user requests creating a chart: Examples: "create chart", "visualize data", "plot price chart", "show chart for TSLA", "chart this data", "display chart" โ READ: ~/.claude/skills/finance-charts/workflows/create-chart.md โ EXECUTE: Generate interactive TradingView lightweight-charts visualization
When user requests updating chart data: Examples: "update chart", "refresh data", "update prices", "reload chart data", "sync latest data" โ READ: ~/.claude/skills/finance-charts/workflows/update-data.md โ EXECUTE: Refresh data and update existing chart
When user requests exporting chart: Examples: "export chart", "save chart data", "download chart", "export to CSV", "save visualization" โ READ: ~/.claude/skills/finance-charts/workflows/export-chart.md โ EXECUTE: Export chart data or visualization to specified format
What this skill provides:
Data Collection
Visualization
Export & Storage
1. Yahoo Finance (via yfinance Python library)
2. Alpha Vantage
3. Coinbase API
4. Polygon.io
Configuration:
# Add to ~/.claude/.env
ALPHA_VANTAGE_API_KEY=your_key_here
POLYGON_API_KEY=your_key_here
Library: https://github.com/tradingview/lightweight-charts
Features:
Installation:
# Via bun (preferred)
cd ~/.claude/skills/finance-charts/tools/chart-app
bun add lightweight-charts
# Or via npm/yarn
npm install lightweight-charts
Basic Usage:
import { createChart } from 'lightweight-charts';
const chart = createChart(document.body, {
width: 800,
height: 400,
layout: {
background: { color: '#ffffff' },
textColor: '#333',
},
grid: {
vertLines: { color: '#e1e1e1' },
horzLines: { color: '#e1e1e1' },
},
});
const candlestickSeries = chart.addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
borderVisible: false,
wickUpColor: '#26a69a',
wickDownColor: '#ef5350',
});
candlestickSeries.setData([
{ time: '2023-01-01', open: 100, high: 105, low: 98, close: 103 },
{ time: '2023-01-02', open: 103, high: 110, low: 102, close: 108 },
// ... more data
]);
Location: ~/.claude/skills/finance-charts/tools/chart-app/
Files:
index.html - Chart display pagechart.ts - Chart rendering logic (TypeScript)data-loader.ts - Data fetching and processingpackage.json - Dependencies and scriptstsconfig.json - TypeScript configurationRunning the chart app:
cd ~/.claude/skills/finance-charts/tools/chart-app
bun run dev # Development server with hot reload
bun run build # Production build
bun run serve # Serve production build
OHLCV Format (required for candlestick charts):
[
{
"time": "2023-01-01",
"open": 150.00,
"high": 155.50,
"low": 149.00,
"close": 153.25,
"volume": 1000000
}
]
Time Format:
Data Cache:
~/.claude/skills/finance-charts/tools/data-cache/ - Cached API responses{ticker}_{interval}_{date}.jsonGenerated Charts:
~/.claude/skills/finance-charts/tools/charts/ - Static HTML chart files~/.claude/context/projects/finance-charts/ - Project-specific chartsExports:
~/.claude/scratchpad/ - Temporary exportsUser: "Create a chart for Bitcoin"
Skill Response:
fetch-data.md โ Fetches BTC-USD data from Coinbase API (last 30 days)create-chart.md โ Generates TradingView candlestick charthttp://localhost:3000User: "Show me AAPL stock chart for the last 3 months"
Skill Response:
fetch-data.md โ Fetches AAPL data via yfinance (3-month range)create-chart.md โ Creates candlestick chart with MA overlays~/.claude/skills/finance-charts/tools/charts/AAPL_3M.htmlUser: "Update the Tesla chart with latest data"
Skill Response:
update-data.md โ Fetches latest TSLA dataUser: "Export the BTC chart data to CSV"
Skill Response:
export-chart.md โ Extracts data from chart state~/.claude/scratchpad/BTC_data_2025-11-19.csvLanguages:
Key Dependencies:
lightweight-charts - Chart rendering libraryyfinance (Python) or yahoo-finance2 (Node) - Free market datanode-fetch or axios - HTTP requestsbun - Runtime and package managerDevelopment Server:
~/.claude/skills/CORE/SKILL-STRUCTURE-AND-ROUTING.md - Canonical structure guide~/.claude/skills/CORE/CONSTITUTION.md - CLI-First principles~/.claude/skills/CORE/stack-preferences.md - TypeScript > Python preference~/.claude/skills/finance-charts/documentation/data-sources.md - Detailed API documentation~/.claude/skills/finance-charts/documentation/chart-customization.md - Chart styling and optionsCreated: 2025-11-19 Last Updated: 2025-11-19 Archetype: Standard (4 workflows) Status: Active