trading-analysis-dashboard-template

Original：🇺🇸 English

Translated

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.

4installs

Sourcenexu-io/open-design

Added on2026-05-09

NPX Install

npx skill4agent add nexu-io/open-design trading-analysis-dashboard-template

SKILL.md Content

View Translation Comparison →

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

Read active
```
DESIGN.md
```
, then map typography/color/layout into CSS variables.
Copy
```
assets/template.html
```
to
```
index.html
```
.
Personalize headings, instrument names, and numeric labels to the user brief.
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 (
```
/
```
  )
Keep output single-file HTML (inline CSS + inline JS, no framework dependency).
Keep placeholders honest (
```
—
```
or neutral labels) where real numbers are unknown.
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>