# S1-04 — WhatsApp Skin

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

## User Story
As a user, I want a WhatsApp-style messaging UI with contact list and chat panel.

## Acceptance Criteria
- [ ] Green primary: `--color-primary` → WhatsApp green (#25D366)
- [ ] Teal header: dark teal top bar
- [ ] Two-panel layout: `.flex` with contact list (30%) + chat area (70%)
- [ ] Contact list: avatar (`.rounded-full`), name, last message (`.truncate`), timestamp
- [ ] Chat area: message bubbles (sent = green bg, received = white/gray bg) using `data-bg` + `data-radius`
- [ ] Chat input bar: `.flex .items-center` with text input + send button
- [ ] Search bar in contact panel
- [ ] Chat wallpaper: subtle pattern or tinted `--color-surface-alt`
- [ ] 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: `whatsapp-light.png` + `whatsapp-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.72 0.2 155);
--color-surface: oklch(0.93 0.01 90);
--color-surface-alt: oklch(0.97 0.005 90);
```