# Marp Slides
> Create beautiful MARP presentation decks with SVG charts, interactive elements, dashboard components, animations, dark/light themes. Triggers on 'marp', 'slides', 'presentation', 'deck'.
- Skill: `robonuggets/marp-slides` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add robonuggets/marp-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/robonuggets/marp-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: robonuggets (https://skillmd.com/u/robonuggets)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/robonuggets/marp-slides
---
# MARP Slides v2
## Prerequisites
- VS Code extension "Marp for VS Code"
- Settings: `markdown.marp.enableHtml: true` + `markdown.marp.allowLocalFiles: true`
- Export: `npx @marp-team/marp-cli slides.md --pdf --allow-local-files`
## Example Decks (CRITICAL — read before generating)
The `examples/` folder contains 22 curated reference decks. **Before generating any deck, read 2-3 examples that match the requested style.** These are the quality bar — match their composition, spacing, and visual density. Key examples by category:
| Category | Examples to read |
|---|---|
| Data / dashboard | `marp_facebook-ads.md`, `marp_fitness.md`, `marp_comparison.md` |
| Lifestyle / editorial | `marp_coffee.md`, `marp_wine-tasting.md`, `marp_cocktail.md` |
| Guide / how-to | `marp_garden.md`, `marp_houseplant.md`, `marp_home-gym.md` |
| Fun / creative | `marp_kids-party.md`, `marp_board-game.md`, `marp_film-director.md` |
| Travel / location | `marp_travel.md`, `marp_walking-tour.md`, `marp_road-trip.md` |
| Showcase / hero | `marp_hero.md`, `marp_apartment.md`, `marp_wardrobe.md` |
| Reference / sampler | `marp_sample.md` (component showcase) |
## Core Rules
- Slides separated by `---`
- YAML frontmatter controls theme/pagination/styles
- `enableHtml` unlocks SVG, cards, charts, animations, interactive elements
- Default 16:9 (1280x720)
## Dark Starter Template
The dark template uses Outfit 800 for headings and Raleway 100-200 for body text. CSS variables:
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');
:root {
--accent: #ff6b1a; --accent-hover: #ff8c4a;
--dark: #000; --card: #080808; --border: #111;
--body: #999; --label: #666; --muted: #555; --light: #fff;
--green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }
```
Frontmatter includes: `header: ''`
## Light Theme
Swap vars: `--accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a;`
Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.
## Heading Hierarchy
- h1 = title slides (white, extra large)
- h2 = subtitle (grey, thin)
- h3 = section label (muted, uppercase, small)
## Font Pairings (Tested)
| Heading | Body | Use |
|---|---|---|
| Outfit 800 | Raleway 100 | Dashboard, data (default) |
| DM Serif Display | DM Sans 300 | Recipes, editorial |
| Space Grotesk 700 | IBM Plex Mono 300 | Travel, light themes |
| Sora 700 | Sora 200 | Product comparisons |
| Urbanist 800 | Urbanist 100 | Music, Spotify-style |
| Plus Jakarta Sans 800 | Plus Jakarta Sans 200 | Retros, team decks |
## Images
CRITICAL: Relative paths only. `./image.png` works. Absolute paths break in preview.
- Logo header: `header: ''` — hide per slide: ``
- Photo bg: ``
- Split: `` or ``
- CDN logos: ``
- Centered inline: wrap img in `
` with border-radius and border
## Dashboard Components
### Metric Card (gradient top border)
Card with `position:relative; overflow:hidden;` and absolute div at top with `background:linear-gradient(90deg, var(--accent), transparent); height:2px;`. Icon + label + big number + trend arrow.
### Status Dots
Inline SVG circles: green (#22c55e) = active, yellow (#f5a623) = learning, red (#ef4444) = paused.
``
### Verdict Tags
`Scale`
Swap colors for red (kill) and yellow (review).
### Hover Rows
Wrap content in `
` for hover highlight effect.
## SVG Charts
### Line / Area Chart
SVG polyline for the line + polygon with linearGradient fill for area under the line. Add grid lines, dashed target line, circle data points. Use viewBox="0 0 900 240" with preserveAspectRatio="none".
### Pie / Donut Chart
Each segment = separate circle with stroke-dasharray and stroke-dashoffset. Math: circumference = 2*pi*r. For r=110: ~691. Segment = (pct/100)*691. Offsets accumulate negatively. stroke-width controls ring thickness. Always transform="rotate(-90 cx cy)".
### Gauge / Half-Circle Meter
SVG path arc for background + colored value arc. Needle line from center + circle pivot. For scores 0-100. stroke-linecap="round".
### Donut Ring
Single circle stroke-dasharray. circ = 2*pi*r. Offset = circ - (circ * pct/100). For r=74: circ=465. 89%: offset=51.
### Sparkline (inline mini)
``
### Stacked Bar
Flex div with colored width-percent segments, border-radius, overflow:hidden.
### Vertical Bar Chart
Flex container align-items:flex-end. Gradient bars: `background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;`
### Radar / Spider
SVG polygon for hexagonal grid + data shape with fill-opacity:0.1 and stroke outline.
## Interactive Elements
- Collapsible: `Title
Content
`
- Tooltip: `TERM`
- Slider: ``
- Checkbox: ``
- Progress: ``
## Layout Components
- Before/After Split — two flex panels, border-top red vs green
- Terminal Mockup — traffic light dots + monospace body
- Browser Mockup — dots + URL bar div
- Chat Bubbles — user (left) + agent (right, orange-tinted)
- Flowchart — boxes + SVG arrow connectors
- Timeline — vertical border-left + dot circles
- Card Row — display:flex; gap:14px; with flex:1 children
## SVG Icons
All wrapped in `
`
- Centered inline: wrap img in `