Auditer la cohérence d’un Back Office avec Backoffice Auditor

Contexte

Votre Back Office (SaaS, ERP, CRM) a plusieurs pages, plusieurs contributeurs, et les incohérences s’accumulent : boutons de différents styles, espaces mal alignés, patterns d’interaction qui varient. backoffice-auditor est un Senior Product Designer qui scanne l’intégralité de votre application, identifie les incohérences visuelles et fonctionnelles, et propose un plan de standardisation avec code.

Prérequis

• Projet Next.js (App Router) avec Shadcn UI
• Tailwind CSS configuré
• Composants React Hook Form + Zod pour formulaires
• TanStack Table pour les tables (optionnel mais recommandé)
• lucide-react pour les icons
• Sonner pour les toasts/notifications
• Accès à docs/todo.md pour créer les tâches
• Skill shadcn/ui recommandé : npx skills add shadcn/ui

Étapes

1. Invoquer backoffice-auditor

/ulk:frontend:backoffice-auditor
# ou
/ulk:backoffice-auditor
# ou
audit backoffice
# ou
audit consistency

2. Phase 0 : Détection automatique

L’agent détecte :

🔍 Backoffice Auditor — Initialisation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Framework       : Next.js 15 (App Router)
UI Library      : Shadcn UI v2
CSS Framework   : Tailwind CSS 3.4
State Management: Zustand (détecté)
Forms           : React Hook Form + Zod

Pages détectées : 28
Composants      : 156 fichiers
Patterns visuels: 4 (button, card, dialog, sidebar)

État actuel : À scanner pour incohérences

3. Phase 1-2 : Scan de cohérence

L’agent analyse :

• Button variants : primary, secondary, danger, ghost, outline
• Color system : usage de Tailwind vs custom colors
• Spacing : padding/margin consistency
• Typography : font sizes, line heights, weights
• Form patterns : label placement, error handling
• Table layouts : header alignment, row density
• Modal/Dialog patterns : overlay, focus management
• Navigation : breadcrumb, sidebar, header consistency

Affichage détecté :

📊 AUDIT COHÉRENCE — Back Office
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Incohérences détectées:

1. Button styles (3 variants conflictuels)
   - 12 usages de btn-primary classique
   - 8 usages de button className custom
   - 3 usages de Button shadcn direct
   → Standardiser vers Button shadcn (100%)

2. Form labels
   - 24 inputs avec <label> propre
   - 15 inputs avec placeholder uniquement
   → Ajouter labels manquants

3. Color palette
   - 8 custom colors (Tailwind + inline)
   → Remplacer par theme Tailwind

Score de cohérence actuel  : 5.8/10
Score estimé après fixes  : 9.2/10
Effort estimé             : 4-6 heures

4. Phase 3-4 : Plan d’action priorisé

L’agent génère audit-backoffice.md :

## Incohérences priorisées

### Phase 1 : Boutons (30 min)
- Standardiser tous les boutons → Button shadcn
- Créer palette de variants (primary, secondary, danger, ghost)
- Effort: 30 min

### Phase 2 : Formulaires (1h)
- Ajouter labels à tous les inputs
- Unifier error handling (ErrorMessage component)
- Effort: 1h

### Phase 3 : Couleurs (45 min)
- Remplacer custom colors par Tailwind
- Audit du theme Tailwind (light/dark mode)
- Effort: 45 min

Total: 2h 15 min

5. Mode orchestré (contexte reçu)

Si un bloc CONTEXTE PROJET: est transmis, l’agent :

• Skip la Phase 0 (reconnaissance)
• Commence directement au scan (Phase 1)
• Utilise les infos du contexte pour optimiser les patterns

Exemple de sortie

Rapport généré : docs/reports/audit-backoffice-20260414.md

---
title: Audit Cohérence Back Office
date: 2026-04-14
project: crm-saas
score: 5.8/10
---

# Audit Back Office — CRM SaaS

## Résumé Exécutif

Scan exhaustif révèle 3 catégories principales d'incohérences:
- Button styling (3 patterns conflictuels)
- Form labels (15 inputs sans <label>)
- Color palette (8 custom colors)

## Incohérences détectées

### 1. Buttons (Haute priorité)
- Fichiers affectés: 24
- Patterns conflictuels: 3
- Fix: Utiliser Button shadcn exclusivement
- Effort: 30 min

### 2. Forms (Haute priorité)
- Fichiers affectés: 15
- Labels manquants: 15
- Fix: Ajouter label + associer via htmlFor
- Effort: 1h

### 3. Colors (Moyenne priorité)
- Custom colors non-standard: 8
- Fix: Remplacer par theme Tailwind
- Effort: 45 min

## Tâches générées
- [ ] Backoffice: Standardiser tous les buttons (30 min)
- [ ] Backoffice: Ajouter labels formulaires (1h)
- [ ] Backoffice: Remplacer custom colors (45 min)

Variantes

• Variante A : Focus critique uniquement — --critical-only pour ignorer les recommandations faibles
• Variante B : Module spécifique — --scope src/pages/dashboard pour auditer une page spécifique
• Variante C : Avec fix automatique — --mode=auto pour générer les fixes directement

Agents enchaînés

Flux typique :

backoffice-auditor (frontend/04)
  ├─ Phase 0 : Détection (5 min)
  ├─ Phase 1 : Scan cohérence (30 min)
  ├─ Phase 2 : Analyse patterns (15 min)
  ├─ Phase 3 : Plan d'action (10 min)
  └─ [optionnel] Mode auto : application des fixes

Post-audit optionnel :

vision (05) ─→ Audit visuel contre designs Figma
perf-auditor (07) ─→ Si modifications bundle

Troubleshooting

Symptôme	Cause probable	Résolution
”Shadcn/ui not detected”	composants.json manquant	Lancez npx shadcn-ui@latest init
”Components scanned but no issues”	Code parfaitement cohérent	Excellent! Considérez modernisation (React 19)
Audit très lent	Trop de fichiers à scanner	Utilisez --scope pour limiter à une zone
”Button variants not recognized”	Noms custom non-standard	Hardcoder les patterns reconnus ou relancer après standardisation

Voir aussi

• ./05-a11y-audit.md — Audit accessibilité WCAG 2.1
• ./06-perf-auditor.md — Audit performance Core Web Vitals
• ./07-shadcn-migration.md — Migrer vers shadcn/ui
• agents/frontend/04-backoffice-auditor.md — Documentation complète
• Skill shadcn/ui : npx skills add shadcn/ui — Design system complet