定义 presentation/index.html 的 CSS 类和 HTML 样式（内部 Skill）。
--primary: #7c3aed;
--secondary: #22c55e;
--accent: #f59e0b;
--bg: #0f172a;
--text: #e2e8f0;
| 类名 | 作用 |
|---|---|
| .slide | 幻灯片容器 |
| .highlight | 高亮文本 |
| .code-block | 代码块 |
| .split-layout | 左右分栏 |
修改必须通过
presentation-curatoragent。
---
name: presentation-styling
description: CSS classes and HTML patterns used in presentation/index.html. Use when adding or modifying slide content to match existing visual style.
user-invocable: false
---
# 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">></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<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.
<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>
<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 — Fixed bar below progress bar.journey-bar.hidden — Hidden on title slideh1 elements of weighted slidesCurrent = <strong>Level</strong> via JS innerHTML