Finance Charts
Financial Data Visualization System
Workflow Routing (SYSTEM PROMPT)
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
When to Activate This Skill
Direct Finance Chart Requests (Categories 1-4)
- "finance charts", "financial charts", "market charts", "trading charts"
- "do finance chart", "run finance chart", "create finance chart", "generate finance chart"
- "quick chart", "simple chart", "basic chart", "comprehensive chart", "full chart"
- "chart for [ticker]", "chart on [asset]", "chart about [market]"
Data Visualization (Categories 5-7)
- "visualize stock", "visualize crypto", "visualize market data", "visualize prices"
- "show price chart", "display chart", "plot data", "graph prices"
- "financial visualization", "market visualization", "trading visualization"
- "candlestick chart", "line chart", "OHLC chart", "area chart"
Financial Data Collection (Category 8)
- "fetch market data", "get stock prices", "retrieve financial data", "download market data"
- "pull data from [source]", "collect price data", "gather market info"
- Ticker symbols: "AAPL", "TSLA", "BTC-USD", "ETH-USD", etc.
- Asset requests: "chart Bitcoin", "show Apple stock", "Tesla prices"
TradingView Integration
- "use TradingView charts", "lightweight charts", "TradingView visualization"
- "interactive chart", "web-based chart", "browser chart"
Core Capabilities
What this skill provides:
- Data Collection: Fetch OHLCV (Open, High, Low, Close, Volume) data from trusted financial APIs
- Chart Rendering: Create interactive charts using TradingView lightweight-charts library
- Multiple Chart Types: Candlestick, line, area, histogram (volume), baseline charts
- Real-time Updates: Refresh data and update charts dynamically
- Export Options: Save data to CSV, JSON, or export chart as image
- Multi-Asset Support: Stocks, crypto, forex, commodities, indices
Workflow Overview
Data Collection
- fetch-data.md - Retrieve financial data from Yahoo Finance, Alpha Vantage, or Coinbase API
Visualization
- create-chart.md - Generate TradingView lightweight-charts visualization with fetched data
- update-data.md - Refresh data and synchronize chart in real-time
Export & Storage
- export-chart.md - Export chart data or save visualization to file
Extended Context
Trusted Data Sources
1. Yahoo Finance (via yfinance Python library)
- Free, no API key required
- Stocks, ETFs, indices, forex, crypto
- Historical and recent data
- Limitations: Rate limiting, unofficial API
2. Alpha Vantage
- Free tier available (5 API calls/minute, 500 calls/day)
- Requires API key (stored in ~/.claude/.env)
- Stock, forex, crypto, technical indicators
- Official API with good documentation
3. Coinbase API
- Free, no authentication for public data
- Cryptocurrency market data
- Real-time and historical OHLCV
- Official exchange API
4. Polygon.io
- Premium service with free tier
- High-quality financial data
- Stocks, options, forex, crypto
- Requires API key
Configuration:
# Add to ~/.claude/.env
ALPHA_VANTAGE_API_KEY=your_key_here
POLYGON_API_KEY=your_key_here
TradingView Lightweight Charts
Library: https://github.com/tradingview/lightweight-charts
Features:
- Lightweight and performant (no dependencies)
- Multiple chart types (candlestick, line, area, histogram, baseline)
- Interactive (zoom, pan, crosshair, tooltips)
- Responsive and mobile-friendly
- Customizable appearance and behavior
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
]);
Chart Application Structure
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 configuration
Running 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
Data Format
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:
- YYYY-MM-DD for daily data
- Unix timestamp (seconds) for intraday data
Storage Locations
Data Cache:
~/.claude/skills/finance-charts/tools/data-cache/ - Cached API responses- Format:
{ticker}_{interval}_{date}.json
Generated Charts:
~/.claude/skills/finance-charts/tools/charts/ - Static HTML chart files~/.claude/context/projects/finance-charts/ - Project-specific charts
Exports:
~/.claude/scratchpad/ - Temporary exports- User-specified paths - Custom export locations
Examples
Example 1: Create Bitcoin Price Chart
User: "Create a chart for Bitcoin"
Skill Response:
- Routes to
fetch-data.md → Fetches BTC-USD data from Coinbase API (last 30 days)
- Routes to
create-chart.md → Generates TradingView candlestick chart
- Opens chart in browser at
http://localhost:3000
- Outcome: Interactive Bitcoin price chart with candlesticks and volume
Example 2: Visualize Apple Stock with Custom Range
User: "Show me AAPL stock chart for the last 3 months"
Skill Response:
- Routes to
fetch-data.md → Fetches AAPL data via yfinance (3-month range)
- Routes to
create-chart.md → Creates candlestick chart with MA overlays
- Saves chart to
~/.claude/skills/finance-charts/tools/charts/AAPL_3M.html
- Outcome: Apple stock visualization with moving averages
Example 3: Update Existing Chart
User: "Update the Tesla chart with latest data"
Skill Response:
- Routes to
update-data.md → Fetches latest TSLA data
- Updates existing chart data without recreating
- Chart auto-refreshes in browser
- Outcome: Chart synchronized with current market data
Example 4: Export Chart Data
User: "Export the BTC chart data to CSV"
Skill Response:
- Routes to
export-chart.md → Extracts data from chart state
- Converts to CSV format with headers
- Saves to
~/.claude/scratchpad/BTC_data_2025-11-19.csv
- Outcome: CSV file ready for spreadsheet analysis
Stack & Tools
Languages:
- TypeScript (preferred for chart app)
- Python (for data fetching with yfinance)
- JavaScript (alternative)
Key Dependencies:
lightweight-charts - Chart rendering libraryyfinance (Python) or yahoo-finance2 (Node) - Free market datanode-fetch or axios - HTTP requestsbun - Runtime and package manager
Development Server:
- Bun's built-in dev server (recommended)
- Or Vite for hot module replacement
Related Documentation
~/.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 options
Created: 2025-11-19
Last Updated: 2025-11-19
Archetype: Standard (4 workflows)
Status: Active
1---2name: finance-charts3description: 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.4---5
6# Finance Charts
7
8**Financial Data Visualization System**
9
10## Workflow Routing (SYSTEM PROMPT)
11
12**CRITICAL: This section MUST be FIRST and route EVERY workflow.**
13
14**When user requests fetching financial data:**
15Examples: "fetch stock data", "get market data for AAPL", "retrieve price data", "download financial data", "pull data for BTC"
16→ **READ:** ~/.claude/skills/finance-charts/workflows/fetch-data.md
17→ **EXECUTE:** Fetch financial data from trusted source (Yahoo Finance, Alpha Vantage, or Coinbase)
18
19**When user requests creating a chart:**
20Examples: "create chart", "visualize data", "plot price chart", "show chart for TSLA", "chart this data", "display chart"
21→ **READ:** ~/.claude/skills/finance-charts/workflows/create-chart.md
22→ **EXECUTE:** Generate interactive TradingView lightweight-charts visualization
23
24**When user requests updating chart data:**
25Examples: "update chart", "refresh data", "update prices", "reload chart data", "sync latest data"
26→ **READ:** ~/.claude/skills/finance-charts/workflows/update-data.md
27→ **EXECUTE:** Refresh data and update existing chart
28
29**When user requests exporting chart:**
30Examples: "export chart", "save chart data", "download chart", "export to CSV", "save visualization"
31→ **READ:** ~/.claude/skills/finance-charts/workflows/export-chart.md
32→ **EXECUTE:** Export chart data or visualization to specified format
33
34---
35
36## When to Activate This Skill
37
38### Direct Finance Chart Requests (Categories 1-4)
39- "finance charts", "financial charts", "market charts", "trading charts"
40- "do finance chart", "run finance chart", "create finance chart", "generate finance chart"
41- "quick chart", "simple chart", "basic chart", "comprehensive chart", "full chart"
42- "chart for [ticker]", "chart on [asset]", "chart about [market]"
43
44### Data Visualization (Categories 5-7)
45- "visualize stock", "visualize crypto", "visualize market data", "visualize prices"
46- "show price chart", "display chart", "plot data", "graph prices"
47- "financial visualization", "market visualization", "trading visualization"
48- "candlestick chart", "line chart", "OHLC chart", "area chart"
49
50### Financial Data Collection (Category 8)
51- "fetch market data", "get stock prices", "retrieve financial data", "download market data"
52- "pull data from [source]", "collect price data", "gather market info"
53- Ticker symbols: "AAPL", "TSLA", "BTC-USD", "ETH-USD", etc.
54- Asset requests: "chart Bitcoin", "show Apple stock", "Tesla prices"
55
56### TradingView Integration
57- "use TradingView charts", "lightweight charts", "TradingView visualization"
58- "interactive chart", "web-based chart", "browser chart"
59
60---
61
62## Core Capabilities
63
64**What this skill provides:**
65- **Data Collection**: Fetch OHLCV (Open, High, Low, Close, Volume) data from trusted financial APIs
66- **Chart Rendering**: Create interactive charts using TradingView lightweight-charts library
67- **Multiple Chart Types**: Candlestick, line, area, histogram (volume), baseline charts
68- **Real-time Updates**: Refresh data and update charts dynamically
69- **Export Options**: Save data to CSV, JSON, or export chart as image
70- **Multi-Asset Support**: Stocks, crypto, forex, commodities, indices
71
72---
73
74## Workflow Overview
75
76**Data Collection**
77- **fetch-data.md** - Retrieve financial data from Yahoo Finance, Alpha Vantage, or Coinbase API
78
79**Visualization**
80- **create-chart.md** - Generate TradingView lightweight-charts visualization with fetched data
81- **update-data.md** - Refresh data and synchronize chart in real-time
82
83**Export & Storage**
84- **export-chart.md** - Export chart data or save visualization to file
85
86---
87
88## Extended Context
89
90### Trusted Data Sources
91
92**1. Yahoo Finance (via yfinance Python library)**
93- Free, no API key required
94- Stocks, ETFs, indices, forex, crypto
95- Historical and recent data
96- Limitations: Rate limiting, unofficial API
97
98**2. Alpha Vantage**
99- Free tier available (5 API calls/minute, 500 calls/day)
100- Requires API key (stored in ~/.claude/.env)
101- Stock, forex, crypto, technical indicators
102- Official API with good documentation
103
104**3. Coinbase API**
105- Free, no authentication for public data
106- Cryptocurrency market data
107- Real-time and historical OHLCV
108- Official exchange API
109
110**4. Polygon.io**
111- Premium service with free tier
112- High-quality financial data
113- Stocks, options, forex, crypto
114- Requires API key
115
116**Configuration:**
117```bash
118# Add to ~/.claude/.env
119ALPHA_VANTAGE_API_KEY=your_key_here
120POLYGON_API_KEY=your_key_here
121```
122
123### TradingView Lightweight Charts
124
125**Library:** https://github.com/tradingview/lightweight-charts
126
127**Features:**
128- Lightweight and performant (no dependencies)
129- Multiple chart types (candlestick, line, area, histogram, baseline)
130- Interactive (zoom, pan, crosshair, tooltips)
131- Responsive and mobile-friendly
132- Customizable appearance and behavior
133
134**Installation:**
135```bash
136# Via bun (preferred)
137cd ~/.claude/skills/finance-charts/tools/chart-app
138bun add lightweight-charts
139
140# Or via npm/yarn
141npm install lightweight-charts
142```
143
144**Basic Usage:**
145```typescript
146import { createChart } from 'lightweight-charts';
147
148const chart = createChart(document.body, {
149 width: 800,
150 height: 400,
151 layout: {
152 background: { color: '#ffffff' },
153 textColor: '#333',
154 },
155 grid: {
156 vertLines: { color: '#e1e1e1' },
157 horzLines: { color: '#e1e1e1' },
158 },
159});
160
161const candlestickSeries = chart.addCandlestickSeries({
162 upColor: '#26a69a',
163 downColor: '#ef5350',
164 borderVisible: false,
165 wickUpColor: '#26a69a',
166 wickDownColor: '#ef5350',
167});
168
169candlestickSeries.setData([
170 { time: '2023-01-01', open: 100, high: 105, low: 98, close: 103 },
171 { time: '2023-01-02', open: 103, high: 110, low: 102, close: 108 },
172 // ... more data
173]);
174```
175
176### Chart Application Structure
177
178**Location:** `~/.claude/skills/finance-charts/tools/chart-app/`
179
180**Files:**
181- `index.html` - Chart display page
182- `chart.ts` - Chart rendering logic (TypeScript)
183- `data-loader.ts` - Data fetching and processing
184- `package.json` - Dependencies and scripts
185- `tsconfig.json` - TypeScript configuration
186
187**Running the chart app:**
188```bash
189cd ~/.claude/skills/finance-charts/tools/chart-app
190bun run dev # Development server with hot reload
191bun run build # Production build
192bun run serve # Serve production build
193```
194
195### Data Format
196
197**OHLCV Format (required for candlestick charts):**
198```json
199[
200 {
201 "time": "2023-01-01",
202 "open": 150.00,
203 "high": 155.50,
204 "low": 149.00,
205 "close": 153.25,
206 "volume": 1000000
207 }
208]
209```
210
211**Time Format:**
212- YYYY-MM-DD for daily data
213- Unix timestamp (seconds) for intraday data
214
215### Storage Locations
216
217**Data Cache:**
218- `~/.claude/skills/finance-charts/tools/data-cache/` - Cached API responses
219- Format: `{ticker}_{interval}_{date}.json`
220
221**Generated Charts:**
222- `~/.claude/skills/finance-charts/tools/charts/` - Static HTML chart files
223- `~/.claude/context/projects/finance-charts/` - Project-specific charts
224
225**Exports:**
226- `~/.claude/scratchpad/` - Temporary exports
227- User-specified paths - Custom export locations
228
229---
230
231## Examples
232
233### Example 1: Create Bitcoin Price Chart
234
235**User:** "Create a chart for Bitcoin"
236
237**Skill Response:**
2381. Routes to `fetch-data.md` → Fetches BTC-USD data from Coinbase API (last 30 days)
2392. Routes to `create-chart.md` → Generates TradingView candlestick chart
2403. Opens chart in browser at `http://localhost:3000`
2414. Outcome: Interactive Bitcoin price chart with candlesticks and volume
242
243### Example 2: Visualize Apple Stock with Custom Range
244
245**User:** "Show me AAPL stock chart for the last 3 months"
246
247**Skill Response:**
2481. Routes to `fetch-data.md` → Fetches AAPL data via yfinance (3-month range)
2492. Routes to `create-chart.md` → Creates candlestick chart with MA overlays
2503. Saves chart to `~/.claude/skills/finance-charts/tools/charts/AAPL_3M.html`
2514. Outcome: Apple stock visualization with moving averages
252
253### Example 3: Update Existing Chart
254
255**User:** "Update the Tesla chart with latest data"
256
257**Skill Response:**
2581. Routes to `update-data.md` → Fetches latest TSLA data
2592. Updates existing chart data without recreating
2603. Chart auto-refreshes in browser
2614. Outcome: Chart synchronized with current market data
262
263### Example 4: Export Chart Data
264
265**User:** "Export the BTC chart data to CSV"
266
267**Skill Response:**
2681. Routes to `export-chart.md` → Extracts data from chart state
2692. Converts to CSV format with headers
2703. Saves to `~/.claude/scratchpad/BTC_data_2025-11-19.csv`
2714. Outcome: CSV file ready for spreadsheet analysis
272
273---
274
275## Stack & Tools
276
277**Languages:**
278- TypeScript (preferred for chart app)
279- Python (for data fetching with yfinance)
280- JavaScript (alternative)
281
282**Key Dependencies:**
283- `lightweight-charts` - Chart rendering library
284- `yfinance` (Python) or `yahoo-finance2` (Node) - Free market data
285- `node-fetch` or `axios` - HTTP requests
286- `bun` - Runtime and package manager
287
288**Development Server:**
289- Bun's built-in dev server (recommended)
290- Or Vite for hot module replacement
291
292---
293
294## Related Documentation
295
296- `~/.claude/skills/CORE/SKILL-STRUCTURE-AND-ROUTING.md` - Canonical structure guide
297- `~/.claude/skills/CORE/CONSTITUTION.md` - CLI-First principles
298- `~/.claude/skills/CORE/stack-preferences.md` - TypeScript > Python preference
299- `~/.claude/skills/finance-charts/documentation/data-sources.md` - Detailed API documentation
300- `~/.claude/skills/finance-charts/documentation/chart-customization.md` - Chart styling and options
301
302---
303
304**Created:** 2025-11-19
305**Last Updated:** 2025-11-19
306**Archetype:** Standard (4 workflows)
307**Status:** Active
majiayu000