---
name: marp
description: Marp/Marpit documentation and slide creation guide. Use this skill when working with Marp presentations, slide syntax, themes, directives, or troubleshooting Marp-related issues.
allowed-tools:
  - Read
  - Glob
  - Grep
  - WebFetch
---

# Marp/Marpit Skill

## Purpose

This skill provides comprehensive knowledge about Marp (Markdown Presentation Ecosystem) and its core engine Marpit. Use this when creating, editing, or troubleshooting Markdown-based slide presentations.

## Documentation Sources

When you need Marp information, fetch from these official sources:

### Marpit Framework (Core Engine)
- **Main docs**: https://marpit.marp.app/
- **Markdown syntax**: https://marpit.marp.app/markdown
- **Directives**: https://marpit.marp.app/directives
- **Theme CSS**: https://marpit.marp.app/theme-css
- **Fragmented list**: https://marpit.marp.app/fragmented-list
- **Image syntax**: https://marpit.marp.app/image-syntax

### Marp CLI
- **Usage guide**: https://github.com/marp-team/marp-cli

## Key Concepts to Learn

### 1. Slide Separation
Slides are separated by `---` (horizontal rule). The first `---` after frontmatter starts the first slide.

### 2. Directives
- **Global directives**: Apply to all slides (in frontmatter)
- **Local directives**: Apply to current slide only (`<!-- _directive: value -->`)
- **Spot directives**: Underscore prefix for local scope

### 3. Image Syntax
Marp extends standard Markdown image syntax:
- `![bg](image.jpg)` - background image
- `![bg fit](image.jpg)` - fit to slide
- `![bg right:40%](image.jpg)` - split background
- `![w:200](image.jpg)` - width filter
- `![h:300](image.jpg)` - height filter

### 4. Theme CSS
- Themes use CSS with special Marpit selectors
- `section` = slide container
- `section::after` = pagination
- CSS variables for theming

### 5. Scoped Styles
```html
<style scoped>
/* Only applies to this slide */
</style>
```

## Workflow

When asked about Marp:

1. **Read REFERENCE.md first** - Contains comprehensive syntax documentation
2. **Check local files** - Read existing slides and themes in the project
3. **Fetch official docs if needed** - Use WebFetch for edge cases
4. **Provide concrete examples** - Show actual Marp syntax
5. **Reference project conventions** - Follow CLAUDE.md guidelines

## Project-Specific Notes

This project uses:
- Theme: `gaia`
- Assets path: `./assets/`
- Build output: `build/`
- Dev server: `make dev` (port 1312)