--- name: marp-slide description: Create professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business). Use when users request slide creation, presentations, or Marp documents. Supports custom themes, image layouts, and "make it look good" requests with automatic quality improvements. --- # 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 1. **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` 2. 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 3. Read `references/best-practices.md` for quality guidelines 4. Structure content following best practices: - Title slide with `` - Concise h2 titles (5-7 characters in Japanese) - 3-5 bullet points per slide - Adequate whitespace 5. Add images if needed using patterns from `references/image-patterns.md` 6. 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 1. **Understand requirements** - Identify content: title, topics, key points - Determine target audience - Assess formality level 2. **Select theme** - Use quick selection rules above - If uncertain, consult `references/theme-selection.md` - Default to default theme if still unsure 3. **Apply template** - Load appropriate template from `assets/` - CSS is already embedded - no external files needed - Maintain template structure 4. **Structure content** - Title slide: `` + h1 - Content slides: h2 title + bullet points - Keep titles to 5-7 characters (Japanese) - Use 3-5 bullet points per slide 5. **Refine quality** - Read `references/best-practices.md` - Ensure adequate whitespace - Maintain consistency - Keep text concise (15-25 chars per line) 6. **Add images** - If needed, consult `references/image-patterns.md` - Common: `![bg right:40%](image.png)` for side images - Use proper Marp image syntax 7. **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": 1. **Infer theme from content**: - Business content → business theme - Technical content → tech or dark theme - Creative content → gradient or colorful theme - General → default theme 2. **Apply best practices automatically**: - Shorten titles to 5-7 characters - Limit bullet points to 3-5 items - Add adequate whitespace - Use consistent structure 3. **Enhance visual hierarchy**: - Use h3 for sub-sections when appropriate - Break up dense text into multiple slides - Ensure logical flow (intro → body → conclusion) 4. **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: ```markdown ## 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 `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 `` - [ ] 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 --- Source attribution: Dicklesworthstone Original project: https://github.com/Dicklesworthstone/pi_agent_rust/blob/f28fc46ee0db8e710d95b8b55592cd38d60f2b26/tests/ext_conformance/artifacts/templates-davila7/cli-tool/components/skills/creative-design/marp-slide/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License (with OpenAI/Anthropic Rider) Copyright (c) 2026 Jeffrey Emanuel Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: ADDITIONAL RIDER / RESTRICTION (OpenAI / Anthropic): This rider is part of the "conditions" of this License. In the event of any conflict between this rider and any other portion of this License, this rider controls. "Restricted Parties" means OpenAI, L.L.C.; Anthropic, PBC; any of their respective Affiliates; and any person or entity acting directly or indirectly on behalf of, for the benefit of, or under the direction of any of the foregoing (including any officer, director, employee, contractor, agent, consultant, service provider, or representative). Notwithstanding any other provision of this License, no rights are granted to any Restricted Party. Any purported license, sublicense, assignment, transfer, or other permission to any Restricted Party is null and void absent the express prior written permission of Jeffrey Emanuel. You may not provide, disclose, distribute, sublicense, sell, lease, lend, host, make available, or otherwise permit access to the Software or any derivative work of the Software (as defined in applicable copyright law) (collectively, "Derivative Works") to or for any Restricted Party. For purposes of this rider, "use" includes, without limitation: copying, modifying, merging, publishing, distributing, sublicensing, selling, transferring, making available, hosting, deploying, executing, benchmarking, testing, analyzing, indexing, or incorporating the Software or any Derivative Works into any dataset, training corpus, evaluation harness, or pipeline for machine learning or other automated systems. This rider applies to the Software and all Derivative Works. As a condition of use, you agree that this rider is a precondition to exercising any rights under this License, and you agree that any distribution of the Software or any Derivative Works must include this rider provision unmodified. Any breach of this rider automatically and immediately terminates the permissions granted by this License. Upon termination, you must immediately cease all use and distribution of the Software and any Derivative Works and destroy all copies under your control. You agree that a breach of this rider would cause irreparable harm and that Jeffrey Emanuel may seek injunctive or other equitable relief to enforce this rider, in addition to any other remedies available at law. To the maximum extent permitted by applicable law, the prevailing party in any action to enforce this rider shall be entitled to recover reasonable attorneys' fees and costs. For purposes of this rider, "Affiliate" means any entity that directly or indirectly controls, is controlled by, or is under common control with the specified party. "Control" means ownership of more than 50% of the voting securities or other ownership interest, or the power to direct management or policies by contract or otherwise. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: Dicklesworthstone Original project: https://github.com/Dicklesworthstone/pi_agent_rust/blob/f28fc46ee0db8e710d95b8b55592cd38d60f2b26/tests/ext_conformance/artifacts/templates-davila7/cli-tool/components/skills/creative-design/marp-slide/SKILL.md Attribution basis: Source repository record Fields of work: Content & Media, Design, Marketing, Project & Program Management Roles: Content Marketer, Copywriter, Project Manager, UX Designer Specialties: Design, Frontend Tools: Marp Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 8db340c8b1e6f97196056af07990993d30a947b19e67c20f7429074a0e365d89