Marp Slide

Name: Marp Slide
Author: softaworks

softaworks/agent-toolkit

Apply a polished Marp slide theme and layout CSS so agents can generate pitch decks, tutorials, and talk slides from Markdown without hand-tuning styles.

Overview

marp-slide is an agent skill most often used in Build (also Validate, Launch) that supplies Marp slide CSS and layout conventions for branded Markdown presentations.

Install

npx skills add https://github.com/softaworks/agent-toolkit --skill marp-slide

What is this skill?

Marp-compatible slide CSS with custom :root color tokens and Noto Sans JP typography
Section layout rules for title slides, h2 headers with underline accent, and paginated decks
Default Marp frontmatter pattern (theme, paginate) ready to paste into new decks
Footer and border styling for consistent solo-builder brand presentation
Agent-editable Markdown → slide workflow without a separate design tool
CSS :root token block with 5 theme variables
Section typography scales at 56px h1 and 40px h2

Compatible agents: Claude Code, Cursor, Codex, any compatible agent

Adoption & trust: 3.8k installs on skills.sh; 2k GitHub stars; 3/3 security scanners passed (skills.sh audits).

What problem does it solve?

Your agent outputs Marp Markdown but the deck looks generic or broken because theme CSS and typography were never defined.

Who is it for?

Solo builders who live in Markdown and want repeatable slide styling for pitches, docs, and talks without Figma or Keynote.

Skip if: Teams needing animated slide apps, complex chart builders, or non-Marp tools like Google Slides-native APIs.

When should I use this skill?

Creating or restyling Marp Markdown decks when default themes are too plain or off-brand.

What do I get? / Deliverables

You get a consistent, brand-ready Marp theme embedded in slide Markdown suitable for export to PDF or HTML presentation.

Marp Markdown file with embedded theme CSS
Consistent multi-slide layout rules

Recommended Skills

Web Design Guidelinesvercel-labs/agent-skills

Web Design Guidelines is a Vercel Labs agent skill that audits your UI source against the public Web Interface Guideline…374k installs·27.7k stars

Lark Whiteboardlarksuite/cli

Documents how to build Lark whiteboard v2 layouts with correct connector placement, arrow defaults, and polyline or wayp…209k installs·13.7k stars

Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill

UI/UX Pro Max is an agent skill that packages professional design intelligence for solo and indie builders who are imple…206k installs·88.7k stars

Sleek Design Mobile Appssleekdotdesign/agent-skills

Agent skill for sleek.design: bearer-authenticated API calls to create projects, describe UI, and retrieve rendered mobi…182k installs·422 stars

Impeccablepbakaus/impeccable

User-invocable frontend design skill that loads product/design context and iterates real UI with exceptional craft and a…152k installs·35.9k stars

Design Taste Frontendleonxlnx/taste-skill

Senior UI/UX frontend skill that overrides default LLM design bias with tunable visual rules, strict React/Next architec…124k installs·37.9k stars

Journey fit

Spans multiple journey phases - primary shelf plus alternate fits below.

Primary fit

Canonical shelf is Build → docs because the artifact is a reusable presentation template builders maintain alongside product documentation. Docs subphase covers Markdown-based deliverables; Marp slides are documentation-shaped content that ships as decks or exported PDFs.

Also useful

ValidatePrototype & spike

Also useful

LaunchDistribution & launch channels

Where it fits

Example use

ValidatePrototype & spike

Wrap a lean MVP demo outline in Marp styling before sharing with early users.

Example use

BuildDocs & content

Publish an internal how-it-works deck that matches your product docs typography.

Example use

LaunchDistribution & launch channels

Ship a launch-day narrative deck for Product Hunt or a newsletter embed.

Example use

GrowContent & marketing

Reuse the same theme for webinar or tutorial slide exports.

How it compares

A Marp theme template for agents—not a slide content writer or PDF export CLI by itself.

Common Questions / FAQ

Who is marp-slide for?

Indie and solo builders using AI coding agents to produce Marp-based decks for pitches, demos, and documentation.

When should I use marp-slide?

During Validate when scoping a pitch deck, Build when documenting architecture or training, and Launch when preparing distribution or webinar slides—all as Markdown Marp files.

Is marp-slide safe to install?

It is primarily CSS and Marp markup; review the Security Audits panel on this Prism page and inspect any @import URLs before use in sensitive environments.

SKILL.md

READMESKILL.md - Marp Slide

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --color-background: #f8f8f4;
  --color-foreground: #3a3b5a;
  --color-heading: #4f86c6;
  --color-hr: #000000;
  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

section {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-default);
  font-weight: 400;
  box-sizing: border-box;
  border-bottom: 8px solid var(--color-hr);
  position: relative;
  line-height: 1.7;
  font-size: 22px;
  padding: 56px;
}

section:last-of-type {
  border-bottom: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 56px;
  line-height: 1.4;
  text-align: left;
}

h2 {
  position: absolute;
  top: 40px;
  left: 56px;
  right: 56px;
  font-size: 40px;
  padding-top: 0;
  padding-bottom: 16px;
}

h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 60px;
  height: 2px;
  background-color: var(--color-hr);
}

h2 + * {
  margin-top: 112px;
}

h3 {
  color: var(--color-foreground);
  font-size: 28px;
  margin-top: 32px;
  margin-bottom: 12px;
}

ul, ol {
  padding-left: 32px;
}

li {
  margin-bottom: 10px;
}

footer {
  font-size: 0;
  color: transparent;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 40px;
  height: 8px;
  background-color: var(--color-heading);
}

section.lead {
  border-bottom: 8px solid var(--color-hr);
}

section.lead footer {
  display: none;
}

section.lead h1 {
  margin-bottom: 24px;
}

section.lead p {
  font-size: 24px;
  color: var(--color-foreground);
}
</style>

<!-- _class: lead -->

# プレゼンテーションタイトル

あなたの名前
2024年XX月XX日

---

## アジェンダ

- トピック1
- トピック2
- トピック3
- トピック4

---

## スライドタイトル

- ポイント1
- ポイント2
- ポイント3

---

## まとめ

- 要点1
- 要点2
- ご清聴ありがとうございました


---
marp: true
theme: default
paginate: true
---

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --color-background: #ffffff;
  --color-foreground: #1f2937;
  --color-heading: #1e40af;
  --color-accent: #3b82f6;
  --color-border: #d1d5db;
  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

section {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-default);
  font-weight: 400;
  box-sizing: border-box;
  border-top: 8px solid var(--color-heading);
  position: relative;
  line-height: 1.7;
  font-size: 22px;
  padding: 56px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 54px;
  line-height: 1.3;
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  position: absolute;
  top: 40px;
  left: 56px;
  right: 56px;
  font-size: 38px;
  padding-top: 0;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--color-accent);
}

h2 + * {
  margin-top: 112px;
}

h3 {
  color: var(--color-accent);
  font-size: 26px;
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 600;
}

ul, ol {
  padding-left: 32px;
}

li {
  margin-bottom: 10px;
  line-height: 1.7;
}

footer {
  font-size: 16px;
  color: #6b7280;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer::before {
  content: '';
  flex: 1;
  height: 2px;
  background-color: var(--color-border);
  margin-right: 20px;
}

section.lead {
  border-top: 8px solid var(--color-heading);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
}

section.lead footer {
  display: none;
}

section.lead h1 {
  margin-bottom: 32px;
  color: var(--color-heading);
}

section.lead p {
  font-size: 24px;
  color: var(--color-foreground);
  f

What is this skill?

Marp-compatible slide CSS with custom :root color tokens and Noto Sans JP typography

Section layout rules for title slides, h2 headers with underline accent, and paginated decks

Default Marp frontmatter pattern (theme, paginate) ready to paste into new decks

Footer and border styling for consistent solo-builder brand presentation

Agent-editable Markdown → slide workflow without a separate design tool

CSS :root token block with 5 theme variables

Section typography scales at 56px h1 and 40px h2

Compatible agents: Claude Code, Cursor, Codex, any compatible agent

Adoption & trust: 3.8k installs on skills.sh; 2k GitHub stars; 3/3 security scanners passed (skills.sh audits).

Journey fit

Spans multiple journey phases - primary shelf plus alternate fits below.

Primary fit

Also useful

ValidatePrototype & spike

Also useful

LaunchDistribution & launch channels

Where it fits

Example use

ValidatePrototype & spike

Wrap a lean MVP demo outline in Marp styling before sharing with early users.

Example use

BuildDocs & content

Publish an internal how-it-works deck that matches your product docs typography.

Example use

LaunchDistribution & launch channels

Ship a launch-day narrative deck for Product Hunt or a newsletter embed.

Example use

GrowContent & marketing

Reuse the same theme for webinar or tutorial slide exports.

SKILL.md

READMESKILL.md - Marp Slide

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --color-background: #f8f8f4;
  --color-foreground: #3a3b5a;
  --color-heading: #4f86c6;
  --color-hr: #000000;
  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

section {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-default);
  font-weight: 400;
  box-sizing: border-box;
  border-bottom: 8px solid var(--color-hr);
  position: relative;
  line-height: 1.7;
  font-size: 22px;
  padding: 56px;
}

section:last-of-type {
  border-bottom: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 56px;
  line-height: 1.4;
  text-align: left;
}

h2 {
  position: absolute;
  top: 40px;
  left: 56px;
  right: 56px;
  font-size: 40px;
  padding-top: 0;
  padding-bottom: 16px;
}

h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 60px;
  height: 2px;
  background-color: var(--color-hr);
}

h2 + * {
  margin-top: 112px;
}

h3 {
  color: var(--color-foreground);
  font-size: 28px;
  margin-top: 32px;
  margin-bottom: 12px;
}

ul, ol {
  padding-left: 32px;
}

li {
  margin-bottom: 10px;
}

footer {
  font-size: 0;
  color: transparent;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 40px;
  height: 8px;
  background-color: var(--color-heading);
}

section.lead {
  border-bottom: 8px solid var(--color-hr);
}

section.lead footer {
  display: none;
}

section.lead h1 {
  margin-bottom: 24px;
}

section.lead p {
  font-size: 24px;
  color: var(--color-foreground);
}
</style>

<!-- _class: lead -->

# プレゼンテーションタイトル

あなたの名前
2024年XX月XX日

---

## アジェンダ

- トピック1
- トピック2
- トピック3
- トピック4

---

## スライドタイトル

- ポイント1
- ポイント2
- ポイント3

---

## まとめ

- 要点1
- 要点2
- ご清聴ありがとうございました


---
marp: true
theme: default
paginate: true
---

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --color-background: #ffffff;
  --color-foreground: #1f2937;
  --color-heading: #1e40af;
  --color-accent: #3b82f6;
  --color-border: #d1d5db;
  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

section {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-default);
  font-weight: 400;
  box-sizing: border-box;
  border-top: 8px solid var(--color-heading);
  position: relative;
  line-height: 1.7;
  font-size: 22px;
  padding: 56px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 54px;
  line-height: 1.3;
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  position: absolute;
  top: 40px;
  left: 56px;
  right: 56px;
  font-size: 38px;
  padding-top: 0;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--color-accent);
}

h2 + * {
  margin-top: 112px;
}

h3 {
  color: var(--color-accent);
  font-size: 26px;
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 600;
}

ul, ol {
  padding-left: 32px;
}

li {
  margin-bottom: 10px;
  line-height: 1.7;
}

footer {
  font-size: 16px;
  color: #6b7280;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer::before {
  content: '';
  flex: 1;
  height: 2px;
  background-color: var(--color-border);
  margin-right: 20px;
}

section.lead {
  border-top: 8px solid var(--color-heading);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
}

section.lead footer {
  display: none;
}

section.lead h1 {
  margin-bottom: 32px;
  color: var(--color-heading);
}

section.lead p {
  font-size: 24px;
  color: var(--color-foreground);
  f

Overview

Install

What is this skill?

What problem does it solve?

Who is it for?

When should I use this skill?

What do I get? / Deliverables

Recommended Skills

Journey fit

Where it fits

Who is marp-slide for?

When should I use marp-slide?

Is marp-slide safe to install?

SKILL.md

This week for builders

Overview

Install

What is this skill?

What problem does it solve?

Who is it for?

When should I use this skill?

What do I get? / Deliverables

Recommended Skills

Journey fit

Where it fits

Who is marp-slide for?

When should I use marp-slide?

Is marp-slide safe to install?

SKILL.md