# Presentation Styling

Covers CSS classes, components and syntax highlighting for slides.

- Repository: https://github.com/shanraisshan/claude-code-best-practice (68426 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -g -a claude-code -y`
Codex: `npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -g -a codex -y`
Cursor: `npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -g -a cursor -y`
Gemini CLI: `npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -g -a gemini-cli -y`

## Description

Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

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

The rest: https://github.com/shanraisshan/claude-code-best-practice/blob/HEAD/.claude/skills/presentation/presentation-styling/SKILL.md