🚀 AI Frontend Lead

ai-frontend-lead ne rajoute pas de fonctionnalités à votre IA. Il change son rôle.

🚨 Le Problème

Aujourd'hui, les IA comme Cursor, Claude ou Windsurf agissent comme des développeurs juniors extrêmement rapides. Vous leur demandez une page web, elles génèrent 500 lignes de code d'un coup. Mais elles oublient l'architecture, la sécurité, l'accessibilité, et produisent des interfaces fades, basiques et sans âme. Elles agissent de manière impulsive sans réfléchir à l'expérience utilisateur finale.

👑 Notre Solution : Votre Tech Lead Personnel

AI Frontend Lead s'installe directement dans votre éditeur et prend le rôle de Tech Lead Senior. Au lieu de laisser l'IA écrire du code au hasard, cet outil l'intercepte et l'oblige à :

1. Penser comme un Architecte : Analyser le besoin réel, prévoir les composants, et anticiper les erreurs avant de taper la moindre ligne.
2. Exiger l'Excellence : Imposer des standards de design premium (animations fluides, contrastes parfaits) et du code ultra-propre.
3. Valider son travail : Faire une relecture critique de son propre code avant de vous le livrer.

⚙️ Que sait faire cet outil concrètement ? (Fonctionnalités Détaillées)

Une fois installé, votre IA obéira à un cahier des charges drastique, invisible mais surpuissant, divisé en 4 piliers d'expertise :

1. 🎨 Maîtrise du Design UX/UI Premium

Votre IA arrête de faire des designs "plats" style années 2010. Elle est forcée d'utiliser :

• Typographie Moderne : Intégration systématique de polices comme Inter, Roboto ou Outfit.
• Palette de Couleurs Harmonieuses : Utilisation du format HSL pour des couleurs vibrantes, avec gestion native du mode sombre (Dark Mode).
• Esthétique Avancée : Ajout de subtils dégradés, d'effets Glassmorphism (transparence et flou), et d'ombres douces.

2. ✨ Micro-Interactions & Dynamisme

Un bon design doit être vivant. L'outil force l'IA à coder :

• Des effets de survol (hover) fluides sur tous les boutons et liens.
• Des transitions CSS (animations) pour éviter les apparitions brutales d'éléments.
• Des états actifs et de focus pour une navigation agréable.

3. ♿ Accessibilité Universelle (A11y)

L'outil interdit à l'IA de coder des sites inaccessibles. Il exige :

• HTML Sémantique : Fini les <div> partout. L'IA utilisera <nav>, <main>, <section>, <article>.
• Attributs ARIA : Ajout systématique de descriptions pour les lecteurs d'écran (aria-label, aria-hidden).
• Navigation au clavier : Les contours de focus sont gérés proprement pour les utilisateurs naviguant sans souris.

4. 🧠 Architecture & "Raisonnement Tracé"

L'IA ne fonce plus tête baissée. Avant d'écrire le code, elle doit :

• Générer une Trace de Raisonnement : Elle vous explique ses choix d'architecture et ses décisions de design.
• Auto-Correction : Elle audite ses propres erreurs (contraste insuffisant, bugs logiques) et se corrige avant d'afficher le résultat final.

⚡ Installation (1 Seconde chrono)

Dans le terminal de votre projet, tapez simplement cette ligne :

npx ai-frontend-lead

L'outil détectera automatiquement votre environnement de développement. Redémarrez votre IDE, et votre IA est immédiatement promue au rang de Tech Lead Senior !

🔌 Compatibilité Universelle

AI Frontend Lead configure automatiquement vos éditeurs favoris sans aucune intervention manuelle :

• ✅ Cursor (injection dans .cursor/rules et mcp.json)
• ✅ Windsurf (injection dans .codeium/windsurf/mcp_config.json)
• ✅ Claude Desktop (injection dans claude_desktop_config.json)
• ✅ Antigravity (injection dans .gemini/config/skills)