trading-dashboard-build

Automate Next.js trading dashboard setup that renders equity curves, indicators, and regime timelines from artifacts.

Updated Jun 9, 2026
One-click install
npx skills add https://github.com/bini59/316_stock_automation --skill trading-dashboard-build
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: trading-dashboard-build
Source: https://github.com/bini59/316_stock_automation/tree/main/.claude/skills/trading-dashboard-build
Command: npx skills add https://github.com/bini59/316_stock_automation --skill trading-dashboard-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a Next.js-based observability surface that reads engine artifacts (BacktestRun, LiveSnapshot, ControlFlags) to render equity curves, indicators, regime timelines, and multi-test counters with a read-only UI, enabling safe monitoring without altering trading logic.

Core Features & Use Cases

  • Read-only dashboards render charts and metrics from artifacts using lightweight-charts, keeping the engine as the source of truth.
  • Two routes, /backtest and /live, with API-backed data feeds to visualize calibration results and live performance.
  • Use Case: a quant team needs a transparent, non-intrusive view of both backtests and live runs to validate strategy behavior and spot anomalies.

Quick Start

Launch the Next.js app in the web/ folder and open the /backtest or /live routes to begin monitoring.

Frequently Asked Questions about trading-dashboard-build

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

FAQPage Schema
How do I build a trading dashboard to visualize backtest equity curves?

You can build a trading dashboard to visualize backtest equity curves by setting up a Next.js application that reads engine artifacts like BacktestRun to render charts using lightweight-charts. This provides a read-only UI for safe monitoring without altering trading logic.

What is the best way to monitor live trading performance safely?

The best way to monitor live trading performance safely is by using a read-only dashboard that reads LiveSnapshot artifacts. This approach renders live metrics and regime timelines via API-backed data feeds without executing any trading logic.

Can I use Next.js to render regime timelines from backtest artifacts?

Yes, you can use Next.js to render regime timelines from backtest artifacts. The framework sets up routes that consume BacktestRun and ControlFlags data to visualize calibration results and strategy behavior safely.

How do I start the Next.js app for backtest and live monitoring?

To start the Next.js app for backtest and live monitoring, launch the application located in the web/ folder. Once running, open the /backtest or /live routes in your browser to begin inspecting performance.

Do I need to execute trading logic to render indicators on the dashboard?

No, you do not need to execute trading logic to render indicators on the dashboard. The UI relies on artifact contracts for data feeding, ensuring the engine remains the source of truth and the dashboard stays strictly read-only.

What are the limitations of using a read-only dashboard for algorithmic trading?

A limitation of using a read-only dashboard is that it cannot execute trades or alter strategy logic. It strictly visualizes data from artifacts like BacktestRun and LiveSnapshot, meaning users cannot intervene or modify control flags directly through the interface.