# llms-screenshots

Génère les screenshots (page entière + chaque section, en desktop 1440×900 et mobile 390×844) qui alimentent `public/llms.txt` pour aider les LLMs à reproduire le design quand ils créent une nouvelle page.

## Fichiers

- `manifest.mjs` — pages + sections capturées. **Source de vérité unique.**
- `capture.mjs` — script Playwright qui exécute les captures.
- `generate-llms-block.mjs` — injecte/régénère le bloc « Direction artistique » + « Ressources visuelles » dans `public/llms.txt` entre les balises `<!-- LLMS:AUTO:START -->` / `<!-- LLMS:AUTO:END -->`.

## Usage

```bash
# 1. Pré-requis (une seule fois sur la machine) :
npx playwright install chromium
sudo DEBIAN_FRONTEND=noninteractive npx playwright install-deps chromium

# 2. Lance le dev server dans un terminal :
npm run dev   # écoute par défaut sur http://localhost:3016

# 3. Lance la capture + l'injection dans llms.txt :
npm run llms:screenshots
```

Variables d'environnement :

| Variable | Défaut | Description |
|---|---|---|
| `LLMS_DEV_URL` | `http://localhost:3016` | URL du dev server (Vite) |
| `LLMS_BASE_URL` | `https://www.covalba.fr` | Base URL utilisée dans les liens du llms.txt |

## Sortie

```
public/
  screenshots/
    home/
      page-desktop.jpg            # page entière
      page-mobile.jpg
      hero-desktop.jpg            # une image par section
      hero-mobile.jpg
      …
    diagnostic/…
    covatherm/…
    …
```

Les screenshots sont commités : ils sont servis statiquement par Vite à `/screenshots/...` et accessibles publiquement à `https://www.covalba.fr/screenshots/...` une fois déployé.

## Ajouter une nouvelle page

1. Édite `manifest.mjs` : ajoute une entrée `PageEntry` avec `path`, `slug`, `name`, `source`, `description`.
2. Liste chaque section dans l'ordre, avec un sélecteur CSS unique. Par défaut le pattern est `main > section:nth-of-type(N)` pour les pages utilisant `<main>`, ou `div.min-h-screen > section:nth-of-type(N)` pour les pages produit.
3. Relance `npm run llms:screenshots`. Si un sélecteur ne matche pas, un warning `! selector miss` s'affiche.

## Cohérence

- Les animations sont désactivées au moment de la capture (via injection CSS).
- Les overlays (`<nav>`, sticky CTA, skip-link) sont masqués pour les captures de section, conservés pour les captures de navbar/footer dédiées.
- Le scroll progressif déclenche les `IntersectionObserver` (animations `section-reveal`, `stagger-children`).

## Régénérer uniquement le bloc llms.txt (sans recapturer)

Si tu mets à jour le manifest sans toucher au design :

```bash
npm run llms:index
```

Ça réécrit juste le bloc entre les balises sans relancer Chromium.