manus-skills/.kortix/opencode/skills/design/marp-slide/README.md

Marp Slide Creator

A Claude Code skill for creating professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices.

Purpose

This skill automates the creation of high-quality Marp presentations by providing:

• 7 professionally designed themes (default, minimal, colorful, dark, gradient, tech, business)
• Built-in best practices for slide structure and visual hierarchy
• Automatic quality improvements for vague "make it look good" requests
• Image integration with proper Marp syntax
• Theme selection guidance based on content type

When to Use

Use this skill when you need to:

• Create presentation slides or Marp documents
• Improve slide design aesthetics
• Structure lecture or seminar materials
• Transform bullet-point content into professional presentations
• Generate slides with specific themes (tech, business, creative, etc.)

Trigger phrases:

• "create slides"
• "make a presentation"
• "create Marp slides"
• "make it look good"
• "良い感じにして" (make it nice - Japanese)
• "かっこよく" (make it cool - Japanese)

How It Works

1. Theme Selection

The skill intelligently selects themes based on content:

• Technical/Developer → tech theme
• Business/Corporate → business theme
• Creative/Event → colorful or gradient theme
• Academic/Simple → minimal theme
• General → default theme
• Dark preference → dark or tech theme

2. Content Structuring

Follows best practices automatically:

• Title slide with lead class styling
• Concise headings (5-7 characters for Japanese)
• 3-5 bullet points per slide
• Adequate whitespace and visual hierarchy
• Consistent formatting throughout

3. Template Application

Uses pre-built templates with embedded CSS:

• No external CSS files needed
• Ready-to-use with Marp CLI or VS Code
• Consistent styling across all slides

4. Image Integration

Supports official Marp image syntax:

• Side images: ![bg right:40%](image.png)
• Centered images: ![w:600px](image.png)
• Full backgrounds: ![bg](image.png)
• Multiple images and filters

Available Themes

1. Default Theme

Style: Clean, sophisticated with decorative lines Colors: Beige background, navy text, blue headings Best for: General seminars, lectures, presentations

2. Minimal Theme

Style: Minimal decoration, wide margins, light fonts Colors: White background, gray text, black headings Best for: Content-focused presentations, academic talks

3. Colorful & Pop Theme

Style: Vibrant gradients, bold fonts, rainbow accents Colors: Pink gradient background, multi-color accents Best for: Youth-oriented events, creative projects

4. Dark Mode Theme

Style: Dark theme with glow effects, eye-friendly Colors: Black background, cyan/purple accents Best for: Tech presentations, evening talks, modern look

5. Gradient Background Theme

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

6. Tech/Code Theme

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

7. Business Theme

Style: Corporate presentation style, top border, table support Colors: White background, navy headings, blue accents Best for: Business presentations, proposals, reports

Key Features

• 7 Pre-designed Themes: Professional themes for different contexts
• Automatic Quality Enhancement: Applies best practices when users request "make it look good"
• Theme Selection Guidance: Intelligent theme selection based on content analysis
• Image Pattern Library: Official Marp image syntax with common patterns
• Embedded CSS: Templates include all styling - no external files needed
• Best Practices Built-in: Follows visual hierarchy and presentation design principles
• Multi-language Support: Works with English, Japanese, and other languages
• Quality Checklist: Ensures consistent output quality

Usage Examples

Example 1: Basic Presentation

User: Create slides about cloud computing basics

Agent: I'll create a professional presentation using the default theme.
[Creates slides with title slide, 5-7 content slides, conclusion]
[Saves to /mnt/user-data/outputs/cloud-computing.md]

Example 2: Tech Meetup

User: Make slides for my Python tutorial - make it look cool

Agent: I'll use the tech theme for a programming tutorial.
[Selects tech theme with code-friendly styling]
[Structures content with code examples]
[Applies dark background and syntax-friendly colors]

Example 3: Business Proposal

User: Create a business presentation about Q1 results

Agent: I'll use the business theme for your corporate presentation.
[Applies professional business styling]
[Includes table support for data]
[Uses formal tone and structure]

Example 4: Vague Request (Japanese)

User: このスライドを良い感じにして

Agent: I'll enhance this presentation's visual appeal.
[Analyzes content to infer appropriate theme]
[Applies best practices: concise titles, 3-5 bullets]
[Improves whitespace and visual hierarchy]

File Structure

marp-slide/
├── SKILL.md                    # Main skill instructions
├── README.md                   # This file
├── assets/
│   ├── template-basic.md       # Default theme template
│   ├── template-minimal.md     # Minimal theme template
│   ├── template-colorful.md    # Colorful theme template
│   ├── template-dark.md        # Dark theme template
│   ├── template-gradient.md    # Gradient theme template
│   ├── template-tech.md        # Tech theme template
│   ├── template-business.md    # Business theme template
│   ├── theme-*.css             # Standalone CSS files (reference)
└── references/
    ├── marp-syntax.md          # Basic Marp/Marpit syntax
    ├── image-patterns.md       # Image syntax patterns
    ├── theme-css-guide.md      # Custom theme creation
    ├── advanced-features.md    # Math, emoji, fragmented lists
    ├── official-themes.md      # Default Marp themes docs
    ├── theme-selection.md      # Theme selection guide
    └── best-practices.md       # Quality guidelines

Output

All generated slides are saved to /mnt/user-data/outputs/ with .md extension:

• Includes embedded CSS (no external files needed)
• Ready to use with Marp CLI or VS Code Marp extension
• Can be exported to PDF, HTML, or PPTX

Quality Standards

Every presentation created follows:

• Concise titles (5-7 characters for Japanese)
• 3-5 bullet points per slide
• Proper visual hierarchy
• Adequate whitespace
• Consistent formatting
• Professional tone matching content type
• Logical flow (intro → body → conclusion)

Resources

Internal Documentation

• references/marp-syntax.md - Basic Marp syntax and directives
• references/image-patterns.md - Official image syntax guide
• references/theme-css-guide.md - Custom theme creation
• references/best-practices.md - Quality guidelines

External Links

• Marp Official Site
• Marpit Directives
• Marpit Image Syntax
• Marp CLI GitHub

License

This skill is part of the agent-skills project.