zhukang
1c7abd81d1
- 310 registry:skill items, 1528 files, 7 categories (hub tags) - registry.json generated by @kortix/registry buildRegistry - nested SKILL.md in sn-da-* renamed SUBSKILL.md (no phantom skills) - provenance + licenses: SOURCES.md
212 lines
7.5 KiB
Markdown
212 lines
7.5 KiB
Markdown
# 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: ``
|
|
- Centered images: ``
|
|
- Full backgrounds: ``
|
|
- 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](https://marp.app/)
|
|
- [Marpit Directives](https://marpit.marp.app/directives)
|
|
- [Marpit Image Syntax](https://marpit.marp.app/image-syntax)
|
|
- [Marp CLI GitHub](https://github.com/marp-team/marp-cli)
|
|
|
|
## License
|
|
|
|
This skill is part of the agent-skills project.
|