AI agent skill · by @nexu-io

Trading Analysis Dashboard Template

Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.

Archived 2026-10-23 · Source updated 2026-10-01 · License: Apache-2.0. Check the original repository for the latest version.

SKILL.md instructions

# Trading Analysis Dashboard Template

Produce a premium, data-dense, Wall-Street style trading dashboard as a self-contained HTML artifact.

## Resource map

```text
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html
```

## Workflow

1. Read active `DESIGN.md`, then map typography/color/layout into CSS variables.
2. Copy `assets/template.html` to `index.html`.
3. Personalize headings, instrument names, and numeric labels to the user brief.
4. Preserve interaction fidelity:
   - Light/Dark mode switch
   - Live/Demo mode
   - Chart hover crosshair and tooltip
   - Click-to-focus chart (floating modal style)
   - Keyboard command palette (`/`)
5. Keep output single-file HTML (inline CSS + inline JS, no framework dependency).
6. Keep placeholders honest (`—` or neutral labels) where real numbers are unknown.
7. Validate against `references/checklist.md` before emitting.

## Output contract

One sentence before artifact, then:

```xml
<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>
```