# S1-08 — Spotify Skin

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

## User Story
As a user, I want a Spotify-style music player UI with playlist sidebar, album art, and playback controls.

## Acceptance Criteria
- [ ] Dark theme: `--color-surface` → near-black (#121212), `--color-surface-alt` → dark gray (#181818)
- [ ] Green primary: `--color-primary` → Spotify green (#1DB954)
- [ ] Three-zone layout: sidebar (playlists) + main content + bottom player bar
- [ ] Sidebar: playlist list, "Your Library" section, navigation links
- [ ] Main area: album grid (`data-columns="4"`) with cover art cards + `.rounded-md`
- [ ] Bottom player bar: album art thumbnail, track info, playback controls (prev/play/next), progress bar (`.bg-gray-200` + green fill), volume slider
- [ ] Playlist view: table (`.table`) with #, title, album, duration columns
- [ ] 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: `spotify-light.png` + `spotify-dark.png`
- [ ] If css-base gap found: update `dist/skill/css-base/SKILL.md` + redeploy via `/skiller`

## Key CSS Variables to Override
```css
--color-surface: oklch(0.12 0 0);
--color-surface-alt: oklch(0.15 0 0);
--color-primary: oklch(0.7 0.2 150);
--color-text: oklch(0.95 0 0);
--color-text-muted: oklch(0.65 0 0);
```