Guide · Agent skill
How to use the Trading Analysis Dashboard Template agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Trading Analysis Dashboard Template is an agent skill that tells an AI agent how to build a Wall-Street-style trading dashboard as one self-contained HTML page. It is aimed at designers, front-end developers, teams presenting a trading-cockpit concept, and students who want to see how dense financial interfaces are laid out. After this guide you will know what the skill does, how to install it, how to ask for a dashboard in plain language, and what its limits are.
Trading Analysis Dashboard Templatenexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the skill's ZIP file from the page where you found this guide.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Ask for a dashboard. Describe the dashboard you want in plain language, naming the panels and whether you want Live or Demo mode.
- 5Open and check the result. Open the generated index.html in a web browser and test the theme switch, chart tooltips and command palette.
What the skill makes the agent do
When the skill is installed, the agent starts from a bundled HTML template and adapts its labels and colours to your brief. The result is a visual mockup, not a working trading system.
The template keeps several interactive features: a light/dark theme switch, hover crosshair and tooltips on charts, click-to-focus chart panels, a keyboard command palette opened with /, and a Live/Demo mode. Where real numbers are unknown, the agent uses neutral placeholders such as — or neutral labels instead of invented figures.
Install the skill (ZIP download or upload)
Download the ZIP file for the skill from the page where you found this guide. Then choose one of the methods below.
For a personal install, unzip the file into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. In both cases the skill folder is named trading-analysis-dashboard-template.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Project only: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Know what the skill contains
The skill folder holds a small set of files. SKILL.md contains the instructions the agent follows. assets/template.html is the base template that gets copied to index.html. references/checklist.md is a list of checks the agent runs before it outputs the page. example.html is an example output.
- SKILL.md: the agent's instructions
- assets/template.html: the bundled base template
- references/checklist.md: the validation checklist
- example.html: a sample result
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.htmlTrigger the skill with a natural request
You do not need a special command. Describe what you want in ordinary words. The skill is meant to be used when you ask for a Wall-Street-style analytics terminal, a trading cockpit, or a high-tech financial dashboard template with realistic data layout.
Name the parts you want, such as a left rail, a risk panel, market charts, or a Live/Demo switch. Mention that you want a single HTML file so the output matches what the skill produces.
- Ask for a trading cockpit or financial terminal template by name
- List the panels you need so the layout matches your brief
- Say which colours or brand look to use, if you have them
Example requests that work well
The skill's own example prompt asks for a Wall-Street-grade trading analysis dashboard template with a left rail, risk cockpit, market charts, live/demo mode, and realistic dense data, kept as single-file HTML. You can adapt that wording for your own project.
The checklist expects the output to include a dense layout with a left sidebar, top status and a multi-panel body, a risk panel with exposure-style metrics such as VaR, Beta or drawdown, and a workflow panel that shows Signal → Risk → Order → Fill.
- Create a trading analysis dashboard template with a left rail, risk cockpit and market charts, single-file HTML
- Make a financial terminal template with a light and dark theme and a Live/Demo switch
- Build a trading cockpit mockup for a stakeholder presentation with placeholder numbers
Safety notes: scripts, network and market data
The skill declares that it runs no scripts and uses no network access. It requires only an agent runtime that can write files and a web browser to view the HTML file.
The template is a visual layout. It is not a source of market data or analysis and does not connect to exchanges. The files contain only front-end template code and placeholder or demo content. Do not use the output to make real trading or investment decisions.
- Runs scripts: no
- Uses network: no
- Requires file writing capability and a web browser
- Not a source of live prices or trading advice
Tips for better results
Give the agent the real labels and layout you want early, because the skill adapts the template to your brief. Ask for placeholders wherever you do not have real figures, so the mockup does not show invented numbers.
Open the finished index.html in a browser and check the interactions: theme switch, chart tooltips, click-to-focus panels and the command palette. Compare the result against example.html to see what a complete output looks like.
- Provide your brand colours and typography early
- Ask for placeholders instead of sample figures
- Test the Live/Demo switch and chart hover in a browser
What people use it for
- Pitching a trading-cockpit concept to stakeholders before any backend exists
- Prototyping the layout of a dense finance dashboard for a design review
- Studying how panels, charts and status bars are arranged in a financial terminal
- Producing a styled HTML starting point that a front-end developer can extend
Frequently asked questions
How do I install the trading analysis dashboard template skill?
Download the ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Is the trading analysis dashboard template free to use?
The skill is licensed under Apache-2.0. The source does not list any price, so check the licence text for the terms that apply to your use.
Does the skill need an internet connection or live market data?
No. The skill declares that it uses no network and runs no scripts. The template contains only front-end code and placeholder or demo content, so it does not provide live market feeds.
What do I need to run it?
You need an agent runtime that can write files, which the skill metadata declares as the file_write capability, and a web browser to view the resulting HTML file.
Can I use this dashboard for real trading decisions?
No. The template is a visual layout and does not provide market data, analysis or exchange connections. It is intended for mockups, prototypes and learning.
Why isn't my agent using the skill?
Check that the skill folder is inside the right skills directory, either ~/.claude/skills/ or the project's .claude/skills/. Then ask for a trading cockpit, financial terminal or Wall-Street-style dashboard template in your request, since those are the phrases the skill is written to respond to.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you need a realistic, single-file HTML finance dashboard mockup quickly, for a design, a stakeholder pitch or learning how dense trading interfaces are built. Pick something else if you need live market data, exchange connections or a dashboard you can rely on for real investment decisions.
Download the skill