Skill Web - Gestion des pages

Description

Skill generique pour travailler sur n'importe quelle page web du projet. Detecte automatiquement les fichiers associes (page, API frontend, router backend, documentation).

Usage

/web <page>                    # Mode normal : travailler sur une page specifique
/web <page> --bug <desc>       # Mode debug : corriger un bug sur la page
/web <page> --new <desc>       # Mode ajout : ajouter une feature a la page
/web <page> --design           # Mode design : verifier la conformite au design system
/web <page> --validate         # Mode validate : verifier le frontmatter et l'implementation
/web                           # Sans argument : demande quelle page cibler

Arguments

Pages disponibles

Convention de nommage documentation : docs/specs/pages/<order>-<page>.md (ex: 05-simulator.md)

Pages principales

Pages Administration (Serveur uniquement)

Pages Exporters (Client uniquement)

Detection automatique des fichiers

Quand une page est selectionnee, le skill detecte automatiquement :

1. •Fichier page : apps/web/src/pages/<Page>.tsx ou apps/web/src/pages/<Page>/index.tsx
2. •Composants : apps/web/src/pages/<Page>/components/**/*
3. •API frontend : apps/web/src/api/<page>.ts
4. •Router backend : apps/api/src/routers/<page>.py
5. •Documentation : Voir section "Structure de documentation" ci-dessous
6. •Commande existante : .claude/commands/web_<page>.md

Structure de documentation

La documentation des pages suit deux formats selon la complexite :

Page simple (fichier .md)

docs/specs/pages/<order>-<page>.md

Caracteristiques :

• •Page sans onglets
• •Un seul fichier de documentation
• •Le prefixe <order>- est un nombre pour l'ordre dans le menu (ex: 05-, 07-)
• •Exemple : docs/specs/pages/02-dashboard.md, docs/specs/pages/07-tempo.md

Page avec onglets (dossier)

docs/specs/pages/<page>/
  ├── <order1>-<onglet1>.md
  ├── <order2>-<onglet2>.md
  └── <order3>-<onglet3>.md

Caracteristiques :

• •Page avec plusieurs onglets/sous-pages
• •Un fichier .md par onglet, prefixe numerique pour l'ordre
• •Chaque fichier a un frontmatter YAML (voir ci-dessous)
• •Exemple : docs/specs/pages/contributes/ avec 01-offers.md, 02-new-offers.md, 03-my-offers.md

Frontmatter YAML

Chaque fichier de documentation doit avoir un frontmatter YAML :

---
name: 01-offers
path: /contribute/offers
description: Onglet des offres disponibles
mode_client: false
mode_server: true
menu: Contribuer
subMenu: Contribuer
tab: Toutes les offres
---

Tableau Features (OBLIGATOIRE)

Chaque documentation de page DOIT inclure un tableau "Features" juste apres le titre H1.

Ce tableau sert de TODO list pour suivre l'avancement de l'implementation.

## Features

| Feature                     | Statut |
| --------------------------- | ------ |
| Fonctionnalite principale   | FAIT   |
| Feature en cours            | WIP    |
| Feature planifiee           | TODO   |
| Feature abandonnee          | SKIP   |

Statuts disponibles :

Regles :

1. •Placer le tableau immediatement apres le titre H1 et la description courte
2. •Lister toutes les fonctionnalites de la page
3. •Mettre a jour le statut a chaque modification
4. •Chaque feature FAIT doit avoir une section ### Feature (FAIT) plus bas dans le document

Exemple complet :

---
name: tempo
path: /tempo
description: Calendrier TEMPO EDF
mode_client: true
mode_server: true
menu: Tempo
---

# Tempo

Page affichant le calendrier TEMPO EDF.

## Features

| Feature            | Statut |
| ------------------ | ------ |
| Calendrier mensuel | FAIT   |
| Statistiques       | FAIT   |
| Export PDF         | TODO   |

## Details implementation

### Calendrier mensuel (FAIT)

Description de l'implementation...

### Statistiques (FAIT)

Description de l'implementation...

Comportement du menu :

• •Si subMenu est absent → la page est un lien direct dans le menu principal
• •Si subMenu est present → la page apparait comme sous-element du menu parent

Comportement des onglets :

• •Si tab est present → la page fait partie d'un groupe d'onglets (navigation horizontale)
• •Chaque fichier .md dans le dossier represente un onglet
• •Les onglets sont tries par le prefixe numerique du fichier (01-, 02-, etc.)

Exemple de navigation :

Menu lateral
├── Dashboard
├── Consommation
├── Contribuer          ← menu (parent)
│   ├── Offres          ← subMenu: Offres
│   ├── Nouvelle        ← subMenu: Nouvelle
│   └── Mes contributions ← subMenu: Mes contributions
└── Tempo

Detection automatique

Pour determiner le type de documentation :

1. •Verifier si docs/specs/pages/<page>/ existe (dossier)
2. •Si oui → page avec onglets, lire tous les fichiers .md du dossier
3. •Sinon → chercher un fichier avec pattern docs/specs/pages/*-<page>.md (ex: 05-simulator.md)
4. •Si trouve → page simple, lire le fichier unique
5. •Sinon → documentation manquante (a creer)

Commande Glob pour detection :

# Dossier (pages avec onglets)
docs/specs/pages/<page>/

# Fichier simple (avec prefixe numerique)
docs/specs/pages/*-<page>.md

Workflow

Etape 1 : Identification de la page (OBLIGATOIRE)

Si aucune page n'est specifiee dans la commande, proceder en deux etapes :

Etape 1.1 : Choisir le type de page

Utiliser AskUserQuestion :

• •"Pages principales"
• •"Pages administration"
• •"Pages exporters"

ATTENDRE la reponse.

Etape 1.2 : Choisir la page specifique

Utiliser AskUserQuestion avec les pages du tableau correspondant (section "Pages disponibles" ci-dessus) :

• •Pages principales → Lire le tableau "Pages principales"
• •Pages administration → Lire le tableau "Pages Administration"
• •Pages exporters → Lire le tableau "Pages Exporters"

Proposer les valeurs de la colonne Page comme options.

ATTENDRE la reponse avant de continuer.

NE PAS deviner la page. Toujours demander si non specifiee.

Etape 2 : Chargement du contexte

1. •Detecter le type de documentation :
   • •Si docs/specs/pages/<page>/ existe → page avec onglets → lire tous les .md du dossier
   • •Sinon chercher docs/specs/pages/*-<page>.md (avec prefixe numerique) → page simple
2. •Lire la commande existante si elle existe (.claude/commands/web_<page>.md)
3. •Identifier les fichiers de la page
4. •Verifier le mode d'execution (Serveur/Client/Les deux)

Etape 3 : Execution selon le mode

Mode --validate : Workflow complet de verification

Ce mode execute les etapes existantes en mode "lecture seule" pour valider la coherence.

1. •

   Step 01 - Explore : Executer normalement pour generer le rapport de conformite

   • •Verifier frontmatter, routes, navigation, modes, features, APIs
   • •NE PAS passer au step 02 (pas de planification)
2. •

   Step 04 - Lint : Executer les verifications lint

   • •Frontend : cd apps/web && npm run lint
   • •Backend : cd apps/api && make lint (si fichiers backend concernes)
3. •

   Step 05 - Validate : Executer les verifications runtime

   • •Logs Docker : make logs
   • •Design : /check_design ou docs/specs/design/checklist.md
   • •NE PAS demander validation utilisateur (mode automatique)
4. •

   Rapport final : Afficher un resume global

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 VALIDATION COMPLETE - <page_name>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Exploration (01)  : [✅ OK / ⚠️ Warnings / ❌ Erreurs]
Lint (04)         : [✅ OK / ❌ Erreurs]
Validation (05)   : [✅ OK / ⚠️ Warnings / ❌ Erreurs]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RESULTAT : [✅ VALIDE / ❌ ECHEC - <N> problemes]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

NE PAS executer les steps 02 (plan), 03 (execute), 06 (docs), 07 (commit).

Etape 4 : Lint

make lint

Etape 5 : Validation utilisateur

Utiliser AskUserQuestion pour demander validation.

Etape 6 : Documentation

Mettre a jour la documentation si necessaire :

• •Page simple : modifier docs/specs/pages/<order>-<page>.md (ex: 05-simulator.md)
• •Page avec onglets : modifier le fichier .md correspondant a l'onglet dans docs/specs/pages/<page>/

Etape 7 : Commit (si demande)

Respecter .claude/rules/commits.md (Semantic Release).

Exemples

# Travailler sur le dashboard
/web dashboard

# Corriger un bug sur la page Tempo
/web tempo --bug "Le calendrier ne s'affiche pas correctement"

# Ajouter une feature sur la page EcoWatt
/web ecowatt --new "Ajouter export PDF du signal"

# Verifier le design de la page Admin Users
/web admin-users --design

# Valider le frontmatter et l'integration de la page Tempo
/web tempo --validate

# Sans argument : demande quelle page
/web

References

• •Design system : docs/specs/design/
• •Ordre du menu : docs/specs/pages/_menu.md
• •Regles modes : .claude/rules/modes.md
• •Regles commits : .claude/rules/commits.md
• •Regles pages : .claude/rules/pages.md