القائمة
Create beautiful MARP presentation decks with SVG charts, interactive elements, dashboard components, animations, dark/light themes. Triggers on 'marp', 'slides', 'presentation', 'deck'.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | marp-slides |
| description | Create beautiful MARP presentation decks with SVG charts, interactive elements, dashboard components, animations, dark/light themes. Triggers on 'marp', 'slides', 'presentation', 'deck'. |
| version | 2 |
| updated | "2026-04-08T00:00:00.000Z" |
markdown.marp.enableHtml: true + markdown.marp.allowLocalFiles: truenpx @marp-team/marp-cli slides.md --pdf --allow-local-filesThe examples/ folder contains 22 curated reference decks. Before generating any deck, read 2-3 examples that match the requested style. These are the quality bar — match their composition, spacing, and visual density. Key examples by category:
| Category | Examples to read |
|---|---|
| Data / dashboard | marp_facebook-ads.md, marp_fitness.md, marp_comparison.md |
| Lifestyle / editorial | marp_coffee.md, marp_wine-tasting.md, marp_cocktail.md |
| Guide / how-to | marp_garden.md, marp_houseplant.md, marp_home-gym.md |
| Fun / creative | marp_kids-party.md, marp_board-game.md, marp_film-director.md |
| Travel / location | marp_travel.md, marp_walking-tour.md, marp_road-trip.md |
| Showcase / hero | marp_hero.md, marp_apartment.md, marp_wardrobe.md |
| Reference / sampler | marp_sample.md (component showcase) |
---enableHtml unlocks SVG, cards, charts, animations, interactive elementsThe dark template uses Outfit 800 for headings and Raleway 100-200 for body text. CSS variables:
@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); }
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; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
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; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }
Frontmatter includes: header: ''
Swap vars: --accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a;
Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.
| Heading | Body | Use |
|---|---|---|
| Outfit 800 | Raleway 100 | Dashboard, data (default) |
| DM Serif Display | DM Sans 300 | Recipes, editorial |
| Space Grotesk 700 | IBM Plex Mono 300 | Travel, light themes |
| Sora 700 | Sora 200 | Product comparisons |
| Urbanist 800 | Urbanist 100 | Music, Spotify-style |
| Plus Jakarta Sans 800 | Plus Jakarta Sans 200 | Retros, team decks |
CRITICAL: Relative paths only. ./image.png works. Absolute paths break in preview.
header: '' — hide per slide: <!-- _header: '' --> or <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/name.png" style="width:200px;" /><div style="display:flex; justify-content:center;"> with border-radius and borderCard with position:relative; overflow:hidden; and absolute div at top with background:linear-gradient(90deg, var(--accent), transparent); height:2px;. Icon + label + big number + trend arrow.
Inline SVG circles: green (#22c55e) = active, yellow (#f5a623) = learning, red (#ef4444) = paused.
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>
<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span>
Swap colors for red (kill) and yellow (review).
Wrap content in <div class="row"> for hover highlight effect.
SVG polyline for the line + polygon with linearGradient fill for area under the line. Add grid lines, dashed target line, circle data points. Use viewBox="0 0 900 240" with preserveAspectRatio="none".
Each segment = separate circle with stroke-dasharray and stroke-dashoffset. Math: circumference = 2pir. For r=110: ~691. Segment = (pct/100)*691. Offsets accumulate negatively. stroke-width controls ring thickness. Always transform="rotate(-90 cx cy)".
SVG path arc for background + colored value arc. Needle line from center + circle pivot. For scores 0-100. stroke-linecap="round".
Single circle stroke-dasharray. circ = 2pir. Offset = circ - (circ * pct/100). For r=74: circ=465. 89%: offset=51.
<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>
Flex div with colored width-percent segments, border-radius, overflow:hidden.
Flex container align-items:flex-end. Gradient bars: background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;
SVG polygon for hexagonal grid + data shape with fill-opacity:0.1 and stroke outline.
<details><summary>Title</summary><p>Content</p></details><abbr title="Full text">TERM</abbr><input type="range" style="accent-color:var(--accent);" /><input type="checkbox" checked style="accent-color:var(--accent);" /><progress value="76" max="100" style="accent-color:var(--accent);"></progress>All wrapped in <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5">. Sizes: inline=16, cards=44, features=32.
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 (#22c55e): 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 (#22c55e): polyline points="18 15 12 9 6 15" Arrow down (#ef4444): polyline points="18 9 12 15 6 9" X circle (#ef4444): circle cx=12 cy=12 r=10 + two crossing lines Clock: circle cx=12 cy=12 r=10 + polyline points="12 6 12 12 16 14" Eye: path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" + circle cx=12 cy=12 r=3 Lightning: path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" Warning (#f5a623): triangle path Search: circle cx=11 cy=11 r=8 + line to corner Bars: three vertical paths Users: user silhouette path + circle Globe: circle + horizontal line + vertical ellipse path Lock: rect + arch path Book: two paths for book shape
float: translateY(0) to -8px and back glow: box-shadow pulse with accent color blink: border-color toggle for cursors
Stagger with delay: animation: float 4s ease-in-out 0.5s infinite;
npx @marp-team/marp-cli slides.md --pdf --allow-local-files npx @marp-team/marp-cli slides.md --pptx --allow-local-files npx @marp-team/marp-cli slides.md --html --allow-local-files --pptx-editable needs LibreOffice. Animations + details only in HTML.
Custom dimensions: section { width: 540px; height: 720px; } (CSS not size: frontmatter). Portrait: stack vertically, scale down 15-20%.