Marp Slide Decks

/marp-slide

Create professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices. The user pastes notes, an outline, or an existing Marp file; deliver a complete .md Marp document (CSS embedded, no external files needed) as a chat artifact they can render with Marp CLI or the VS Code Marp extension. For general presentation building outside the Marp/Markdown format, use slides.

When to Use This Skill

Use this skill when the user:

• Requests presentation slides as Marp/Markdown documents
• Asks to "make slides look good" or "improve slide design" for a Marp deck
• Gives vague style instructions like "make it nice" or "make it cool"
• Wants to create lecture or seminar materials
• Needs bullet-point focused slides with occasional images

Quick Start

Step 1: Select Theme

Determine the appropriate theme based on the user's request and content.

Quick theme selection:

• Technical/Developer content -> tech theme
• Business/Corporate -> business theme
• Creative/Event -> colorful or gradient theme
• Academic/Simple -> minimal theme
• General/Unsure -> default theme
• Dark background preferred -> dark or tech theme

For detailed theme selection guidance, read references/theme-selection.md.

Step 2: Create Slides

1. Read relevant references first:

   • Always start with references/marp-syntax.md for basic syntax
   • For images: references/image-patterns.md (official Marpit image syntax)
   • For advanced features (math, emoji, fragments): references/advanced-features.md
   • For custom themes: references/theme-css-guide.md

2. Copy content from the appropriate template file:

   • assets/template-basic.md - Default theme (most common)
   • assets/template-minimal.md - Minimal theme
   • assets/template-colorful.md - Colorful theme
   • assets/template-dark.md - Dark mode theme
   • assets/template-gradient.md - Gradient theme
   • assets/template-tech.md - Tech/code theme
   • assets/template-business.md - Business theme

3. Read references/best-practices.md for quality guidelines

4. Structure content following best practices:

   • Title slide with <!-- _class: lead -->
   • Concise h2 titles
   • 3-5 bullet points per slide
   • Adequate whitespace

5. Add images if needed using patterns from references/image-patterns.md

6. Deliver the finished deck as a .md artifact with a descriptive filename

Available Themes

1. Default Theme

Colors: Beige background, navy text, blue headings Style: Clean, sophisticated with decorative lines Use for: General seminars, lectures, presentations Template: template-basic.md

2. Minimal Theme

Colors: White background, gray text, black headings Style: Minimal decoration, wide margins, light fonts Use for: Content-focused presentations, academic talks Template: template-minimal.md

3. Colorful & Pop Theme

Colors: Pink gradient background, multi-color accents Style: Vibrant gradients, bold fonts, rainbow accents Use for: Youth-oriented events, creative projects Template: template-colorful.md

4. Dark Mode Theme

Colors: Black background, cyan/purple accents Style: Dark theme with glow effects, eye-friendly Use for: Tech presentations, evening talks, modern look Template: template-dark.md

5. Gradient Background Theme

Colors: Purple/pink/blue/green gradients (varies per slide) Style: Different gradient per slide, white text, shadows Use for: Visual-focused, creative presentations Template: template-gradient.md

6. Tech/Code Theme

Colors: GitHub-style dark background, blue/green accents Style: Code fonts, Markdown-style headers with # symbols Use for: Programming tutorials, tech meetups, developer content Template: template-tech.md

7. Business Theme

Colors: White background, navy headings, blue accents Style: Corporate presentation style, top border, table support Use for: Business presentations, proposals, reports Template: template-business.md

Creating Slides Process

1. Understand requirements

   • Identify content: title, topics, key points
   • Determine target audience
   • Assess formality level

2. Select theme

   • Use quick selection rules above
   • If uncertain, consult references/theme-selection.md
   • Default to default theme if still unsure

3. Apply template

   • Load the appropriate template from assets/
   • CSS is already embedded - no external files needed
   • Maintain template structure

4. Structure content

   • Title slide: <!-- _class: lead --> + h1
   • Content slides: h2 title + bullet points
   • Keep titles short (a few words)
   • Use 3-5 bullet points per slide

5. Refine quality

   • Read references/best-practices.md
   • Ensure adequate whitespace
   • Maintain consistency
   • Keep text concise (short lines, no walls of text)

6. Add images

   • Consult references/image-patterns.md as needed
   • Common: ![bg right:40%](image.png) for side images
   • Use proper Marp image syntax; ask the user for image files or use paths they specify

7. Deliver the file

   • Provide the full deck as a downloadable .md artifact, e.g. presentation.md, seminar-slides.md, lecture-materials.md
   • Mention the render command: npx @marp-team/marp-cli presentation.md -o presentation.pdf (or .html/.pptx)

Handling "Make It Look Good" Requests

When users give vague instructions like "make it nice" or "make it cool":

1. Infer theme from content:

   • Business content -> business theme
   • Technical content -> tech or dark theme
   • Creative content -> gradient or colorful theme
   • General -> default theme

2. Apply best practices automatically:

   • Shorten titles
   • Limit bullet points to 3-5 items
   • Add adequate whitespace
   • Use consistent structure

3. Enhance visual hierarchy:

   • Use h3 for sub-sections when appropriate
   • Break up dense text into multiple slides
   • Ensure logical flow (intro -> body -> conclusion)

4. Maintain professional tone:

   • Match formality to content
   • Use parallel structure in lists
   • Keep technical terms consistent

Image Integration

Common patterns (full syntax in references/image-patterns.md):

• Side image: ![bg right:40%](image.png) - Image on right, text on left
• Centered: ![w:600px](image.png) - Centered with specific width
• Full background: ![bg](image.png) - Full-screen background
• Multiple images: Multiple ![bg] declarations

Example lecture pattern:

## Slide Title

![bg right:40%](diagram.png)

- Explanation point 1
- Explanation point 2
- Explanation point 3

Quality Checklist

Before delivering slides, verify:

• Theme selected appropriately for content
• CSS theme is embedded in the file
• Title slide uses <!-- _class: lead -->
• All h2 titles are concise
• Bullet points are 3-5 items per slide
• Images use proper Marp syntax
• Full deck delivered as a single .md artifact
• Content follows best practices

References

Core Documentation

• references/marp-syntax.md - Basic Marp/Marpit syntax (directives, frontmatter, pagination)
• references/image-patterns.md - Official image syntax (bg, filters, split backgrounds)
• references/theme-css-guide.md - How to create custom themes per the Marpit specification
• references/advanced-features.md - Math, emoji, fragmented lists, Marp CLI, VS Code
• references/official-themes.md - default, gaia, uncover themes documentation

Quality & Selection Guides

• references/theme-selection.md - How to choose the right theme for content
• references/best-practices.md - Quality guidelines for polished slides

Templates & Assets

• assets/template-*.md - Starting points with embedded CSS for each theme (7 themes)
• assets/theme-*.css - Standalone CSS files for reference (already embedded in templates)

Official External Links

• Marp official site: https://marp.app/
• Marpit directives: https://marpit.marp.app/directives
• Marpit image syntax: https://marpit.marp.app/image-syntax
• Marpit theme CSS: https://marpit.marp.app/theme-css

Usage

/marp-slide $ARGUMENTS