dashboard

1# Dashboard Skill
2 
3Produce a single-screen admin / analytics dashboard.
4 
5## Workflow
6 
71. **Read the active DESIGN.md** (injected above). Colors, typography, spacing,
8   component styling all come from it. Do not invent new tokens.
92. **Classify** what the dashboard monitors (sales, traffic, usage, incidents,
10   ops, etc.) from the brief. Generate specific, plausible metric names and
11   values — no "Metric A / Metric B" placeholders.
123. **Lay out** the required regions:
13   - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with
14     icons, active state uses the DS accent.
15   - **Top bar**: page title on the left, search input + user avatar / status
16     on the right.
17   - **Main**:
18     - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
19     - Row 2: one primary chart (full width or 2/3) — render as an inline SVG
20       line / bar / area chart drawn from real-looking numbers.
21     - Row 3: one secondary chart or table (recent events, top items, etc.).
224. **Write** one self-contained HTML document:
23   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
24   - CSS Grid for the overall layout; Flexbox inside cards.
25   - Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
26   - Tag each logical region with `data-od-id="slug"` for comment mode.
275. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of
28   `<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
29…