223015b/.claude/skills/marp/SKILL.md

name, description, allowed-tools

name	description	allowed-tools
marp	Marp/Marpit documentation and slide creation guide. Use this skill when working with Marp presentations, slide syntax, themes, directives, or troubleshooting Marp-related issues.	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

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