mcpField
T
trading-analysis-dashboard-template

trading-analysis-dashboard-template

github.com/nexu-ioDesign & UI104.6k64 installsUpdated today
Repository

About trading-analysis-dashboard-template

A design skill for creating a self-contained HTML trading dashboard from a template. It covers chart interactions, theme and mode controls, and validation, while requiring unknown figures to remain clearly marked.

Key features

  1. 01Light and dark mode switch
  2. 02Live and demo modes
  3. 03Chart crosshair and tooltip
  4. 04Floating chart focus view
  5. 05Keyboard command palette

Use cases

  1. 01Building a trading analysis dashboard
  2. 02Customizing instrument labels and headings
  3. 03Producing a single-file HTML artifact

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill trading-analysis-dashboard-template

After installing, type/trading-analysis-dashboard-templatein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

example.html
assets/
template.html
references/
checklist.md

Details

From the project README

Trading Analysis Dashboard Template

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

Resource map

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:

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

Comments

Markdown supported