# Story S1-01 — Refonte complète des démos css-base

**Sprint:** 1  
**Role:** Designer + Developer  
**Priority:** High  
**Status:** IN PROGRESS — Phase 1 (Audit) Complete

---

## Objectif

Refaire toutes les démos de `css-base` en utilisant les nouvelles capacités et références précises de la skill.

---

## Contexte

La skill `css-base` a été mise à jour avec des références plus précises (tokens, inspiration, patterns). Les 10 démos existantes doivent être améliorées pour exploiter ces nouvelles capacités.

**Démos existantes (10) :**
1. netflix — Dark-first, rouge Netflix
2. amazon — Light-first, orange Amazon + secondary color
3. whatsapp — Vert WhatsApp, light/dark
4. windows — Windows 11, bleu + rounded
5. macos — macOS, light-first, blur effects
6. spotify — Dark, vert Spotify
7. slack — Purple Slack, light-first
8. github — GitHub light/dark
9. dashboard — Dashboard générique
10. terminal — Terminal, monospace, vert/ambre

---

## Critères d'acceptation

- [ ] **Chaque démo utilise les seed tokens** (pas les tokens calculés)
- [ ] **Skinning cohérent** avec SKINNING.md
- [ ] **Nouvelles capacités exploitées :**
  - `@function` CSS (Chrome 139+) — color manipulation
  - `attr()` utilities (Chrome 139+) — dynamic styling
  - `light-dark()` — dark mode automatique
  - Design tokens à jour (v0.1.30)
- [ ] **References inspiration utilisées** — `references/inspiration/`
- [ ] **Chaque démo a un skin.css propre**
- [ ] **Index des démos généré** — page d'accueil avec liens
- [ ] **Tests visuels** — screenshots avant/après
- [ ] **Documentation mise à jour** — SKINNING.md + README

---

## Tâches

### Phase 1 : Audit (Designer)
1. Lister toutes les démos et leurs skins actuels
2. Identifier les gaps vs nouvelles capacités css-base
3. Créer matrix de priorités par démo

### Phase 2 : Refonte (Designer + Developer)
Pour chaque démo :
1. **Lire `references/inspiration/`** — extraire patterns
2. **Mettre à jour `skin.css`** — seed tokens + nouvelles capacités
3. **Mettre à jour HTML** — utiliser `attr()` utilities si pertinent
4. **Mettre à jour CSS** — utiliser `@function` si pertinent
5. **Tester light/dark** — vérifier `light-dark()`
6. **Screenshot** — avant/après

### Phase 3 : Index + Docs
1. Créer page d'accueil `/dist/demo/index.html`
2. Mettre à jour `SKINNING.md` avec matrix complète
3. Ajouter section "Demos" dans README principal

### Phase 4 : Tests
1. Tests visuels manuels (chaque démo)
2. Tests responsive (mobile, tablet, desktop)
3. Tests dark mode (chaque démo)
4. Documenter résultats

---

## Estimation

**Points :** 13  
**Temps :** 2-3 jours

---

## Livrables

- 10 démos refaites avec nouvelles capacités
- `dist/demo/index.html` — page d'accueil
- `dist/demo/SKINNING.md` — mis à jour
- Screenshots avant/après dans `dist/demo/screenshots/`

---

## Notes

**Priorité :** Commencer par netflix, spotify, github (les plus populaires)
**Skill css-base :** Utiliser la skill pour guider chaque refonte