OpenSkillIndex← back to search
claude-codewriting

Claude-skill-registry create-slide

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/create-slide" ~/.claude/skills/majiayu000-claude-skill-registry-create-slide && rm -rf "$T"
manifest: skills/data/create-slide/SKILL.md
tags
#presentation#markdown#grid-layout#material-design#quarto
source content

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

![](assets/img1.jpg)

![](assets/img2.jpg)

![](assets/img3.jpg)

:::::

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)

![](assets/video.mp4){.demo-highlight autoplay="true" muted="true" loop="true"}

Callout

::: {.callout-warning}
**结论**：警告内容
:::

Media

Video

![](assets/demo.mp4){autoplay="true" muted="true" loop="true"}

带高亮边框：

![](assets/demo.mp4){.demo-highlight autoplay="true" muted="true" loop="true"}

Image

![](assets/diagram.svg){fig-align="center" style="max-height: 320px;"}
![](assets/photo.png){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}
**数字世界**

![](assets/chart.svg){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;"}
![](assets/robot.png){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} · ![](assets/icon.svg){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}
![](assets/demo1.mp4){.demo-highlight autoplay="true" muted="true" loop="true"}
:::

::: {.slot .row-span-3}
![](assets/demo2.mp4){autoplay="true" muted="true" loop="true"}
:::

::: {.slot .row-span-2}
![](assets/demo3.mp4){.demo-highlight autoplay="true" muted="true" loop="true"}
:::

::: {.slot style="grid-row: 3 / 5; grid-column: 3;"}
![](assets/demo4.mp4){.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
    属性