skills.rest
ginlix-ai
ginlix-aiOFFICIAL
Explore all skills by this author →
GitHub

interactive-dashboard

Builds and serves live financial web dashboards via a sandboxed preview URL.

1.7k|283|Updated Jan 18, 2026
Search Tags:#financial data#docker#FastAPI#chart.js#Dashboard#reAct#Data Visualization
One-click install
npx skills add https://github.com/ginlix-ai/LangAlpha --skill interactive-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interactive-dashboard
Source: https://github.com/ginlix-ai/LangAlpha/tree/main/plugins/langalpha_deliverables/skills/interactive-dashboard
Command: npx skills add https://github.com/ginlix-ai/LangAlpha --skill interactive-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires fastapi, uvicorn, yfinance, pandas, plotly, matplotlib, and includes references (resource) components.

What problem does it solve?

Turning financial data into a live, interactive web dashboard normally requires scaffolding a server, wiring charts, and deploying somewhere users can view it. This Skill handles the full pipeline inside the sandbox: fetching market data, building the dashboard at the right complexity tier, verifying it renders, and exposing it through a preview URL.

Core Features & Use Cases

  • Three architecture tiers: self-contained HTML with CDN chart libraries, FastAPI serving static HTML with fetch() polling for live data, or a full FastAPI + Vite/React app in Docker for multi-page routed apps.
  • Financial data integration: built-in guidance for Yahoo Finance MCP tools covering prices, fundamentals, analyst estimates, screeners, and sector data, with yfinance fallback inside Docker.
  • Ready-made references: copy-paste chart patterns (candlestick, treemap, KPI cards, tables), theme-aware UI components, Dockerfile, start.sh, and FastAPI server templates.
  • Use Case: Ask for a live portfolio monitor tracking your holdings; the agent fetches quotes, builds a dashboard with allocation charts and a P&L table, verifies it with Playwright, and returns a preview URL that auto-recovers after workspace restarts.

Quick Start

Ask the agent to build a live stock dashboard for AAPL with price chart, key metrics, and recent news served at a preview URL.

Frequently Asked Questions about interactive-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a live stock dashboard with a preview URL?▼

Fetch data with the Yahoo Finance MCP tools, build the dashboard at the appropriate tier, start the server in the background, then call GetPreviewUrl with the port, serve command, and title. The platform persists the command and re-runs it after workspace restarts.

When should I use an interactive dashboard instead of an HTML report?▼

Use a dashboard when data must refresh live, the app needs server-side filtering or routing, or the dataset is too large to embed in one file. Use a self-contained HTML report when the deliverable is a downloadable snapshot the user keeps, prints, or shares.

Chart.js vs Plotly vs Lightweight Charts for financial dashboards?▼

Default to Chart.js for line, bar, pie, and area charts. Use Plotly for candlesticks, heatmaps, and treemaps. Use Lightweight Charts only when you need TradingView-style financial charting with crosshairs and range selectors.

Why do dashboard buttons stop working inside the preview iframe?▼

The preview iframe enforces a Content Security Policy that silently blocks inline handlers like onclick attributes, eval, and javascript: URLs. Replace them with addEventListener calls and run the provided grep self-check before serving.

Can the dashboard fetch data inside a Docker container?▼

MCP tool modules exist only in the host workspace and are not copied into the Docker image. Server code inside Docker must call yfinance directly, with yfinance and tzdata included in the image and --network host enabled.

What are the limitations of the simple HTML dashboard tier?▼

The simple tier embeds a data snapshot at load time with no backend, so it cannot refresh live data or run server-side filtering. Escalate to the FastAPI tier when you need polling endpoints, computed APIs, or large datasets.

Related Skills

Explore More Data & Analytics Skills→
simplefarmer69simplefarmer69
2

yahoo-finance

Fetch stock prices, quotes, fundamentals, and options data from Yahoo Finance.

Community
Intermediate
jwangkunjwangkun
705

china-thesis-tracker

Track investment theses for A-share positions with structured components and data monitoring.

Community
Advanced
AradotsoAradotso
3

huashu-design-html-prototyping

Generate interactive HTML prototypes and supporting assets from design briefs.

Official
Advanced
DrugClawDrugClaw
126

scientific-visualization-tools

Generate static and interactive scientific plots from research data using Python libraries.

Official
Intermediate