Trading analysis dashboard template
Skill nexu-io/open-design/plugins/_official/examples/trading-analysis-dashboard-template
π¨ The open-source Claude Design alternative. π₯οΈ Local-first desktop app. πΌοΈ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video β real files, HTML/PDF/PPTX/MP4 export. π€ Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill trading-analysis-dashboard-templateAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
2.4 KB, as published. Nobody here has run it
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
- Read active
DESIGN.md, then map typography/color/layout into CSS variables. - Copy
assets/template.htmltoindex.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.mdbefore 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>