Case study · claude-code-codex

Le codex qui se documente lui-même

Ce site est à la fois la 6ème app perso et le projet le plus méta du lot — un codex sur Claude Code, codé en pair-programming avec Claude Code. C'est aussi le case study le plus simple à raconter parce qu'il est encore en cours.

Pourquoi ce projet

Six mois de pair-programming intensif avec Claude Code, cinq apps perso en prod, et l'envie d'avoir un endroit pour ranger ce qu'on apprend en chemin. Plutôt que d'oublier au fond d'un Notion privé, autant en faire un site public.

L'objectif est double. D'un côté, un codex documentaire qui agrège la théorie Claude Code, l'écosystème officiel, des case studies, des sources de veille, des vidéos — sourcé strictement sur les domaines Anthropic publics. De l'autre, un banc d'essai personnel pour tester les outils tiers (Ruflo a été le premier candidat) et capitaliser sur ce qu'on en apprend.

Le narratif central est simple : 0 ligne de code écrite par l'humain. C'est le cas sur les 6 sites perso, et c'est ce que cette page documente pour le sixième.

Architecture

Architecture
Loading diagram…
Statique pur sur Cloudflare Pages, batch hebdo via GitHub Actions cron + Anthropic SDK. Aucun backend en prod.

Aucun backend en production. Le site est rendu en statique pur à chaque push. Le seul code qui tourne en run-time est le job GitHub Actions hebdo qui scrape les sources, résume via Claude, et commit les feeds JSON sur main.

Stack & data flow

  • Frontend — Astro 6, Vue 3 + shadcn-vue, Tailwind 4, JetBrains Mono pour le code, Inter pour le body
  • Hosting — Cloudflare Pages (build statique, CDN edge)
  • Batch — GitHub Actions cron lundi 06h UTC + workflow_dispatch on-demand
  • LLM — Anthropic SDK avec claude-haiku-4-5 pour les résumés (140 caractères, FR, filtre [off-topic])
  • Sources scrapées — atom feed Simon Willison, GitHub API pour anthropics/skills et modelcontextprotocol/servers, RSS Anthropic news (avec fallback gracieux si 404)
  • Données — TypeScript modules en source de vérité (data/learning.ts, data/ecosystem.ts, etc.) + JSON feeds auto-générés (data/feeds/*.json) à merger plus tard si pertinent

Le process avec Claude Code

0 ligne de code humaine. La séance qui a produit ce site (et la page que tu lis en ce moment) a été pilotée par instruction conversationnelle. Voici les patterns de collab utilisés concrètement :

  • Sub-agents en parallèle via le tool Agent — pour scraper les sources, rédiger les 8 sections de la page Théorie, ou générer les 6 deep-dives case studies (dont celui-ci) sans étrangler le contexte du parent.
  • Mémoire persistante dans ~/.claude/projects/<cwd>/memory/~70 fichiers .md qui capturent les décisions, les feedbacks (feedback_*), les patterns gagnants, les anti-patterns observés (Ruflo). Rechargés automatiquement à chaque session.
  • Skills custom — deux ont été skillifiés depuis Ruflo lors de cette même séance : /sparc (méthodologie 5 phases) et /skillify (le meta-skill qui crée des skills à partir d'idées externes).
  • CLAUDE.md project-level — chacun des 6 repos a maintenant son fichier de règles spécifiques (heuristiques, anti-patterns, conventions de naming) en complément du CLAUDE.md cross-app.
  • APEX et brainstorming — pour les chantiers structurés (Theory page, Ecosystem catalog), invocation explicite des skills correspondants au lieu d'improviser.

Le résultat : le site a été scaffold, théorisé, documenté, enrichi de catalogues triables, polish-é (favicon, OG image, hover micro-interactions), et instrumenté d'un batch update hebdo en quelques heures de pair-programming. Sans qu'aucune ligne de code n'ait été tapée par l'humain.

Pivots & lessons learned

  • Pivot stack Vue (vs React) — au moment du scaffold initial, le mémo de kickoff disait "shadcn-vue" alors que les sites cousins avato/evato étaient en React. Vérification explicite avant scaffold a évité un coût de pivot tardif.
  • Ruflo refusé, mais 8 leçons capturées — le test bench Ruflo a échoué sur les blockers (--no-global cassé, cleanup incomplet), mais 8 patterns ont été notés et deux ont été skillifiés (SPARC, skillify lui-même).
  • Posture "s'améliorer mutuellement" — pas de verdict binaire adopt/reject sur un outil tiers. Toujours extraire les leçons, même quand on rejette le packaging.
  • Catalogue strict Anthropic-officiel — la tentation d'ajouter Ruflo au catalogue Ecosystem a été attrapée à temps. Le site documentaire reste sourcé propre, le test bench (cette section) capture les outils tiers séparément.
  • Filtres FR souples vs EN stricts — pour les vidéos en français, la barre qualité est explicitement assouplie (recommandations personnelles) parce que le pool est plus restreint. Honnêteté > complétude artificielle.