Marp Slide

Marp Slide Creator

Create professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices.

When to Use This Skill

Use this skill when the user:

• Requests to create presentation slides or Marp documents
• Asks to "make slides look good" or "improve slide design"
• Provides vague 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

First, 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

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

• 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

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

• Structure content following best practices:
• Title slide with <!-- _class: lead -->
• Concise h2 titles (5-7 characters in Japanese)
• 3-5 bullet points per slide
• Adequate whitespace

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

• Save to /mnt/user-data/outputs/ with .md extension

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

Basic Workflow

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

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

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

• Structure content
• Title slide: <!-- _class: lead --> + h1
• Content slides: h2 title + bullet points
• Keep titles to 5-7 characters (Japanese)
• Use 3-5 bullet points per slide

• Refine quality
• Read references/best-practices.md
• Ensure adequate whitespace
• Maintain consistency
• Keep text concise (15-25 chars per line)

• Add images
• If needed, consult references/image-patterns.md
• Common: !bg right:40% for side images
• Use proper Marp image syntax

• Output file
• Save to /mnt/user-data/outputs/
• Use descriptive filename like presentation.md

Handling "Make It Look Good" Requests

When users give vague instructions like "良い感じにして", "かっこよく", or "make it cool":

• Infer theme from content:
• Business content → business theme
• Technical content → tech or dark theme
• Creative content → gradient or colorful theme
• General → default theme

• Apply best practices automatically:
• Shorten titles to 5-7 characters
• Limit bullet points to 3-5 items
• Add adequate whitespace
• Use consistent structure

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

• Maintain professional tone:
• Match formality to content
• Use parallel structure in lists
• Keep technical terms consistent

Image Integration

For slides with images, consult references/image-patterns.md for detailed syntax.

Common patterns:

• Side image: !bg right:40% - Image on right, text on left
• Centered: !w:600px - Centered with specific width
• Full background: !bg - 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

File Output

Always save the final Marp file to /mnt/user-data/outputs/ with .md extension:

• presentation.md
• seminar-slides.md
• lecture-materials.md

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 (5-7 chars)
• [ ] Bullet points are 3-5 items per slide
• [ ] Images use proper Marp syntax
• [ ] File saved to outputs directory
• [ ] Content follows best practices

References

Core Documentation

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

Quality & Selection Guides

• Theme selection: references/theme-selection.md - How to choose the right theme for content
• Best practices: references/best-practices.md - Quality guidelines for "cool" slides

Templates & Assets

• Templates: assets/template-*.md - Starting points with embedded CSS for each theme (7 themes)
• Standalone CSS: assets/theme-*.css - 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
• Marp Core GitHub: https://github.com/marp-team/marp-core
• Marp CLI GitHub: https://github.com/marp-team/marp-cli