Audit visuel et code complet avec Vision

Contexte

Vous avez un projet web et vous voulez un audit complet du code ET de l’interface visuelle : vérifier l’architecture, la qualité, la sécurité, la performance, les tests, la dette technique, l’accessibilité et la documentation. Vision combine l’audit approfondi du codebase avec l’analyse visuelle de l’UI.

Prérequis

Codebase complète accessible
Site web live ou staging pour captures visuelles
Accès Read au code source
Framework détecté : Next.js, React, Vue, Django, etc.

Étapes

1. Invocation audit complet

Lancez Vision :

/ulk:vision

Audit code et visuel complet

Vision démarre Phase A1 (Cartographie du projet).

2. Phase A1 — Reconnaissance et cartographie

Vision exécute :

find . -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.js" \) | grep -v node_modules | head -100
cloc . --exclude-dir=node_modules,.git,dist,build --quiet
git log --oneline | wc -l

Détecte :

Langages et frameworks
Lignes de code totales
Historique git

Sortie :

=== Cartographie du Projet ===

📁 Fichiers source : 245
📊 Lignes de code  : 18,450
📜 Commits         : 342
🎯 Framework       : Next.js + TypeScript

3. Phase A2 — Audit 8 dimensions

🏗️ Architecture

Analyse séparation des responsabilités, couplage, dépendances circulaires, patterns cohérents :

Architecture : 14/10 ⚠️ MEDIUM

✅ Séparation modules       : Clean Architecture détectée
⚠️ Couplage                 : 3 couplages anormaux (pages <-> services)
❌ Dépendances circulaires  : lib/models → lib/services → lib/models

📝 Qualité du code

Nommage, commentaires, complexité cyclomatique, code mort, error handling :

Code Quality : 16/10 ✅ GOOD

📊 Complexité cyclomatique moyenne : 4.2 (cible < 5)
💬 Ratio commentaires               : 18%
📛 Code dupliqué                   : 3% (acceptable)

🔒 Sécurité

Secrets hardcodés, injection SQL/XSS, auth/authz, dépendances vulnérables :

Sécurité : 11/20 ❌ HIGH RISK

🚨 Secrets hardcodés : 1 API key trouvée [api/config.ts:25]
💉 SQL Injection      : Requêtes paramétrées manquantes (2 endpoints)
🔐 Auth              : JWT sans signature verification [middleware/auth.ts:10]

⚡ Performance

N+1 queries, lazy loading, caching, bundle size, memory leaks :

Performance : 13/20 ⚠️ MEDIUM

📦 Bundle size           : 245 KB (après minification)
⚠️ N+1 queries detectés : UserService.getWithPosts (5 places)
📉 Missing cache strategy: Tout frais (aucune mise en cache)

🧪 Tests

Couverture, unit/integration/E2E tests, CI/CD :

Testing : 12/20 ⚠️ MEDIUM

✅ Unit tests     : 45 fichiers
⚠️ Coverage       : 62% (target: 80%)
❌ Integration    : 2 fichiers (insuffisant)
❌ E2E tests      : Aucun

🔧 Dette Technique

TODOs, code deprecated, packages obsolètes, workarounds :

Technical Debt : 10/20 ❌ HIGH

📋 Deprecated screens : 3 fichiers à refactoriser [lib/old_widgets/]
📦 Packages obsolètes : 8 (flutter_web_auth, rxdart)
⏰ Maintenance burden : ~1 day/month due to legacy code

📱 Accessibilité (si frontend)

Sémantique, contraste, navigation clavier, WCAG compliance :

Accessibilité : 8/20 ❌ POOR

❌ Labels sémantiques : 8 widgets sans Semantics
🎨 Contraste WCAG AA : 3 violations détectées
⌨️ Focus visible      : Manquant sur 5 composants

📄 Documentation

README, API docs, JSDoc, architecture, onboarding :

Documentation : 11/20 ⚠️ MEDIUM

✅ README.md            : Présent (mais outdated)
❌ Functions JSDoc      : 23% sans documentation
❌ Architecture diagram : Aucun
❌ Contributing.md      : Absent

4. Phase A3 — Captures visuelles (si mode full)

Vision capture l’interface :

# Screenshots des pages principales
Screenshots générés :
  ✅ home.png         (logged out)
  ✅ dashboard.png    (logged in)
  ✅ settings.png
  ⚠️ mobile-home.png  (responsive check)

5. Phase A4 — Scoring et rapport

Scoring global :

=== SCORE D'AUDIT ===

| Catégorie          | Score | Niveau |
|--------------------|-------|--------|
| 🏗️ Architecture     | 14/20 | 🟡    |
| 📝 Code Quality     | 16/20 | 🟢    |
| 🔒 Sécurité         | 11/20 | 🔴    |
| ⚡ Performance      | 13/20 | 🟡    |
| 🧪 Tests           | 12/20 | 🟡    |
| 🔧 Debt            | 10/20 | 🔴    |
| 📱 Accessibility   | 8/20  | 🔴    |
| 📄 Documentation   | 11/20 | 🟡    |
| **GLOBAL**         | **95/160** | **🟡 MEDIUM** |

6. Rapport final

Créé dans docs/audits/audit-code-YYYYMMDD.md :

=== Vision Audit Report ===
Date: 2026-04-14
Project: my-app (Next.js)

CRITICAL FINDINGS (3)
  1. API key hardcoded (CRITICAL)
  2. Missing JWT verification
  3. No accessibility labels

HIGH FINDINGS (5)
  4. Weak database performance (N+1)
  5. 18% test coverage gap
  6. Outdated packages

RECOMMENDATIONS
  [ ] Fix auth verification (2 days)
  [ ] Add integration tests (1 week)
  [ ] Remove deprecated code (3 days)
  [ ] Improve accessibility (2 days)

NEXT STEPS
  → Lancer /simplify pour réduire complexité
  → Ou ed209 pour deep dive sécurité

Variantes

Variante A — Audit uniquement : Mode audit (pas de simplification)
Variante B — Simplification : Mode simplify lance /simplify après audit
Variante C — Full audit + simplify : Mode full (audit complet + application)
Variante D — Ciblé : Mode focus=security ou focus=performance pour deepdive spécifique

Agents enchaînés

Flux typique : vision (05) audit complet → /simplify apply → ed209 (52) security deepdive.

Troubleshooting

Symptôme	Cause probable	Résolution
Stack non détecté	Config files non-standard	Ajouter .js/.ts manuellement
Screenshots échouées	Site down ou auth required	Vérifier accès web, credentials
Score trop bas/haut	Thresholds contextuels	Scores adaptatifs au projet
Audit trop long	Gros codebase	Limiter avec `--max-files=500`

Voir aussi

agents/audit/05-vision.md — agent complet
agents/audit/52-ed209.md — security focus
docs/guides/use-cases/20-ed209-security.md — sécurité détaillée