Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
CSS classes and HTML patterns used in presentation/index.html.
.two-col — 2-column grid layout with 24px gap.info-grid — 2-column grid for info cards.col-card — Card inside a column (add .good for green border, .bad for red border).info-card — Card in an info grid.trigger-box — Gray box with dark left border (for key concepts, prerequisites).how-to-trigger — Green box with green border (for "Try This" actions).warning-box — Orange box with warning border (for important warnings).code-block — Dark code display block with monospace font.use-cases — Container for icon+text list items.use-case-item — Individual item with icon and text.feature-list — Simple bordered list.matcher-tag — Gray inline pill tag.weight-badge — Green pill badge (auto-injected by JS for weighted slides)Inside .code-block, use these spans for syntax coloring:
<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 — Green (#6a9955) for comments.key — Blue (#9cdcfe) for property names/keys.string — Orange (#ce9178) for string values.cmd — Yellow (#dcdcaa) for commands/prompts<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>
Do not hardcode <span class="weight-badge"> in slide HTML. The presentation JavaScript injects and removes weight badges automatically.
<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>
<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>
.journey-bar — Fixed bar below progress bar.journey-bar.hidden — Hidden on title slideh1 elements of weighted slides