# Content/jekyll Slides
> Create Jekyll slide presentations. Use when building slides with h2 headings as separators.
- Skill: `latticecast/content-jekyll-slides` (Agent Skill)
- Install (CLI): `npx skillmds@latest add latticecast/content-jekyll-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/latticecast/content-jekyll-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: LatticeCast (https://skillmd.com/u/latticecast)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/latticecast/content-jekyll-slides
---
# Jekyll Slides
Create slide presentations using Jekyll markdown format where `## h2` headings act as slide separators.
## Format
### Frontmatter
```yaml
---
title: "Topic - Subtitle"
layout: "page/note/slides"
---
```
### Slide Structure
- Each `## h2` heading creates a new slide and becomes the slide title
- Content under each `## h2` is the slide body
- Users navigate slides with left/right arrow keys
### Media Embedding
use `max-width:90%`
YouTube videos use iframe (never markdown links):
```html
```
Images use HTML img tags (never markdown `![]()`):
```html
```
Default to `max-width:90%; height:auto` — fits container width and scales on zoom. Add `style="background-color: white;"` if image needs a white background.
**Image format: webp only.** Never use png/jpg in slides. If user provides a png/jpg, ask them to convert it first or run `_layouts/img2webp.sh` to batch-convert.
### Content Guidelines
- Keep each slide focused on one idea
- Use bullet points `*` or ordered lists `1.` for key points
- Embed YouTube iframes directly in slides for reference videos
- Link collections use markdown list format:
```markdown
* [Link Text](https://url)
```
- First slide is typically a hook or introduction
- Last slide is typically homework or action items
- A references/resources slide collects source materials
## Example
```markdown
---
title: Topic - 01 Subtitle
layout: "page/note/slides"
---
## Opening Hook
Why is this topic important? A compelling question or statement to engage the audience.
## Self Introduction
Speaker Name
* relevant info
* background
## Core Concept
1. Key Point One
2. Key Point Two
3. Key Point Three
## Visual Example
## References
* [Resource Name](https://url)
* [Another Resource](https://url)
## Homework
* Task for the audience
* (Optional) Additional exercise
```
```
Default to `max-width:90%; height:auto` — fits container width and scales on zoom. Add `style="background-color: white;"` if image needs a white background.
**Image format: webp only.** Never use png/jpg in slides. If user provides a png/jpg, ask them to convert it first or run `_layouts/img2webp.sh` to batch-convert.
### Content Guidelines
- Keep each slide focused on one idea
- Use bullet points `*` or ordered lists `1.` for key points
- Embed YouTube iframes directly in slides for reference videos
- Link collections use markdown list format:
```markdown
* [Link Text](https://url)
```
- First slide is typically a hook or introduction
- Last slide is typically homework or action items
- A references/resources slide collects source materials
## Example
```markdown
---
title: Topic - 01 Subtitle
layout: "page/note/slides"
---
## Opening Hook
Why is this topic important? A compelling question or statement to engage the audience.
## Self Introduction
Speaker Name
* relevant info
* background
## Core Concept
1. Key Point One
2. Key Point Two
3. Key Point Three
## Visual Example
## References
* [Resource Name](https://url)
* [Another Resource](https://url)
## Homework
* Task for the audience
* (Optional) Additional exercise
```