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.
Scanned 9/5/2026
Install to Claude Code
npx -y skills add jhy0285/monofield --skill trading-analysis-dashboard-template --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Trading Analysis Dashboard Template?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/jhy0285-trading-analysis-dashboard-template)More formats (shields.io, HTML) on the badges page.
---
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. For current prices, filings, earnings, event dates, and material news, keep a compact evidence record with the direct source URL, publisher, observed/as-of time, unit/currency, and verification status. Facts require a successful source lookup; forecasts and buy/sell scenarios must be visibly labeled as analysis rather than sourced fact.
8. If a current source cannot be verified, show `—` / `unverified` in the dashboard. Never substitute a plausible number, unnamed citation, or remembered date.
9. 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>
```
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!