--- name: marp-slides-07cee3bb3e4b description: > Create professional, visually excellent presentation slides in Marp Markdown format. Use this skill when the user asks to: - Create a presentation, slides, deck, slideshow, or プレゼン / スライド - Write or generate slides about a specific topic - Make a Marp .md file for presenting Produces complete, ready-to-render .md files with embedded custom CSS theme, narrative structure, and polished visual design. Supports Japanese and English content. --- # Marp Slides — Excellence Workflow ## Step 1 — Gather Requirements Clarify before generating (infer from context when obvious): | Field | Default if unspecified | |---|---| | Topic / title | Ask | | Audience | General business | | Purpose | Inform / present findings | | Slide count | 12–15 | | Language | Match user's language | | Output path | `./slides.md` | Ask concisely. For simple requests ("make slides about X"), infer and proceed. ## Step 2 — Plan the Narrative Arc Before writing, sketch the arc: ``` Title → Agenda → Problem/Context → Body (3–5 slides) → Evidence → Summary → CTA → Ending ``` See `references/design-principles.md` for purpose-specific arc patterns and slide count guidelines. ## Step 3 — Generate the Marp File ### Required Frontmatter ```markdown --- marp: true theme: excel paginate: true size: 16:9 html: true style: | /* [PASTE FULL CONTENTS OF assets/excel-theme.css HERE] */ --- ``` Always embed the full CSS from `assets/excel-theme.css` in the `style:` block. This makes the file self-contained and immediately renderable without external setup. ### Slide Class Usage Apply per-slide with `` immediately before the slide separator: | Class | Use for | |---|---| | `title` | Cover slide — dark gradient, large H1 | | `section` | Chapter break — blue background | | `lead` | Key message — centered, large text | | `dark` | Code showcase, dramatic emphasis | | `ending` | Final slide — dark gradient, centered | | *(none)* | Standard content slides | ### Layout Components Use HTML `
` elements with these classes (requires `html: true`): | Component | Class | Use for | |---|---|---| | Two columns | `.columns` | Side-by-side comparison | | Three columns | `.columns.col-3` | Three options/features | | Asymmetric cols | `.columns.col-6-4` or `.col-4-6` | Text + image/stat | | Info card | `.card` `.card.accent/.warn/.success/.danger` | Categorized items | | Key message box | `.highlight` | Single most important takeaway | | Large metric | `.number` (or `.number.warm`) | KPI display | | Tag / badge | `.tag` `.tag.warm/.success/.outline` | Tech stack, labels | | Step list | `.steps` + `.step` | Numbered process | | Icon row | `.icons` + `.icon-item` | Feature overview | | Progress bar | `.progress` + `.progress-bar` | Status/roadmap | See `references/layout-patterns.md` for copy-paste code examples of each. ### Content Quality Rules - **1 idea per slide** — if a slide has two topics, split it - **Max 5–6 bullets** per slide, each ≤12 words - **`**Bold**` the key phrase** in each bullet (exactly one per bullet) - **Vary visual types** — never 3+ consecutive all-bullet slides - **Use `.highlight`** for the single most important message per section - Write **real content**, not placeholders like "ここに説明を入れる" See `references/design-principles.md` for full design guidance. ## Step 4 — Output 1. Write the complete `.md` file to the specified path (default: `./slides.md`) 2. Tell the user: - How to render: `npx @marp-team/marp-cli slides.md --html` (PDF/HTML) - VS Code: Install "Marp for VS Code", enable HTML in settings (`markdown.marp.enableHtml: true`) 3. Offer to adjust: slide count, language, style, or add specific sections ## Technical Notes - `html: true` is required for layout components (`.columns`, `.card`, etc.) - Without it, the HTML divs render as literal text — always include it - For Tailwind CSS (advanced): add CDN script after frontmatter with `preflight: false` - Mermaid diagrams: enable HTML and use `
...
` --- Source attribution: mashharuki Original project: https://github.com/mashharuki/AWS-SummitHackathon-2026/blob/5f2b67fd174e65b5eca533128877f7d97699007d/.claude/skills/marp-slides/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 SABOROU Team 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: 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: mashharuki Original project: https://github.com/mashharuki/AWS-SummitHackathon-2026/blob/5f2b67fd174e65b5eca533128877f7d97699007d/.claude/skills/marp-slides/SKILL.md Attribution basis: Source repository record Fields of work: Design, Marketing Roles: Content Marketer, UX Designer Specialties: Cross Platform, Design, Frontend Tools: Marp Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 84ef7ac3c480003249e4ece33c701be4f7092b50c8201af38a6127818be77aeb