dashboard-design
Installation
SKILL.md
Dashboard Design Skill
Build complete, working dashboards — not just pretty screenshots. Every output includes real calculated data, wired-up interactions, and correct component states.
Output formats
- HTML — single file, Chart.js from CDN, no build step. Tell the agent:
"in HTML"or"as a single HTML file" - React — JSX component, Recharts. Tell the agent:
"in React"or"as a React component"
Style presets
Always specify a preset. If none is given, use dark-terminal.
| Preset | Accent | Background | Font | When to use |
|---|---|---|---|---|
dark-terminal |
#06b6d4 cyan |
#080808 near-black |
Geist Mono | SaaS, ops, developer tools |
carbon-light |
#0f62fe IBM blue |
#f4f4f4 warm white |
IBM Plex Sans | Enterprise, B2B, formal reports |
neutral-bw |
#111827 near-black |
#ffffff white |
Geist + Geist Mono | Any brand, law firms, finance |