marp-slide

SKILL.md

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%](image.png) 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.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

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