﻿# S1-05 — Windows 11 Skin

**Epic:** Demo Pages
**Priority:** P1
**Role:** Developer
**Depends on:** S1-01

## User Story
As a user, I want a Windows 11-style desktop UI with taskbar, start menu, and windows.

## Acceptance Criteria
- [ ] Mica-like translucent surfaces: `data-blur="lg"` + semi-transparent `--color-surface-overlay`
- [ ] Centered taskbar at bottom: `.flex .justify-center .items-center` with app icons
- [ ] Start menu: overlay panel with grid of app tiles (`data-columns="4"`) + pinned/recommended sections
- [ ] Window component: title bar (icon + title + min/max/close buttons), body area
- [ ] Rounded corners: `--radius-md` to 8px (Win11 style)
- [ ] System tray: clock, wifi/battery icons in taskbar right area
- [ ] Acrylic/blur effects: `data-blur` on taskbar and start menu
- [ ] 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: `windows-light.png` + `windows-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.55 0.2 250); /* Windows blue */
--color-surface: oklch(0.97 0 0);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
```
