80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
---
|
|
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:
|
|
- `` - background image
|
|
- `` - fit to slide
|
|
- `` - split background
|
|
- `` - width filter
|
|
- `` - 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)
|