traduction

2026-06-02 23:24:21 +02:00
parent 89ed5d7f86
commit e8f2b1a034
114 changed files with 17211 additions and 0 deletions
@@ -0,0 +1,106 @@
+---
+name: presentation-styling
+description: Connaissance des classes CSS, patterns de composants et coloration syntaxique dans la présentation
+---
+
+# Skill Presentation Styling
+
+Classes CSS et patterns HTML utilisés dans `presentation/index.html`.
+
+## Classes de composants CSS
+
+### Layout
+
+- `.two-col` — layout grille 2 colonnes avec gap de 24px
+- `.info-grid` — grille 2 colonnes pour cartes d'information
+- `.col-card` — carte dans une colonne (ajouter `.good` pour bordure verte, `.bad` pour bordure rouge)
+- `.info-card` — carte dans une grille d'information
+
+### Blocs de contenu
+
+- `.trigger-box` — boîte grise avec bordure gauche sombre (concepts clés, prérequis)
+- `.how-to-trigger` — boîte verte avec bordure verte (actions "Try This")
+- `.warning-box` — boîte orange avec bordure d'avertissement (avertissements importants)
+- `.code-block` — bloc sombre d'affichage de code avec police monospace
+
+### Listes
+
+- `.use-cases` — conteneur pour items liste icône+texte
+- `.use-case-item` — item individuel avec icône et texte
+- `.feature-list` — liste bordée simple
+
+### Tags & badges
+
+- `.matcher-tag` — tag inline gris en forme de pill
+- `.weight-badge` — badge pill vert (auto-injecté par JS pour les slides pondérées)
+
+## Coloration syntaxique des blocs de code
+
+Dans `.code-block`, utilise ces spans pour les couleurs de syntaxe :
+
+```html
+<div class="code-block">
+<span class="comment"># This is a comment</span>
+<span class="key">field_name</span>: <span class="string">value</span>
+<span class="cmd">&gt;</span> command to run
+</div>
+```
+
+- `.comment` — vert (#6a9955) pour commentaires
+- `.key` — bleu (#9cdcfe) pour noms de propriétés/clés
+- `.string` — orange (#ce9178) pour valeurs string
+- `.cmd` — jaune (#dcdcaa) pour commandes/prompts
+
+## Patterns de types de slides
+
+### Slide de contenu avec deux colonnes (Good vs Bad)
+```html
+<div class="slide" data-slide="N" data-weight="5">
+    <h1>Title</h1>
+    <div class="two-col">
+        <div class="col-card bad">
+            <h4>Before (Vibe Coding)</h4>
+            <!-- bad example -->
+        </div>
+        <div class="col-card good">
+            <h4>After (Agentic)</h4>
+            <!-- good example -->
+        </div>
+    </div>
+</div>
+```
+
+Ne code pas en dur `<span class="weight-badge">` dans le HTML de la slide. Le JavaScript de présentation injecte et retire automatiquement les weight badges.
+
+### Slide de contenu avec exemple de code
+```html
+<div class="slide" data-slide="N">
+    <h1>Title</h1>
+    <div class="trigger-box">
+        <h4>Key Concept</h4>
+        <p>Description</p>
+    </div>
+    <div class="code-block"><span class="comment"># Example</span>
+<span class="key">field</span>: <span class="string">value</span></div>
+</div>
+```
+
+### Pattern de liste avec icônes
+```html
+<div class="use-cases">
+    <div class="use-case-item">
+        <span class="use-case-icon">EMOJI</span>
+        <div class="use-case-text">
+            <strong>Title</strong>
+            <span>Description text</span>
+        </div>
+    </div>
+</div>
+```
+
+## Spécifique Journey Bar
+
+- `.journey-bar` — barre fixe sous la progress bar
+- `.journey-bar.hidden` — masquée sur la title slide
+- La couleur de la journey bar transite du rouge (0%) au vert (100%) via interpolation HSL
+- Les weight badges sont auto-injectés par JS dans les éléments `h1` des slides pondérées