Finance Charts

finance-charts

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...

mattnigh/skills_collection·0installs24stars

SKILL.md

Full skill instructions

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 page
chart.ts - Chart rendering logic (TypeScript)
data-loader.ts - Data fetching and processing
package.json - Dependencies and scripts
tsconfig.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 library
yfinance (Python) or yahoo-finance2 (Node) - Free market data
node-fetch or axios - HTTP requests
bun - Runtime and package manager

Development Server:

Bun's built-in dev server (recommended)
Or Vite for hot module replacement

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/mattnigh/skills_collection --skill multicam__qara__claude__skills__finance-charts__SKILL.md

View on GitHub

collection/multicam__qara__claude__skills__finance-charts__SKILL.md

frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guide...
1 installs
animation-motion
CSS animations, transitions, and scroll-driven effects with accessibility (prefers-reduced-motion). Use when adding motion, hover effects, loading states, or scroll-based animations.
1 installs
laravel
Laravel v12 - The PHP Framework For Web Artisans
1 installs
gemini-document-processing
Guide for implementing Google Gemini API document processing - analyze PDFs with native vision to extract text, images, diagrams, charts, and tables. Use when processing documents, extracting structured data, summarizing PDFs, answering questions about document content, or converting documents to...
0 installs

More skills from mattnigh

mattnigh/skills_collection

spring-framework-patterns

Comprehensive Spring Framework and Spring Boot best practices including dependency injection patterns, bean lifecycle and scopes, REST API development, Spring Data JPA, service layer design, Spring Security, testing strategies, caching, AOP, async processing, error handling, and common anti-patte...

24 0

View

mattnigh/skills_collection

When Stuck - Problem-Solving Dispatch

Dispatch to the right problem-solving technique based on how you're stuck

24 0

View

mattnigh/skills_collection

.claude/skills/type-safety-patterns/SKILL.md

TypeScript厳格モードによる型安全性設計を専門とするスキル。 📖 参照書籍: - 『Effective TypeScript』（Dan Vanderkam）: 型設計 📚 リソース参照: - `resources/Level1_basics.md`: レベル1の基礎ガイド - `resources/Level2_intermediate.md`: レベル2の実務ガイド - `resources/Level3_advanced.md`: レベル3の応用ガイド - `resources/Level4_expert.md`: レベル4の専門ガイド - `resources/di...

24 0

View

mattnigh/skills_collection

deploying-cloud-k8s

Deploys applications to cloud Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Use when deploying to production, setting up GitHub Actions, troubleshooting deployments. Covers build-time vs runtime vars, architecture matching, and battle-tested debugging.

24 0

View

mattnigh/skills_collection

moai-alfred-agent-guide

19-agent team structure, decision trees for agent selection, Haiku vs Sonnet model selection, and agent collaboration principles. Use when deciding which sub-agent to invoke, understanding team responsibilities, or learning multi-agent orchestration.

24 0

View

mattnigh/skills_collection

mermaid-diagram-generator

Converts architecture descriptions, module specs, or workflow docs into Mermaid diagrams. Use when visualizing brick module relationships, workflows (DDD, investigation), or system architecture. Supports: flowcharts, sequence diagrams, class diagrams, state machines, entity relationship diagrams,...

24 0

View

mattnigh/skills_collection

pre-flight-check

INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.

24 0

View

mattnigh/skills_collection

browser-dev-tools

This skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify t...

24 0

View

mattnigh/skills_collection

lead-dev

Lead Développeur - Coordination technique opérationnelle, code review, mentoring et livraison. Pair de web-dev-process au niveau OPÉRATIONS.

24 0

View

mattnigh/skills_collection

worker-monitor

Monitor Docker workers, RQ queue health, and auto-scale workers (max 4). Use when: checking job progress, monitoring queue depth, scaling workers up/down, diagnosing slow processing, or waiting for jobs to complete. Referenced by data-quality skill during reprocessing.

24 0

View

mattnigh/skills_collection

quality-advisor

Proactive quality guidance system that monitors artifact creation and provides real-time feedback on documentation quality

24 0

View

mattnigh/skills_collection

bump-version

This skill should be used when the user wants to bump the version number in the workspace. It updates versions across all pyproject.toml files (root, tde, and tda packages) and the CHANGELOG.md to keep them synchronized.

24 0

View