# Marp Slides

> Create professional, visually excellent presentation slides in Marp Markdown format. Use this skill when the user asks to: - Create a presentation, slides, deck, slideshow, or プレゼン / スライド - Write or generate slides about a specific topic - Make a Marp .md file for presenting Produces complete, ready-to-render .md files with embedded custom CSS theme, narrative structure, and polished visual design. Supports Japanese and English content.

- Skill: `mashharuki/marp-slides` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add mashharuki/marp-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mashharuki/marp-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mashharuki (https://skillmd.com/u/mashharuki)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/mashharuki/marp-slides

---


# Marp Slides — Excellence Workflow

## Step 1 — Gather Requirements

Clarify before generating (infer from context when obvious):

| Field | Default if unspecified |
|---|---|
| Topic / title | Ask |
| Audience | General business |
| Purpose | Inform / present findings |
| Slide count | 12–15 |
| Language | Match user's language |
| Output path | `./slides.md` |

Ask concisely. For simple requests ("make slides about X"), infer and proceed.

## Step 2 — Plan the Narrative Arc

Before writing, sketch the arc:
```
Title → Agenda → Problem/Context → Body (3–5 slides) → Evidence → Summary → CTA → Ending
```

See `references/design-principles.md` for purpose-specific arc patterns and slide count guidelines.

## Step 3 — Generate the Marp File

### Required Frontmatter

```markdown
---
marp: true
theme: excel
paginate: true
size: 16:9
html: true
style: |
  /* [PASTE FULL CONTENTS OF assets/excel-theme.css HERE] */
---
```

Always embed the full CSS from `assets/excel-theme.css` in the `style:` block.
This makes the file self-contained and immediately renderable without external setup.

### Slide Class Usage

Apply per-slide with `<!-- _class: CLASS -->` immediately before the slide separator:

| Class | Use for |
|---|---|
| `title` | Cover slide — dark gradient, large H1 |
| `section` | Chapter break — blue background |
| `lead` | Key message — centered, large text |
| `dark` | Code showcase, dramatic emphasis |
| `ending` | Final slide — dark gradient, centered |
| *(none)* | Standard content slides |

### Layout Components

Use HTML `<div>` elements with these classes (requires `html: true`):

| Component | Class | Use for |
|---|---|---|
| Two columns | `.columns` | Side-by-side comparison |
| Three columns | `.columns.col-3` | Three options/features |
| Asymmetric cols | `.columns.col-6-4` or `.col-4-6` | Text + image/stat |
| Info card | `.card` `.card.accent/.warn/.success/.danger` | Categorized items |
| Key message box | `.highlight` | Single most important takeaway |
| Large metric | `.number` (or `.number.warm`) | KPI display |
| Tag / badge | `.tag` `.tag.warm/.success/.outline` | Tech stack, labels |
| Step list | `.steps` + `.step` | Numbered process |
| Icon row | `.icons` + `.icon-item` | Feature overview |
| Progress bar | `.progress` + `.progress-bar` | Status/roadmap |

See `references/layout-patterns.md` for copy-paste code examples of each.

### Content Quality Rules

- **1 idea per slide** — if a slide has two topics, split it
- **Max 5–6 bullets** per slide, each ≤12 words
- **`**Bold**` the key phrase** in each bullet (exactly one per bullet)
- **Vary visual types** — never 3+ consecutive all-bullet slides
- **Use `.highlight`** for the single most important message per section
- Write **real content**, not placeholders like "ここに説明を入れる"

See `references/design-principles.md` for full design guidance.

## Step 4 — Output

1. Write the complete `.md` file to the specified path (default: `./slides.md`)
2. Tell the user:
   - How to render: `npx @marp-team/marp-cli slides.md --html` (PDF/HTML)
   - VS Code: Install "Marp for VS Code", enable HTML in settings (`markdown.marp.enableHtml: true`)
3. Offer to adjust: slide count, language, style, or add specific sections

## Technical Notes

- `html: true` is required for layout components (`.columns`, `.card`, etc.)
- Without it, the HTML divs render as literal text — always include it
- For Tailwind CSS (advanced): add CDN script after frontmatter with `preflight: false`
- Mermaid diagrams: enable HTML and use `<div class="mermaid">...</div>`