﻿# S1-12 — Terminal / CLI Skin

**Epic:** Demo Pages
**Priority:** P1
**Role:** Developer
**Depends on:** S1-01

## User Story
As a user, I want a retro terminal/CLI-style UI with command prompt, file manager, and system monitor panels.

## Acceptance Criteria
- [ ] Full dark theme: black background, green/amber monospace text
- [ ] Monospace font throughout (`--font-mono` or custom override)
- [ ] Terminal window: title bar with traffic lights, scrollable output area with colored prompt lines (`$`, `>`)
- [ ] File manager panel: tree-style directory listing using `.table` with file permissions, size, date
- [ ] System monitor: ASCII-style progress bars for CPU/RAM/Disk using `data-bg` colored divs
- [ ] Tab bar: multiple terminal tabs using `.btn-ghost` or badges
- [ ] Split-pane layout: `.flex` with resizable-look panels (top/bottom or left/right)
- [ ] Scanline or CRT effect via CSS (subtle `background-image: repeating-linear-gradient`)
- [ ] 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: `terminal-light.png` + `terminal-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.05 0 0); /* Pure black */
--color-primary: oklch(0.7 0.25 145); /* Terminal green */
--color-text: oklch(0.7 0.25 145);
--color-text-muted: oklch(0.5 0.15 145);
--default-font-size: 0.8125rem;
```
