# S1-11 — Dashboard Analytics Skin

**Epic:** Demo Pages
**Priority:** P1
**Role:** Developer
**Depends on:** S1-01

## User Story
As a user, I want a modern analytics dashboard UI with KPI cards, charts area, and data tables.

## Acceptance Criteria
- [ ] Clean light theme with indigo/violet accent
- [ ] Top bar: app name, breadcrumb, notifications bell, user avatar
- [ ] Left sidebar: nav menu with icons (Dashboard, Analytics, Users, Settings sections)
- [ ] KPI row: 4 stat cards (`.card` + `.grid data-columns="4"`) with metric value, label, trend arrow, sparkline placeholder
- [ ] Chart area: 2-column grid with placeholder chart panels (`.card` with colored gradient header zones)
- [ ] Data table: `.table .table-striped` with user data, status badges, action buttons
- [ ] Activity feed: timeline-style list with timestamps and event descriptions
- [ ] All styling via `skin.css` variable overrides only
- [ ] **Light/Dark mode:** skin.css overrides `--default-color-*-light` AND `--default-color-*-dark` variants; demo is coherent and lisible in both modes
- [ ] Theme toggle button visible in demo nav bar

## Validation
- [ ] Playwright screenshots: `dashboard-light.png` + `dashboard-dark.png`
- [ ] If css-base gap found: update `dist/skill/css-base/SKILL.md` + redeploy via `/skiller`

## Key CSS Variables to Override
```css
--color-primary: oklch(0.5 0.25 280); /* Indigo */
--color-surface: oklch(0.96 0.005 265);
--color-surface-alt: oklch(0.99 0 0);
```