Agent Skills › shanraisshan/claude-code-best-practice › presentation-styling

presentation-styling

GitHub

提供演示文稿的CSS类、HTML组件模式及代码高亮规范，用于统一前端展示样式。

.claude/skills/presentation/presentation-styling/SKILL.md shanraisshan/claude-code-best-practice

Trigger Scenarios

编写或修改演示文稿HTML结构应用特定的CSS样式类配置代码块语法高亮

Install

npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -g -y

More Options

Non-standard path

npx skills add https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/presentation/presentation-styling -g -y

Use without installing

npx skills use shanraisshan/claude-code-best-practice@presentation-styling

指定 Agent (Claude Code)

npx skills add shanraisshan/claude-code-best-practice --skill presentation-styling -a claude-code -g -y

安装 repo 全部 skill

npx skills add shanraisshan/claude-code-best-practice --all -g -y

预览 repo 内 skill

npx skills add shanraisshan/claude-code-best-practice --list

SKILL.md

Frontmatter

{
    "name": "presentation-styling",
    "description": "Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation"
}

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