// Create premium MARP presentation decks with SVG charts, dashboard components, animations, dark/light themes, and optional AI-generated hero images via Marcus (KIE API). Triggers on "marp", "slides", "presentation", "deck", "slide deck", "create slides", "pitch deck", "make a presentation".
| name | marp-slides |
| description | Create premium MARP presentation decks with SVG charts, dashboard components, animations, dark/light themes, and optional AI-generated hero images via Marcus (KIE API). Triggers on "marp", "slides", "presentation", "deck", "slide deck", "create slides", "pitch deck", "make a presentation". |
| version | 1 |
Build production-quality MARP presentation decks. Uses the full HTML/SVG feature set for charts, dashboards, and animations. Optionally generates hero images and backgrounds via Marcus when the deck needs cinematic visuals.
# VS Code extension: "Marp for VS Code"
# settings.json:
"markdown.marp.enableHtml": true
"markdown.marp.allowLocalFiles": true
# Export:
npx @marp-team/marp-cli slides.md --pdf --allow-local-files
npx @marp-team/marp-cli slides.md --html --allow-local-files
npx @marp-team/marp-cli slides.md --pptx --allow-local-files
Before writing a single slide:
| Content type | Theme | Vibe |
|---|---|---|
| Data / dashboard / KPIs | Dark (default) | Dense, analytical |
| SaaS pitch / product showcase | Dark + Marcus hero | Cinematic, premium |
| Executive / strategy | Light business | Clean, corporate |
| Tutorial / how-to | Dark tech | Code-forward |
| Lifestyle / editorial | Light editorial | Airy, typographic |
| Creative / brand | Dark gradient | Expressive |
Use Marcus (KIE API) for AI-generated images only when:
Do NOT use Marcus for:
See the Marcus Image Generation section below.
Follow the structure and component rules below. Save the file as ./slides.md or ./slides/deck-name.md in the project directory.
The dark theme uses Outfit 800 for headings and Raleway 100–200 for body text.
---
marp: true
theme: default
paginate: true
header: ''
style: |
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');
:root {
--accent: #ff6b1a; --accent-hover: #ff8c4a;
--dark: #000; --card: #080808; --border: #111;
--body: #999; --label: #666; --muted: #555; --light: #fff;
--green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); margin: 0; }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.row { transition: background 0.2s; border-radius: 6px; }
.row:hover { background: #0c0c0c; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }
---
Swap these variables. Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.
:root {
--accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee;
--body: #666; --label: #bbb; --light: #1a1a1a;
}
h1 — Title slides only (white, extra large)h2 — Section title (grey, thin) — max 6–8 wordsh3 — Section label (muted, uppercase, small caps)| Heading | Body | Use |
|---|---|---|
| Outfit 800 | Raleway 100 | Dashboard, data (default) |
| DM Serif Display | DM Sans 300 | Recipes, editorial, lifestyle |
| Space Grotesk 700 | IBM Plex Mono 300 | Travel, light themes |
| Sora 700 | Sora 200 | Product comparisons |
| Urbanist 800 | Urbanist 100 | Music, consumer brand |
| Plus Jakarta Sans 800 | Plus Jakarta Sans 200 | Retros, team decks |
Banned fonts: Inter, Roboto, Arial, Open Sans, Helvetica — these look generic and break the premium feel.
<!-- _class: lead -->
<!-- _header: '' -->
# Product Name
## The one-line pitch that makes them lean in
---
## Section Title
- Key point one — keep it to one line
- Key point two — no sub-bullets
- Key point three — max 5 items
- Key point four
- Key point five
<!-- _header: '' -->
<!-- _paginate: false -->
# **Product Launch**
## Q2 2026 — Confidential
---
See Dashboard Components below.
# Logo header (hide per slide)
header: ''
<!-- _header: '' --> ← hides on specific slide
# Photo backgrounds
# Inline centered image
<div style="display:flex; justify-content:center;">
<img src="./diagram.png" style="width:600px; border-radius:12px;" />
</div>
# CDN logos (no relative path issues)
<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/vercel.png" style="width:120px;" />
CRITICAL: Always use relative paths (./image.png). Absolute paths break in preview.
When the deck needs AI-generated visuals, use Marcus (KIE API).
/Users/elihuvillaraus/Docs/SaaS/ai-content-machine/marcus/frontend/.env.local
Variables: KIE_API_KEY, KIE_API_BASE_URL (https://api.kie.ai)
Always use nano-banana-2. It is faster, cheaper, and produces the same quality as nano-banana-pro for backgrounds and editorial images.
const response = await fetch(`${process.env.KIE_API_BASE_URL}/api/generate/image`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.KIE_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'nano-banana-2',
prompt: prompt,
aspect_ratio: '16:9', // for slide backgrounds
num_images: 1
})
});
const { images } = await response.json();
// Download and save as ./marcus-hero.jpg
[Subject/scene], cinematic, shallow depth of field, soft bokeh,
moody [warm/cool] lighting, editorial photography style,
high-end commercial look, [dominant color palette],
16:9 composition, no text, no UI elements
"Abstract digital infrastructure, fiber optic cables, deep navy and cyan, cinematic DOF, editorial, no text""Morning light pouring through floor-to-ceiling windows, warm amber tones, editorial lifestyle photography, no people, no text""Aerial view of a city at dusk, warm streetlights, mist, deep tones, luxury travel editorial, no text""Minimalist clean space, natural textures, morning light, soft shadows, lifestyle editorial, neutral palette, no text"# Save the generated image
curl -o ./marcus-hero.jpg "<image_url_from_api>"
# Then use in Marp:
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; position:relative; overflow:hidden; flex:1;">
<div style="position:absolute; top:0; left:0; right:0; background:linear-gradient(90deg, var(--accent), transparent); height:2px;"></div>
<div style="font-family:'Outfit'; font-weight:600; font-size:0.55em; color:var(--muted); text-transform:uppercase; letter-spacing:0.15em;">Revenue</div>
<div style="font-family:'Outfit'; font-weight:800; font-size:2.2em; color:var(--light); margin:8px 0;">$48.2K</div>
<div style="font-size:0.7em; color:var(--green);">↑ 12.4% vs last month</div>
</div>
<div style="display:flex; gap:14px; margin-top:20px;">
<!-- paste 3 metric cards here -->
</div>
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg> Active
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#f5a623"/></svg> Paused
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#ef4444"/></svg> Inactive
<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span>
<span class="tag" style="background:#ef444412; color:var(--red); border:1px solid #ef444422;">Kill</span>
<span class="tag" style="background:#f5a62312; color:var(--yellow); border:1px solid #f5a62322;">Review</span>
<div class="row" style="display:flex; justify-content:space-between; padding:10px 12px; font-size:0.8em;">
<span style="color:var(--body);">Item name</span>
<span style="color:var(--accent); font-family:'Outfit'; font-weight:600;">$1,200</span>
</div>
<!-- r=74, circ=465, 89% → offset=51 -->
<svg width="160" height="160" viewBox="0 0 160 160">
<circle cx="80" cy="80" r="74" fill="none" stroke="#111" stroke-width="16"/>
<circle cx="80" cy="80" r="74" fill="none" stroke="var(--accent)" stroke-width="16"
stroke-dasharray="465" stroke-dashoffset="51" stroke-linecap="round"
transform="rotate(-90 80 80)"/>
<text x="80" y="86" text-anchor="middle" font-family="Outfit" font-weight="800" font-size="28" fill="white">89%</text>
</svg>
<svg width="50" height="16"><polyline points="0,14 8,12 16,10 24,8 50,2" fill="none" stroke="#22c55e" stroke-width="1.2"/></svg>
<div style="display:flex; height:14px; border-radius:7px; overflow:hidden; width:200px;">
<div style="width:45%; background:var(--accent);"></div>
<div style="width:30%; background:#444;"></div>
<div style="width:25%; background:#222;"></div>
</div>
<div style="display:flex; align-items:flex-end; gap:8px; height:120px;">
<div style="width:32px; height:40%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
<div style="width:32px; height:65%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
<div style="width:32px; height:90%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
</div>
<!-- Collapsible -->
<details><summary>See details</summary><p>Hidden content here</p></details>
<!-- Tooltip -->
<abbr title="Return on Ad Spend">ROAS</abbr>
<!-- Progress bar -->
<progress value="76" max="100" style="accent-color:var(--accent); width:100%;"></progress>
<!-- Checkbox -->
<input type="checkbox" checked style="accent-color:var(--accent);" /> Completed
<div style="background:#0d0d0d; border-radius:10px; border:1px solid #222; padding:16px;">
<div style="display:flex; gap:6px; margin-bottom:12px;">
<div style="width:12px;height:12px;border-radius:50%;background:#ef4444;"></div>
<div style="width:12px;height:12px;border-radius:50%;background:#f5a623;"></div>
<div style="width:12px;height:12px;border-radius:50%;background:#22c55e;"></div>
</div>
<pre style="font-family:'JetBrains Mono',monospace; font-size:0.7em; color:#22c55e; margin:0;">$ npm run deploy</pre>
</div>
<div style="border-left:2px solid var(--border); padding-left:20px; margin-top:16px;">
<div style="position:relative; margin-bottom:16px;">
<div style="width:10px;height:10px;border-radius:50%;background:var(--accent);position:absolute;left:-25px;top:3px;"></div>
<div style="font-family:'Outfit';font-weight:600;font-size:0.75em;color:var(--light);">Q1 2026</div>
<div style="font-size:0.7em;color:var(--body);">Launch description</div>
</div>
</div>
<div style="display:flex; gap:16px; margin-top:16px;">
<div style="flex:1; background:var(--card); border-top:3px solid var(--red); border-radius:8px; padding:14px;">
<div style="font-family:'Outfit';font-weight:700;font-size:0.65em;color:var(--red);margin-bottom:8px;">BEFORE</div>
<!-- content -->
</div>
<div style="flex:1; background:var(--card); border-top:3px solid var(--green); border-radius:8px; padding:14px;">
<div style="font-family:'Outfit';font-weight:700;font-size:0.65em;color:var(--green);margin-bottom:8px;">AFTER</div>
<!-- content -->
</div>
</div>
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glow { 0%,100%{box-shadow:0 0 12px var(--accent)66} 50%{box-shadow:0 0 24px var(--accent)} }
.float { animation: float 4s ease-in-out infinite; }
.glow { animation: glow 2s ease-in-out infinite; }
/* Stagger: animation-delay: 0.3s, 0.6s, 0.9s */
When autoresearch produces a report, this skill can convert it to a MARP deck:
The AutoResearch report is at /tmp/autoresearch-<skill>-report.md.
Create a MARP deck summarizing: hypothesis, methodology, results, and next experiments.
Use the dark dashboard theme with SVG charts showing before/after metrics.
PRDs and sprint plans can be converted to MARP decks for stakeholder reviews:
Convert this PRD to a MARP pitch deck. Hero slide + 1 slide per Priority Group.
Show user stories as timeline, acceptance criteria as checklist cards.
Executive summaries naturally map to slide decks:
Take this exec summary and produce a MARP deck following McKinsey SCQ structure:
Situation → Complication → Question → Answer → Recommendation → Next Steps.
One slide per section. Use business light theme.
--accent) for data highlights only.#999, labels #666. Never darker than #555 on dark backgrounds../image.png works. Absolute paths break in preview.All icons: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5">
| Icon | SVG path |
|---|---|
| Dollar | <path d="M12 2v20M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6"/> |
| Heartbeat | <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
| Check (green) | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/> |
| Arrow up | <polyline points="18 15 12 9 6 15"/> |
| Arrow down | <polyline points="18 9 12 15 6 9"/> |
| Lightning | <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> |
| Users | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/> |
| Globe | <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/> |
| Lock | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
Before delivering any deck:
<!-- _class: lead -->./image.png)MARP_DONE: [filename] — [slide count] slidesMARP_BLOCKED: [reason]/marp-slides Create a 10-slide pitch deck for [product]. Dark theme. No images needed.
/marp-slides Make an autoresearch report deck for the orchestrator skill. Include before/after metrics.
/marp-slides Build an executive Q1 review deck. Business light theme. Generate a hero with Marcus.
System Architect that creates parallelizable PRDs with junior-proof technical specs. Use when planning features, designing implementations, or when the user says 'plan', 'architect', 'design', or 'PRD'. Outputs PRDs organized in Priority groups where tasks within each group can be executed in parallel by independent dev subagents (ralph). Each user story includes file ownership, technical specs, and acceptance criteria detailed enough for a Sonnet-class model to implement without clarification.
Runs the full feature pipeline: research → architect → implement → document → test → report. Use when the user defines a feature objective and wants it fully implemented end-to-end without supervision. Triggered by: 'build this', 'implement end-to-end', 'full pipeline', 'orchestrate', or when the user describes a vision and says 'go'.
Autonomous dev subagent that implements a single user story from a PRD. Use when you need parallel, independent implementation of tasks. Designed to run as a subagent alongside other ralph instances. Receives a specific task ID and PRD path (e.g., 'Implement US003 from docs/tasks/PRD-feature.md'). Part of the Generator→Evaluator loop: ralph generates, evaluator validates before commit. Does NOT commit or modify the PRD — those are handled by the documenter. Includes: Sprint Contract before coding, AGENTS.md context loading, Engram context search + save, pre-coding baseline test run, TDD (Red-Green-Triangulate), tsc --noEmit TypeScript check, lint step (eslint/biome), no-any/no-@ts-ignore/no-magic-string rules, security constraints (no secrets/env files, parameterized SQL, XSS protection), no-regression guard (fix tests broken by your changes, never fix pre-existing failures), a11y check for UI stories, transaction safety for multi-step DB mutations, test isolation with mocked externals, git diff ownership ver
QA specialist that PROVES the app works by actually running it. Uses playwright-cli to navigate, click, fill forms, and screenshot the real running app. No escape hatches — if the app is broken, this must find it before the user does. Use after ralph implements a feature. Triggered by: 'run tests', 'write tests', 'validate', 'E2E', 'tester', 'QA'.
Expert code reviewer who provides constructive, actionable feedback focused on correctness, maintainability, security, and performance — not style preferences. Reviews code like a mentor, not a gatekeeper. Every comment teaches something. Activar cuando se necesite un Code Reviewer en el equipo o pipeline.
Pre-commit code validator (GGA — Guardian Angel). Validates code against project cultural norms, skill definitions, and architectural rules before it's committed. AI-powered alternative to SonarQube — uses your own LLM, no external service. Works locally and in GitHub Actions CI/CD. Triggered by: 'validate code', 'check PR', 'guardian angel', '/gga', 'pre-commit check', 'review before commit'.