# S1-09 — Slack Skin

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

## User Story
As a user, I want a Slack-style workspace UI with channel sidebar, message thread, and compose area.

## Acceptance Criteria
- [ ] Purple/aubergine sidebar: dark purple left panel with channel list
- [ ] Light main content area for messages
- [ ] Three-zone layout: workspace sidebar + channel content + optional thread panel
- [ ] Sidebar: workspace name, channel list (# prefixed), DM list with online status dots (`.rounded-full .bg-green-100`)
- [ ] Message area: messages with avatar, username (`.font-semibold`), timestamp, message text
- [ ] Thread replies: indented or right-panel thread view
- [ ] Compose bar: rich text input area with formatting buttons, emoji, attach
- [ ] Channel header: channel name, topic, member count, search
- [ ] 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: `slack-light.png` + `slack-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.45 0.2 300); /* Slack purple */
--color-surface: oklch(0.98 0 0);
--color-surface-alt: oklch(0.25 0.05 300); /* aubergine sidebar */
```