Files

T

2026-06-02 23:24:21 +02:00

3.3 KiB

Raw Blame History

name, description

name	description
presentation-styling	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 :

<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)

<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

<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

<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

3.3 KiB Raw Blame History