Claude-code-best-practice presentation-styling

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

install

source · Clone the upstream repo

git clone https://github.com/shanraisshan/claude-code-best-practice

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/shanraisshan/claude-code-best-practice "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/presentation/presentation-styling" ~/.claude/skills/shanraisshan-claude-code-best-practice-presentation-styling && rm -rf "$T"

manifest: .claude/skills/presentation/presentation-styling/SKILL.md

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>

Do not hardcode

<span class="weight-badge">

in slide HTML. The presentation JavaScript injects and removes weight badges automatically.

Content Slide with Code Example

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

Icon List Pattern

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

```
.journey-bar
```
— Fixed bar below progress bar
```
.journey-bar.hidden
```
— Hidden on title slide
Journey bar color transitions from red (0%) to green (100%) via HSL interpolation
Weight badges are auto-injected by JS into
```
h1
```
elements of weighted slides