ui-design

name: ui-design description: "OBLIGATOIRE pour: apparence et comportement visuel du frontend — pages, dashboards, formulaires, cartes, tableaux, états vide/chargement/erreur, responsive, couleurs de modules, cohérence visuelle. Déclencheurs: design, style, layout, Tailwind, formulaire, dashboard, responsive, « améliorer l'apparence ». NE PAS utiliser pour: câblage routes/permissions/hooks (module-development), logos et visuels images (skill global canvas-design)."

UI Design — RadioManager Modular

PRIMARY RESPONSIBILITY

Conventions visuelles et patterns UI du frontend : grammaire visuelle, couleurs d'accent par module, layouts, formulaires, états d'interaction, QA visuelle.

USE THIS SKILL WHEN

• On conçoit ou modifie une page, un dashboard, un formulaire, une carte, un tableau.
• On travaille le responsive, les états (vide/chargement/erreur/permission), le style Tailwind.
• On harmonise l'apparence entre modules.

DO NOT USE THIS SKILL WHEN

• Le travail est structurel : routes, sidebar, permissions, hooks, clients API (→ module-development ; les deux skills se combinent si la tâche mêle structure ET rendu).
• On crée un logo ou un visuel image/PDF (→ skill global canvas-design, référence externe).
• On touche au backend (→ backend-fastapi).

TRIGGERS

design, UI, style, layout, Tailwind, formulaire, dashboard, carte, tableau, responsive, mobile, état vide, loading, apparence, couleur.

OWNED DIRECTORIES

• Aspect visuel de src/modules/*/pages/, src/modules/*/components/, src/shared/components/, src/shared/layouts/

REQUIRED DEPENDENCIES

• Les pages/composants voisins du fichier cible (inspecter avant d'écrire — reproduire les patterns du module)

OPTIONAL DEPENDENCIES

• Skill module-development — si la tâche ajoute aussi des routes/permissions
• outputs/design-philosophy.md — direction visuelle « Modular Convergence » (si présent)

RELATED DOCUMENTATION

• CLAUDE.md § Règles CRITIQUES Tailwind (blue-*, pas de couleurs custom)

Sensation produit

Plateforme opérationnelle, pas un site marketing : calme, précis, modulaire, orienté travail. Densité professionnelle, hiérarchie claire, décoration sobre. Identité de module portée par la couleur d'icône et de petits accents — jamais d'aplats pleine page ni de dégradés décoratifs.

Grammaire visuelle existante

• Fond app : bg-gray-50 ; Launchpad : from-gray-50 to-gray-100.
• Layout module : p-4 lg:p-8, space-y-6.
• Sidebar : gray-900 sombre, item actif blue-600, icône module en module.color.
• En-têtes : icône Lucide + text-2xl font-bold text-gray-900, sous-titre text-sm text-gray-500.
• Cartes : blanches, border border-gray-100/200, shadow-sm, rounded-xl/rounded-lg.
• Boutons : icônes Lucide quand disponible.
• États vides : concis, actionnables ; chargement : spinner compact couleur module ; erreurs : bg-red-50 border border-red-200.

Couleurs de modules

Classes Tailwind standard + module.color inline — jamais de couleurs custom dans le thème.

Règles de layout

• Construire la surface outil, pas une landing page.
• Sections non encadrées sauf items répétés, panneaux, modales, tableaux ; pas de cartes imbriquées sauf pattern existant.
• Grilles prévisibles : grid-cols-1, sm:grid-cols-2, lg:grid-cols-3/4.
• Stabiliser les formats fixes (tailles explicites, aspect-ratio, line clamps) ; aucun débordement de texte.

Formulaires

Champs groupés, labels clairs, patterns du module cible, erreurs près du champ, actions save/cancel cohérentes.

États à couvrir pour chaque changement UI

Données normales, chargement, vide, erreur, restreint par permission, mobile ET desktop. Hover/focus subtils et cohérents.

QA visuelle finale

• OK en mobile et desktop, pas de texte coupé/superposé.
• Accent = couleur du module ; états loading/error/empty présents où il y a du fetch.
• Le résultat ressemble à RadioManager. Vérifier sur le port 5180 si un dev server est disponible.