Rendu de l'atelier

• Application du projet (le livrable du cours) : cboye4991-sketch.github.io/jang-bac-helper (correction par l'agent Dify, exercices type Bac, historique). Code : dépôt jang-bac-helper.
• Réalisations de l'atelier (E00 → E14, tout l'atelier refait avec Jàng), à ouvrir en ligne : landing V2, design avec frontend-design · landing V1, sans skill · app du projet fil rouge, reconstruite de zéro par Claude Code à la place de PromptLens. Même sujet que l'application du projet, mais un autre code et d'autres fonctions : catalogue, carnet de progression, export JSON.
• Vidéos de présentation (teaser 73 s et « Le prof qui répond à minuit », 60 s) : à regarder sur le site de l'application.
• Dossier Design Thinking complet (persona, HMW, Dify, journal de prompts) : dépôt jang.

Demandé : versions, mise à jour, pas de clé API, compte Pro, dossier claude-lab.

• Claude Code 2.1.285 (au-dessus du minimum 2.1.280), Node v22, git 2.43, dernière version publiée sur npm : 2.1.285.
• Aucune clé API dans l'environnement (« pas de cle API »), claude doctor sans erreur bloquante.
• Script verif-windows.ps1 écrit pour refaire ces contrôles sur ton PC.

$ claude --version
2.1.285 (Claude Code)
$ node --version
v22.22.2
$ npm view @anthropic-ai/claude-code version
2.1.285
$ [ -n "$ANTHROPIC_API_KEY" ] && echo "CLE API PRESENTE" || echo "pas de cle API"
pas de cle API

• /status lancé par Cheikh sur son Mac le 05/10 : connexion Claude Pro account, Claude Code 2.1.285, modèle Opus. Identifiants de session, organisation et e-mail masqués sur la capture. Comme Cheikh est sur Mac, verif-windows.ps1 a son équivalent 00-installation/verif-mac.sh.

• verif-mac.sh lancé par Cheikh le 05/10 sur son Mac (darwin-arm64) : Claude Code 2.1.289, la dernière version publiée, Node 23.2.0, git 2.53.0, pas de clé API, claude doctor « No installation issues found », dossier ~/claude-lab créé.

Demandé : dossier 01-hello avec git, modèle opusplan, une carte de visite web en un seul fichier, sans rien inventer.

• Prompt lancé avec --model opusplan ; Claude a écrit jang-card.html en 2 tours, sans chiffres ni écoles inventés, coordonnées marquées fictives.
• Défi fait : bouton « Écrire à Jàng sur WhatsApp » (lien wa.me).

• /usage capturé par Cheikh le 05/10, juste après le premier /morning-brief : 6 % de la session et 30 % de la semaine utilisés, 92 % des tokens d'entrée servis par le cache.

Demandé : commit, plan sans modification, précision, application validée, puis retour arrière et git status propre.

• Commit « carte Jang », puis prompt en mode plan : plan numéroté, git status inchangé.
• Précision envoyée (« même vert dans les deux thèmes, bouton dans le pied de carte ») : plan corrigé, toujours sans modification. Claude a signalé un problème de contraste et proposé un ajustement.
• Plan approuvé et appliqué, puis retour arrière : fichier restauré, nothing to commit, working tree clean.
• Défi : même changement refait en mode accept edits, en une seule demande et sans aucune question. Testé : après un clic et un rechargement, le thème sombre reste (localStorage = {"jang-theme":"dark"}).

$ git status --short
 M jang-card.html
# retour arrière
$ git restore jang-card.html
$ git status
On branch main
nothing to commit, working tree clean

$ git log --oneline
79b5bc5 bouton WhatsApp (defi E01)
506f25e theme clair/sombre (defi E02)
bbc16e6 carte Jang

En mode non interactif, Maj+Tab et Échap Échap n'existent pas. Leurs équivalents ont été utilisés : --permission-mode plan, puis acceptEdits, et git restore. Sur ton PC, refais une fois Échap Échap pour voir le menu.

Demandé : même page deux fois, d'abord sans skill, puis avec le plugin officiel frontend-design, et comparer.

• Contenu réel de Jàng : accroche, quiz en 3 étapes (matière → chapitre → difficulté) qui recommande un ID d'exercice, 4 promesses, les 6 exercices de votre base (JNG-PC-01…), formulaire « professeur bénévole ».
• Plugin installé : √ Successfully installed plugin: frontend-design@claude-plugins-official (scope: local), et la ligne Skill(frontend-design:frontend-design) apparaît pendant la V2.
• Testé dans un navigateur à 360 px : quiz de bout en bout sur les deux versions, aucun défilement horizontal, aucune erreur JavaScript.

Direction artistique expliquée par Claude

Toute la page est une feuille Seyès dessinée en CSS avec une marge rouge ; bleu bic pour l'élève, rouge correcteur pour les erreurs, vert WhatsApp pour la conversation.

Résumé de sa réponse en 5 lignes (typographie, palette, mise en page, animation, détail signature), qui est dans _journal/E03-2-v2-frontend-design.txt.

Demandé : /init, CLAUDE.md réduit à moins de 60 lignes, /diff, /compact, /clear, mémoire utilisateur.

• CLAUDE.md généré, puis réécrit en 49 lignes propres au projet. Claude a relevé que les 6 ID doivent correspondre à la base Dify.
• /compact exécuté. Test « après /clear » : une nouvelle session cite les règles et les polices du projet sans ouvrir aucun fichier, parce que CLAUDE.md est relu à chaque démarrage.
• Mémoire utilisateur écrite (français, clés Dify/Gemini jamais dans le code, commit avant les gros changements, petites étapes).
• Défi : question posée en anglais dans un autre dossier, réponse en français.

/init est désactivé dans mon environnement : j'ai envoyé sa consigne sous forme de prompt. Chez toi, tape simplement /init.

Demandé : une skill personnelle avec l'identité de la marque, puis un email, un post LinkedIn et un flyer cohérents.

• Skill ~/.claude/skills/jang-brand/SKILL.md (82 lignes, disable-model-invocation: true) : palette et polices de votre maquette v2, voix, mots à utiliser et à éviter, règles d'honnêteté (« corrigés en cours de validation »). Invoquée dans une nouvelle session, elle répond : « Identité Jàng chargée ».
• Email de suivi à un professeur après une démo (placeholders visibles, vouvoiement), post LinkedIn sur le vrai réglage des chunks Dify (500 → 1000 → 2000), flyer « appel aux professeurs » avec votre vraie capture du MVP comme hero.jpg.
• Flyer corrigé en deux passes, comme la correction dictée de l'atelier : le téléphone chevauchait l'encadré, puis un texte était coupé. Aucun mot interdit dans les trois contenus.

Demandé : plugins playwright et marketing en local, visite de sites concurrents avec captures, rapport, plan marketing, puis désactivation du plugin marketing.

• Les deux plugins sont installés en scope: local ; le plugin marketing a été désactivé à la fin (√ Successfully disabled plugin: marketing).
• Trois concurrents : Nomad Education (page Terminale S2 Sénégal), Groupe Réussite (annales du Bac sénégalais), FoondaMate (chatbot d'étude). Le rapport cite une source pour chaque affirmation.
• Constat principal : aucune des trois sources ne montre la correction de la réponse de l'élève avec son erreur expliquée. C'est le créneau de Jàng.
• Plan marketing produit avec la skill marketing:campaign-plan et /jang-brand : positionnement, 3 piliers, calendrier sur 4 semaines, 7 améliorations de la landing, 5 idées d'acquisition, 3 actions immédiates.

Demandé : nouveau dépôt, branche phase-1, CLAUDE.md planifié en mode plan puis écrit (moins de 120 lignes), /context, commit.

• J'ai choisi l'app web Jàng (votre MVP S4, repris hors de Lovable) à la place de PromptLens : même exercice, et ce fichier te servira vraiment.
• Plan d'abord (aucun fichier touché), puis écriture : 96 lignes, 9 sections. Stack : Vite, React, TypeScript strict, Firebase Hosting et Functions, avec la clé Dify en secret côté serveur.
• /context : la case « Memory files » pèse 2,3k tokens (CLAUDE.md et ta mémoire utilisateur). Commit c42f2fa CLAUDE.md sur phase-1.

## Never
- Never commit `.env*` or `functions/.secret.local`.
- Never call Dify from the client. Never expose `DIFY_API_KEY` in the bundle, logs or responses.
- Never invent exercises, reference answers, users or figures. Use real data or a clearly
  marked placeholder.
- Never change an exercise ID without updating the knowledge base in the same change.
- Never touch Firebase rules (Firestore, Storage, Hosting headers for access) without asking.
  Never leave test-mode rules.

Demandé : .gitignore, .env.example, règles deny et test du refus, puis la phase 1 de l'app en une passe planifiée, et le défi d'export.

• Protections d'abord. Test : à « Lis le fichier .env », Claude répond que ses réglages lui en refusent l'accès.
• App React et TypeScript strict : les 14 vrais exercices de votre base, avec recherche et filtre Chimie ou Physique, et un carnet (À faire, Essayé, Réussi, À revoir) avec une note privée. Le carnet est gardé sur le téléphone.
• Aucun corrigé n'est dans l'app. Un script le vérifie à chaque compilation (142 fragments de réponses contrôlés).
• Défi : export du carnet en JSON, vérifié dans un vrai navigateur.

Demandé : ajouter l'IA en gardant la clé côté serveur. L'atelier utilise Gemini avec Firebase. Jàng a déjà un vrai moteur, le workflow Dify « jang » de la séance S5.

• Un relais Cloudflare (dify-relay/) garde la clé Dify en secret : elle n'est ni dans la page, ni sur GitHub. Il n'accepte que les appels de votre site.
• Correction en direct dans la landing V2, puis dans l'app : une fenêtre WhatsApp, puis les boutons « J'ai compris → Réussi » et « À revoir », reliés au carnet.
• Testé de bout en bout avec le vrai code du relais et un faux Dify : correction, refus propre, et le mot INSUFFISANT n'est jamais affiché. Puis testé en ligne par Cheikh avec le vrai Dify, après avoir corrigé une clé mal enregistrée (erreur 401).

Demandé : sur une branche jetable, laisser Claude améliorer l'app en 2 tours automatiques (critique, 3 corrections, vérification, note).

• Branche ralph, plugins ralph-loop et frontend-design installés en local, et un brief écrit dans .claude/ralph-brief.md.
• La boucle s'est arrêtée seule après 2 tours. Claude n'a pas écrit POLISHED, parce qu'il n'avait pas pu tout vérifier dans un navigateur. Les entrées « Ralph round 1 » et « Ralph round 2 » sont dans docs/decisions.md.
• Résultat : la date du jour dans l'en-tête, la progression visible depuis l'onglet Exercices, un filtre par statut du carnet et un état « carnet vide ». La compilation, les 49 tests et le contrôle des corrigés passent. La branche a ensuite été fusionnée.

Demandé : installer une skill externe, créer un environnement Python isolé, puis un agent sans mémoire et le même avec mémoire.

• Skill externe claude-api, tirée du dépôt officiel anthropics/skills et lue avant l'installation, avec npx skills add anthropics/skills --skill claude-api.
• .venv avec le SDK Anthropic officiel, un noyau « agents-lab » et un .gitignore qui protège .env.
• Notebook « assistant Jàng » : il ne connaît que le catalogue public. Sans mémoire, il ne comprend pas « Et le deuxième ? ». Avec mémoire, il répond JNG-PC-02, Acides forts.

• Notebook exécuté par Cheikh sur son Mac le 06/10, avec une vraie clé API (dans .env, jamais commitée) : notebooks/agent_lab_gemini.ipynb, sorties incluses. Sans mémoire, l'agent répond que « le deuxième » est ambigu et demande une précision. Avec mémoire, il retrouve sa liste et répond JNG-PC-02, Acides forts, en décrivant l'exercice sans le résoudre. L'historique contient 4 messages.

Demandé : la structure Personal OS (CLAUDE.md, SOUL.md, vault, 4 skills), l'interview pour SOUL.md, puis /ingest et le graphe dans Obsidian.

• Structure créée après un plan : un CLAUDE.md de 97 lignes et les skills /setup, /ingest, /lint et /new-automation.
• /ingest du README de Jàng : pages créées pour le projet, Adama, l'université, l'enseignant et la persona. La source n'a pas été modifiée, et une ligne datée a été ajoutée au journal. /lint a été exécuté.
• Ce dossier contient des données personnelles. Il est livré à part et ne va pas dans le dépôt public.

• Interview /setup faite par Cheikh le 05/10 : SOUL.md rempli (identité, valeurs, style de travail, ton de l'agent, limites). Les questions passées restent marquées « à remplir ». Commit local seulement, car le fichier contient des données personnelles.

Demandé : connecter Notion, Gmail et Agenda, puis créer /morning-brief, qui résume la journée sans jamais rien envoyer.

• /new-automation a créé le playbook work/02-morning-brief/CLAUDE.md et la skill /morning-brief, en lecture seule sur Gmail et Agenda. Les e-mails sont traités comme des données, jamais comme des ordres.
• Le brief a 4 parties (Urgent, Aujourd'hui, Contexte, FYI). Un exemple de format, marqué fictif, est fourni.

• Premier run le 05/10, en mode dégradé : Gmail et Agenda connectés sur un compte Google de test créé pour l'atelier (4 mails et 2 événements marqués « test E13 »), Notion absent. Cheikh n'a pas voulu brancher sa vraie boîte. Le brief classe 2 urgents, 2 événements du jour et 3 FYI, n'envoie ni ne modifie rien, traite les consignes contenues dans les mails comme des données, et signale une contradiction de dates entre les mails (« mardi ») et l'agenda (« ce soir »).

Demandé : un sous-agent en lecture seule qui audite l'app avant la mise en ligne et propose des correctifs sans rien modifier.

• Sous-agent .claude/agents/jang-security-reviewer.md, limité aux outils Read, Grep et Glob. Il a audité le relais, l'app, le bundle, la landing et les règles du dépôt.
• Vérifié sans problème : aucune clé dans le code, aucun corrigé dans le bundle, CORS strict, pas d'innerHTML.
• Points trouvés : il n'y avait aucune limitation de débit sur le relais, des règles deny manquaient à la racine du dépôt, et le .gitignore était incomplet. Ces trois points sont corrigés. La limitation de débit, à 5 requêtes par minute et par adresse IP, est testée.

• Relais redéployé par Cheikh le 05/10 (npx wrangler deploy, version 6c4361a3) : la limite RATE_LIMITER (5 requêtes / 60 s) est active. Vérifié en ligne depuis le site : après quelques requêtes, le relais répond 429 « Trop de demandes en ce moment — réessaie dans une minute ». Le rapport complet est dans docs/audit-securite-e14.md.

Décompresse claude-lab-jang.zip dans ton dossier personnel, puis, dans PowerShell :

New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
Copy-Item "$HOME\claude-lab\04-memoire-utilisateur\CLAUDE.md" "$HOME\.claude\CLAUDE.md"
Copy-Item -Recurse "$HOME\claude-lab\05-brand\_a-copier-dans-.claude\skills\jang-brand" "$HOME\.claude\skills\"
cd "$HOME\claude-lab\00-installation"; .\verif-windows.ps1

Si tu as déjà un $HOME\.claude\CLAUDE.md, ne l'écrase pas : colle le contenu à la fin. Le README.md de l'archive détaille tout. Les prompts exacts sont dans _prompts/, et la transcription de chaque session dans _journal/.