AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Data Dashboard Builder

Builds dense analytics consoles and trading terminals with token-driven inline SVG charts, a per-chart accessibility contract, and dark-mode contrast fixes.

Design & UIAdvanced★ 3,145⑂ 303AI score 9/10Last updated: Oct 27, 2026

What it does

  • Replaces the "four equal stat cards" wall with a band-based layout sequence: hero metric with its own chart → quiet secondary figures → three different chart shapes → a real sortable table plus a feed → a deliberate footer, on an explicit 12-column grid.
  • Gives geometry recipes for 14 chart types — candlestick, volume, moving average, sparkline, stacked area, depth, waterfall, donut, radial gauge, scatter/bubble, correlation matrix, heatmap, order book — all as dependency-free inline SVG filled from --color-chart-* tokens.
  • Defines an accessibility contract per chart: role="img" with aria-label or <title>/<desc>, never colour alone, table caption/scope/aria-sort only when sorting actually works.
  • Documents domain-correctness checks (symmetric correlation matrix, stacked areas that sum, waterfall closing bar) and the contrast/layout traps that automated gates never catch.
  • Ends with a gate loop (render measurement, state verification, axe in dark, responsive at 1.25 scale, interactive clicks) plus a mandatory screenshot review at 1600px and 390px.

Who it's for

  • Front-end engineers shipping analytics consoles, trading desks, or NOC/monitoring screens.
  • Teams that prefer hand-rolled SVG visualisation over a charting library.
  • Design-system owners who must truly pass WCAG AA in both light and dark themes.

Examples

  1. "Build a revenue console" → hero revenue figure at 3x body size with its trend chart, then a band of donut + ranked bars + sparklines, then a sortable detail table.
  2. "I need a trading terminal view" → candlesticks with volume on the same x-scale, a moving-average polyline, a mirrored depth chart and an order book with per-row depth bars.
  3. "My dark theme looks washed out" → find chart-palette colours used as text (the 2.65:1 case), move colour to icons and signs, and re-measure with the axe gate.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/data-dashboard/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the .claude/skills/data-dashboard folder from the GitHub repo plugin87/ux-ui-agent-skills into my ~/.claude/skills/data-dashboard/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/plugin87/ux-ui-agent-skills.git && cp -r ux-ui-agent-skills/.claude/skills/data-dashboard ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and switch to your projects folder.
  2. Clone the whole repository — this skill reads tokens, scripts, and examples from the project root, so copying only the skill folder will fail: 
    git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. To use the skill standalone, copy the folder into Claude: 
    cp -r ux-ui-agent-skills/.claude/skills/data-dashboard ~/.claude/skills/
  4. For the full kit, run the project's initialiser from inside the repo: 
    cd ux-ui-agent-skills && npx ux-ui-agent-skills init
  5. Install Node.js 18+ since the gate scripts run on Node with a headless browser.
  6. Restart Claude Code and ask for something like "build a monitoring dashboard". If Claude replies KIT_MISSING, revisit steps 2–4.
View source on GitHub ↗License: MIT