Presentation Styling Skill

CSS classes and HTML patterns used in presentation/index.html.

CSS Component Classes

Layout

• .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

Content Blocks

• .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

Lists

• .use-cases, Container for icon+text list items
• .use-case-item, Individual item with icon and text
• .feature-list, Simple bordered list

Tags & Badges

• .matcher-tag, Gray inline pill tag
• .weight-badge, Green pill badge (auto-injected by JS for weighted slides)

Code Block Syntax Highlighting

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">&gt;</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

Slide Type Patterns

Content Slide with Two Columns (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>