SkillsAdd

modelscope.cn

create-slide

fluid-slide 项目专用的幻灯片制作规范。 定义了 Grid 布局、MD3 工? ?

Installation

$ npx skills add https://modelscope.cn
View on skills.sh ↗ Website ↗

Also in this package

Other skills from modelscope.cn · top by installs.

npx skills add https://modelscope.cn
skill-creator 2K frontend-design 1.9K pptx-generator 1.3K minimax-docx 1.2K find-skills 1.1K minimax-xlsx 1.2K minimax-pdf 1.2K docx 942 self-improvement 932 pdf 914

Browse all from modelscope.cn

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 8,520 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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

::: {.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` 属性