How do I install the Content/jekyll Slides skill?

Run npx skillmds@latest add latticecast/content-jekyll-slides in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Content/jekyll Slides safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Content/jekyll Slides?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Content/jekyll Slides free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Content/jekyll Slides?

LatticeCast (@latticecast) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Content/jekyll Slides by latticecast

Name: Content/jekyll Slides
Rating: 4.2 (5 reviews)
Author: LatticeCast

File contents

Jekyll Slides

Create slide presentations using Jekyll markdown format where ## h2 headings act as slide separators.

Format

Frontmatter

---
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):

<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Video Title" frameborder="0" ></iframe>

Images use HTML img tags (never markdown ![]()):

<img src="./image.webp" style="max-width:90%; height:auto;">

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:
```
* [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

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

<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Reference Video" frameborder="0" ></iframe>

## Visual Example

<img src="./example.webp" style="max-width:90%; height:auto;">

## References

<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Source Video" frameborder="0" ></iframe>

* [Resource Name](https://url)
* [Another Resource](https://url)

## Homework

* Task for the audience
* (Optional) Additional exercise

---name: content-jekyll-slidesdescription: Create Jekyll slide presentations. Use when building slides with h2 headings as separators.---# Jekyll SlidesCreate 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 Embeddinguse `max-width:90%`YouTube videos use iframe (never markdown links):```html<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Video Title" frameborder="0" ></iframe>```Images use HTML img tags (never markdown `![]()`):```html<img src="./image.webp" style="max-width:90%; height:auto;">```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 Subtitlelayout: "page/note/slides"---## Opening HookWhy is this topic important? A compelling question or statement to engage the audience.## Self IntroductionSpeaker Name* relevant info* background## Core Concept1. Key Point One2. Key Point Two3. Key Point Three<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Reference Video" frameborder="0" ></iframe>## Visual Example<img src="./example.webp" style="max-width:90%; height:auto;">## References<iframe style="max-width:90%; aspect-ratio:16/9;" src="https://www.youtube.com/embed/VIDEO_ID" title="Source Video" frameborder="0" ></iframe>* [Resource Name](https://url)* [Another Resource](https://url)## Homework* Task for the audience* (Optional) Additional exercise```

Frequently asked questions

Content/jekyll Slides