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.
Source facts
- Repository
- nexu-io/open-design
- Last source activity
- August 18, 2026 at 07:09
- Detected SKILL.md language
- English
- Stars
- 97,471
- Forks
- 11,317
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
5 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- trading-analysis-dashboard-template
- description
- 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.
- triggers
- ["trading analysis dashboard template","wall street dashboard template","financial terminal template","trading cockpit template","交易分析面板模板","华尔街风格看板","高科技金融 dashboard 模板"]
- od
- {"mode":"template","platform":"desktop","scenario":"live-artifacts","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"outputs":{"primary":"index.html","secondary":["template.html","example.html"]},"example_prompt":"Create a Wall-Street-grade trading analysis dashboard template with a left rail, risk cockpit, market charts, live/demo mode, and realistic dense data. Keep it single-file HTML.","capabilities_required":["file_write"]}
# 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>
```
View on GitHub