107 lines
3.3 KiB
Markdown
107 lines
3.3 KiB
Markdown
---
|
|
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">></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
|