majiayu000 Purpose
本技能为 fluid-slide 项目提供专用的幻灯片编写规范。涵盖：
- 自定义 Grid 布局系统
- Material Design 3 工具类
- 特殊组件（Timeline、Masonry、LeaderLine）
- 文件结构约定
Syntax Preference
优先使用 Pandoc bracketed spans 语法，避免手写 HTML：
| 避免 | 推荐 |
|---|---|
<span class="foo">text</span> |
[text]{.foo} |
<span id="bar">text</span> |
[text]{#bar} |
<div class="foo">...</div> |
::: {.foo}...::: |
Bracketed spans 语法更简洁，且与 Pandoc/Quarto 生态一致。
When to Use
在本项目中制作或修改幻灯片时使用此技能。
Do NOT use when:
- 需要 Quarto/Reveal.js 通用知识（使用
quarto-revealjs技能） - 非本项目的演示文稿
Relationship with quarto-revealjs
| 技能 | 职责 |
|---|---|
quarto-revealjs |
Quarto/Reveal.js 通用知识（YAML、SCSS、扩展） |
create-slide |
本项目特定约定（Grid 系统、MD3 类、组件） |
File Structure
deck.qmd # 主文件：标题 + include
slides/
[slide-name]/
index.md # 幻灯片内容（不含 ## 标题）
assets/ # 资源文件（SVG、图片、视频）
deck.qmd 结构：
## 标题文字 {background-color="#fff"}
```{=comment}
演讲者注释
{{< include slides/slide-name/index.md >}}
**资源引用**：`assets/filename.ext`（会被同步到根目录）
---
## Grid Layout System
### Basic Grid
```markdown
::: {.grid cols="1fr 1fr" gap="2em"}
::: {.slot}
左侧内容
:::
::: {.slot}
右侧内容
:::
:::
Parameters
| 参数 | 说明 | 示例 |
|---|---|---|
cols |
列定义 | 1fr 2fr, 1fr 1fr 1fr |
rows |
行定义 | auto 1fr, 1fr 1fr |
gap |
间距 | 1em, 0.5em 1em |
Spanning
| 类 | 效果 |
|---|---|
.span-2, .span-3 |
跨 2/3 列 |
.row-span-2, .row-span-3 |
跨 2/3 行 |
显式定位：
::: {.slot style="grid-row: 3 / 5; grid-column: 3;"}
跨第3-4行，第3列
:::
Incremental Display
::: {.grid .incremental cols="1fr 2fr 2fr" gap="0.5em"}
::: {.slot .nonincremental style="font-weight: 600; border-bottom: 2px solid var(--md3-outline-variant);"}
Header（不参与增量）
:::
::: {.slot}
Content（增量显示）
:::
:::
MD3 Utility Classes
Colors
| 类 | 用途 |
|---|---|
.color-primary |
主色（蓝） |
.color-error |
强调/错误（红） |
.color-warning |
警告（黄） |
.color-success |
成功（绿） |
.color-muted |
次要文字 |
行内使用：
[关键词]{.color-primary}
[警告]{.color-error}
Surfaces
| 类 | 深度 |
|---|---|
.surface-lowest |
最浅 |
.surface-low |
浅 |
.surface |
默认 |
.surface-high |
深 |
.surface-highest |
最深 |
Shapes
| 类 | 圆角 |
|---|---|
.rounded-xs |
4px |
.rounded-sm |
8px |
.rounded-md |
12px |
.rounded-lg |
16px |
.rounded-xl |
28px |
.rounded-full |
圆形 |
Elevation
.elevation-0 到 .elevation-5
Card Pattern
::: {.surface-low .rounded-md style="padding: 1.2em;"}
**Title**
Content here
:::
Special Components
Timeline
::::: {.grid rows="4fr 1fr" gap="0.2em"}
:::: {.timeline}
::: {.timeline-item}
::: {.content}
[**2017**]{.color-primary} · 标题
描述文字^[脚注]
:::
:::
::: {.timeline-item}
::: {.content}
[**2019**]{.color-primary} · 标题
描述文字
:::
:::
::::
:::::
Masonry
::::: {.masonry data-columns="2"}
:::::
LeaderLine (Animated Connectors)
[起点文字]{#cycle-top}
[终点文字]{#cycle-bottom}
[]{.leaderline start="#cycle-bottom" end="#cycle-top" color="#f9a825" path="arc" start-socket="left" end-socket="left" size="2"}
[]{.leaderline start="#cycle-top" end="#cycle-bottom" color="#f9a825" path="arc" start-socket="right" end-socket="right" size="2"}
Demo Highlight (Video Border)
{.demo-highlight autoplay="true" muted="true" loop="true"}
Callout
::: {.callout-warning}
**结论**：警告内容
:::
Media
Video
{autoplay="true" muted="true" loop="true"}
带高亮边框：
{.demo-highlight autoplay="true" muted="true" loop="true"}
Image
{fig-align="center" style="max-height: 320px;"}
{width="80%"}
FontAwesome Icons
{{< fa icon-name >}}
{{< fa circle-check >}}
{{< fa circle-xmark >}}
{{< fa brands github >}}
带样式：
[{{< fa circle-check >}}]{style="font-size: 2.5em; color: #4CAF50;"}
Text Styling
Inline Highlighting
[强调文字]{.color-primary}
[错误/重要]{.color-error}
[警告]{.color-warning}
Explicit Font Size
[小字]{style="font-size: 0.8em;"}
[大字]{style="font-size: 1.2em;"}
禁止使用 Quarto 的 .smaller 类，使用显式 style="font-size: ..."
Fit Text
::: {.r-fit-text}
自动缩放的大标题
:::
Fragment (Animation)
::: {.fragment}
渐显内容
:::
::: {.r-fit-text .fragment}
渐显的大标题
:::
Footnotes
Inline Footnote
文字内容^[脚注说明]
Referenced Footnote
文字内容[^ref-id]
[^ref-id]: 脚注定义，可以包含 [链接](url)
Complete Examples
Example 1: Two-Column Comparison
::: {.grid cols="1fr 1fr" gap="2em"}
::: {.slot}
**数字世界**
{fig-align="center" style="max-height: 320px;"}
[基准测试快速被解决]{style="font-size: 0.8em;"}
:::
::: {.slot style="text-align: center;"}
**物理世界**
::: {.grid cols="auto auto" gap="0.3em" style="justify-content: center;"}
{style="max-height: 300px;"}
[{{< fa circle-xmark >}}]{style="font-size: 2.5em; color: #f44336;"}
:::
[简单任务依然困难]{style="font-size: 0.9em;"}
:::
:::
Example 2: Comparison Table with Headers
::: {.grid .incremental cols="1fr 2fr 2fr" gap="0.5em" style="font-size: 0.95em;"}
::: {.slot .nonincremental style="font-weight: 600; border-bottom: 2px solid var(--md3-outline-variant); padding-bottom: 0.3em;"}
维度
:::
::: {.slot .nonincremental style="font-weight: 600; border-bottom: 2px solid var(--md3-outline-variant); padding-bottom: 0.3em;"}
Code Agent
:::
::: {.slot .nonincremental style="font-weight: 600; border-bottom: 2px solid var(--md3-outline-variant); padding-bottom: 0.3em;"}
Embodied Agent
:::
::: {.slot .nonincremental}
**适用范围**
:::
::: {.slot}
在主流技术栈中表现亮眼
:::
::: {.slot}
在实验室场景中成功率很高
:::
:::
Example 3: Quote Cards Grid
:::: {.grid cols="1fr 1fr 1fr" gap="0.2em"}
::: {.slot}
::: {.surface-low .rounded-md style="padding: 1.2em; height: 100%;"}
[路径不明]{.color-primary} · {width="28px" style="vertical-align: middle;"}
**Expert Name**
> Quote text [highlighted]{.color-error}^[Reference]
:::
:::
::::
Example 4: Video Demo Grid
:::: {.grid cols="1fr 1fr 2fr" rows="1fr 1fr 1fr 1fr" gap="0.5em"}
::: {.slot .row-span-3}
{.demo-highlight autoplay="true" muted="true" loop="true"}
:::
::: {.slot .row-span-3}
{autoplay="true" muted="true" loop="true"}
:::
::: {.slot .row-span-2}
{.demo-highlight autoplay="true" muted="true" loop="true"}
:::
::: {.slot style="grid-row: 3 / 5; grid-column: 3;"}
{.demo-highlight autoplay="true" muted="true" loop="true"}
:::
::::
Checklist
- 资源放在
slides/[name]/assets/中 - 引用路径使用
assets/filename.ext - 标题写在
deck.qmd，内容写在index.md - 使用
.color-*进行语义高亮 - 使用显式
style="font-size: ..."而非.smaller - 视频添加
autoplay muted loop属性