presentation-stylinglisted

# 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: ```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` — 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 #