Dashboard Skill
Produce a single-screen admin / analytics dashboard.
Workflow
- Read the active DESIGN.md (injected above). Colors, typography, spacing,
component styling all come from it. Do not invent new tokens.
- Classify what the dashboard monitors (sales, traffic, usage, incidents,
ops, etc.) from the brief. Generate specific, plausible metric names and
values — no "Metric A / Metric B" placeholders.
- Lay out the required regions:
- Left sidebar (220–260px): brand mark at top, 6–8 nav links with
icons, active state uses the DS accent.
- Top bar: page title on the left, search input + user avatar / status
on the right.
- Main:
- Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
- Row 2: one primary chart (full width or 2/3) — render as an inline SVG
line / bar / area chart drawn from real-looking numbers.
- Row 3: one secondary chart or table (recent events, top items, etc.).
- Write one self-contained HTML document:
<!doctype html> through </html>, CSS in one inline <style> block.- CSS Grid for the overall layout; Flexbox inside cards.
- Semantic HTML:
<aside>, <header>, <main>, <section>.
- Tag each logical region with
data-od-id="slug" for comment mode.
- Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
<polyline> with a subtle area fill. A bar chart is N <rect>s with
DS-accent fill. Label axes lightly (muted text, smaller scale).
- Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes
(trading, crypto) tighten rows.
Output contract
Emit between <artifact> tags:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
1---2name: dashboard3description: Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.4---5
6# Dashboard Skill
7
8Produce a single-screen admin / analytics dashboard.
9
10## Workflow
11
121. **Read the active DESIGN.md** (injected above). Colors, typography, spacing,
13 component styling all come from it. Do not invent new tokens.
142. **Classify** what the dashboard monitors (sales, traffic, usage, incidents,
15 ops, etc.) from the brief. Generate specific, plausible metric names and
16 values — no "Metric A / Metric B" placeholders.
173. **Lay out** the required regions:
18 - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with
19 icons, active state uses the DS accent.
20 - **Top bar**: page title on the left, search input + user avatar / status
21 on the right.
22 - **Main**:
23 - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
24 - Row 2: one primary chart (full width or 2/3) — render as an inline SVG
25 line / bar / area chart drawn from real-looking numbers.
26 - Row 3: one secondary chart or table (recent events, top items, etc.).
274. **Write** one self-contained HTML document:
28 - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
29 - CSS Grid for the overall layout; Flexbox inside cards.
30 - Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
31 - Tag each logical region with `data-od-id="slug"` for comment mode.
325. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of
33 `<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
34 DS-accent fill. Label axes lightly (muted text, smaller scale).
356. **Self-check**:
36 - Every color comes from DESIGN.md tokens.
37 - Accent used at most twice (sidebar active + one chart highlight).
38 - Sidebar + top bar are sticky; main scrolls independently.
39 - Density matches the DS mood — airy DSes get more padding, dense DSes
40 (trading, crypto) tighten rows.
41
42## Output contract
43
44Emit between `<artifact>` tags:
45
46```
47<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
48<!doctype html>
49<html>...</html>
50</artifact>
51```
52
53One sentence before the artifact, nothing after.
gabrielmoreira