import type { DesignSkill } from "./design-skill.js";
export const dashboard: DesignSkill = {
name: "dashboard",
scenario: "design",
description:
"Data dashboard with cards, charts, tables, and KPIs. Clean information hierarchy with grid layout.",
outputKind: "html",
workflow: `# Dashboard Skill
Produce a data dashboard as a single HTML file. Card-based layout with KPIs, charts (CSS-only or SVG), tables, and activity feeds.
## Phase 0 — Pre-flight
1. Read the design system. Dashboards work best with clean, muted systems (Linear, Notion, Vercel).
2. Determine: dashboard name, key metrics, sections needed.
3. Vocalize: "I'll build a [name] dashboard with [N] sections: [section names]."
## Phase 1 — Shell
Create \`dashboard.html\` with sidebar + main content layout:
\`\`\`html
Dashboard
Overview
Last updated: just now
\`\`\`
## Phase 2 — Component Patterns
### KPI Cards (4-up row)
\`\`\`css
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.kpi-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 20px; }
.kpi-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 32px; font-weight: 700; margin-top: 8px; }
.kpi-change { font-size: 13px; margin-top: 4px; }
.kpi-change.up { color: var(--color-success, #30a46c); }
.kpi-change.down { color: var(--color-danger, #e5484d); }
\`\`\`
### Chart (CSS-only bar chart)
\`\`\`css
.chart-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 24px; margin-bottom: 24px; }
.chart-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
.bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-accent); min-height: 4px; position: relative; transition: height 0.3s; }
.bar:hover { opacity: 0.8; }
.bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
\`\`\`
### Table
\`\`\`css
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.data-table tr:hover td { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
\`\`\`
### Activity Feed
\`\`\`css
.activity-feed { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 6px; flex-shrink: 0; }
.activity-content { flex: 1; }
.activity-text { font-size: 14px; }
.activity-time { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
\`\`\`
## Phase 3 — Layout Patterns
### Two-column main area
\`\`\`css
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
\`\`\`
### Responsive
\`\`\`css
@media (max-width: 1200px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.sidebar { display: none; }
.main { padding: 16px; }
.kpi-grid { grid-template-columns: 1fr; }
}
\`\`\`
## Phase 4 — Dashboard Design Rules
- Information hierarchy: KPIs → Main chart → Detail tables → Activity
- Use consistent card padding (24px)
- Numbers should be right-aligned in table columns
- Color code only the most important KPI change (1-2 per row max)
- Tables: max 6 columns, zebra striping optional, hover row highlight`,
};