# Dashboard

> Internal tool / analytics dashboard — sidebar nav, KPI cards, charts placeholder, a data table.

- Skill: `jhd3197/dashboard` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jhd3197/dashboard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhd3197/dashboard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: jhd3197 (https://skillmd.com/u/jhd3197)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jhd3197/dashboard

---


# Dashboard / tool UI

Information density is the feature, not vibes. You are a systems designer here, not a brand designer.

## Required surfaces

1. **Sidebar nav** — 240px wide, icons + labels, current section highlighted. Sections grouped (Overview / Reports / Settings).
2. **Topbar** — workspace name, search, notifications, account menu.
3. **Header row** — page title + breadcrumbs on the left; primary action (e.g. "Export") on the right.
4. **4 KPI cards** in a row — large number, label, delta vs last period (green/red). Tabular numerics, mono for IDs/hashes.
5. **Main visual area** — one large chart placeholder (SVG with grid lines + labelled mock data is fine) OR a heatmap grid OR a multi-line area.
6. **Data table** — sortable column headers, hairline row borders (no zebra striping), pagination at the bottom. Include status pills (success / warn / danger) with restrained tinted backgrounds.
7. **Empty / loading / error states** — at least one of them should be visible (e.g. a banner or a placeholder row).

## Quality rules
- No marketing copy. No oversized headlines. No hero images.
- Hairline borders only (1px), no shadows except on dropdowns/modals.
- Inline status pills, never giant alert banners for routine signals.
- Sidebar collapses to icon-only at <1024px; full-screen drawer at <768px.
- Avoid warm beige / peach backgrounds — neutral surface, brand accent for one signal color only.