[Skills Series #5] La Galaxie de Sites Web & Le Ciment du Showcase Nexus

📚 Série Architecture & Skills IA (5/5) ⬅️ Épisode 1 : Du Prompt Drift à l'Architecture ⬅️ Épisode 2 : Atomic vs Méta-Skills — L'Art du Namespace et de la Composition ⬅️ Épisode 3 : Déploiement Multi-Agents — Globaux vs Locaux et Auto-Provisionnement ⬅️ Épisode 4 : Dans les Entrailles du Code — Anatomie, Scripts Réels & Sécurité Git ➡️ Épisode 5 : La Galaxie de Sites Web & Le Ciment du Showcase Nexus (Vous êtes ici)

Quand on pratique intensivement le vibe coding avec l'intelligence artificielle, on se retrouve rapidement à la tête d'une constellation d'applications, d'outils et de landing pages.

Dans mon écosystème personnel, cette galaxie compte de nombreux projets actifs :

  • 🏀 82-0 Helper : Extension Chrome d'analyse statistique et fantasy league pour la NBA.
  • 🌴 GTA Prompt : Générateur de wallpapers et prompts d'IA stylisés façon Vice City / GTA VI.
  • 🏫 Klasio : Outil statique open-source pour répartir équitablement les élèves dans les classes et doubles niveaux.
  • 🏆 TheGitLeague / GitPulse : Gamification de l'activité Git sous forme de saison sportive.
  • 🎴 PokéBinder / PokéVault : Outils de collection et trackers pour cartes Pokémon.
  • 🎬 Slim-Video : Encodeur vidéo par lots ultra-optimisé pour Apple Silicon avec TUI interactif.
  • 🎯 TiltSwitch : Application native macOS de changement d'espaces par détection de mouvement de tête via la caméra.

Le problème récurrent de tout développeur prolifique est simple : comment éviter que ces side-projects ne deviennent des îles désertes et oubliées sur le web ?

🔗 Le Ciment de la Galaxie : Le Pattern de Footer Cross-Site

Pour transformer une constellation éparpillée en un réseau interconnecté, nous avons formalisé un skill atomique de Footer Partagé.

Ce skill injecte dans chaque application un footer unifié, réactif, ultra-léger et accessible :

<footer class="ae-cross-footer">
  <div class="ae-footer-inner">
    <div class="ae-footer-identity">
      <a href="https://alexandre-enouf.fr/" class="ae-footer-logo" target="_blank" rel="noopener">
        Alexandre <em>Enouf</em>
      </a>
      <span class="ae-footer-tagline">· Développeur produit & Builder IA · Paris, France</span>
    </div>
    <div class="ae-footer-links">
      <a href="https://alexandre-enouf.fr/#lab" target="_blank" rel="noopener">⚡ Lab & Projets</a>
      <a href="https://alexandre-enouf.fr/blog/" target="_blank" rel="noopener">📖 Blog</a>
      <a href="https://github.com/Boblebol" target="_blank" rel="noopener">GitHub</a>
      <a href="https://www.linkedin.com/in/alexandreenouf-47834990" target="_blank" rel="noopener">LinkedIn</a>
      <a href="mailto:alexandre.enouf@gmail.com">Contact</a>
    </div>
  </div>
</footer>

Pourquoi c'est capital :

  1. Autorité SEO et maillage interne (Backlinks) : Chaque nouvelle application propulse du jus de référencement vers le domaine racine alexandre-enouf.fr.
  2. Parcours utilisateur fluide : Un visiteur découvrant Klasio ou GTA Prompt peut en un clic explorer le reste des créations dans le Lab.
  3. Identité de marque personnelle : Une signature cohérente, élégante et discrète.

🪄 Le Pipeline Ultime : L'Orchestrateur de Vitrine 360 (Showcase Pattern)

Lorsqu'un nouveau projet est prêt à être dévoilé, documenter le code et le mettre en valeur demande traditionnellement des heures de travail.

Avec un méta-orchestrateur de type Showcase Nexus, une seule commande slash déclenche la suite complète :

flowchart TD
    Start([🪄 Invocation Showcase Nexus]) --> Step1[🦶 1. Injection du Footer Unifié Cross-Site]
    Step1 --> Step2[🎤 2. Interview Développeur sans filtre]
    Step2 --> Step3[✍️ 3. Rédaction de l'Article Technique Medium FR/EN]
    Step3 --> Step4[📇 4. Création de la Fiche Lab data/lab/slug/meta.yaml]
    Step4 --> Step5[🔗 5. Liaison Bidirectionnelle Demo/Repo/Article]

    Step5 --> Finish([🌟 Vitrine 100% Déployée & Rayonnante])

Comment se déroule l'interview de dev ?

L'agent n'invente rien : il lance un interrogatoire incisif sur la réalité du projet :

  • Qu'est-ce qui a planté au début ?
  • Où est la véritable difficulté technique cachée derrière la simplicité apparente ?
  • Quel rôle exact l'IA a-t-elle joué dans la conception ?

L'article généré adopte un ton authentique, technique et percutant, prêt à être publié sur le blog et partagé sur les réseaux.

💬 Boîte à Prompts Complète de Vibe Coding

Voici les 4 prompts maîtres à garder sous le coude pour votre propre travail au quotidien :

1. Transformer une session de debug en Skill réutilisable

"Analyse notre session de code sur ce projet (mise en place du système d'analytics sans cookies et de la CI Lighthouse). Extrais cette méthodologie et écris un SKILL.md rigide avec frontmatter YAML et template de commandes."

2. Lancer l'Assurance Qualité de Release Web

"Exécute <votre-scope>:meta:web-release-verifier sur ce projet : audite les 20 critères de release (404, OpenGraph, WebP, alts, CTA mobile) et applique automatiquement tous les correctifs manquants."

3. Automatiser la Release Complète

"Exécute <votre-scope>:meta:release-lifecycle : analyse les commits pour déterminer le SemVer, mets à jour le CHANGELOG.md, crée la branche de release, ouvre la PR documentée avec schéma Mermaid, merge dans main et publie la GitHub Release."

4. Publier la Vitrine Complète d'un Projet

"Exécute <votre-scope>:meta:project-showcase : injecte le footer cross-site, interviewe-moi sur les coulisses techniques du projet, rédige l'article de blog bilingue et enregistre la carte dans le Lab."

🎯 Conclusion de la Série : Reprendre le Contrôle de l'IA

En passant du prompting artisanal aléatoire à un système de compétences d'ingénierie modulaire, nous avons transformé les agents IA d'assistants distraits en véritables partenaires de production fiables et rigoureux.

🔗 Liens & Ressources de la Série