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 the project output directory 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: for side images

• Use proper Marp image syntax

Output file

• Save to the project output directory

• 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:

• Image on right, text on left

• Centered:

• Centered with specific width

• Full background:

• Full-screen background

• Multiple images: Multiple ![bg] declarations

Example lecture pattern:

Slide Title

• Explanation point 1
• Explanation point 2
• Explanation point 3

File Output

Always save the final Marp file to the project output directory 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