# 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. - Skill: `gabrielmoreira/trading-analysis-dashboard-template` (Agent Skill) - Install (CLI): `npx skillmds@latest add gabrielmoreira/trading-analysis-dashboard-template` - Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/trading-analysis-dashboard-template/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/gabrielmoreira/trading-analysis-dashboard-template --- # 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 ... ```