MARP — SVG チャート、ダッシュボードコンポーネント、ダーク/ライト テーマ、22 個のキュレーションされた例のデッキを使用して美しいプレゼンテーションを作成する Claude コードのスキル。

それが何をするか

Claudeコードをトピックにし、洗練されたMARPデッキを構築します。 スキルは、SVGチャート、メトリックカード、ゲージ、スパークライン、進捗バー、拡張可能なセクションなどを使用してスライドを構成する方法を教えます。

22例のデッキは秘密のソースです。 建物のブロックを知っているのではなく、Claude は、その品質バーをよく見てマッチする実際のデッキを読みます。

クイックスタート

##1. スキルのインストール

##2. Claudeコードに追加する

スキルフォルダのポイントクロードコード:

またはプロジェクト[.claude/skills/]ディレクトリに手動で追加します。

##3. VSコード拡張子をインストール

VS Code** の Marp をインストールし、これらの設定を有効にします。

##4. 発表依頼

含まれているもの

サンプルカテゴリ

|カテゴリ | 事例 | スタイル | お問い合わせ | データ・ダッシュボード | フェイスブック広告・フィットネス・比較 | SVGチャート・統計カード・ゲージ | | ライフスタイル・編集 | コーヒー・ワイン・テイスティング・カクテル | 温音・写真・格付け |

MARP Slides

A Claude Code skill for creating beautiful presentations using MARP — SVG charts, dashboard components, dark/light themes, and 22 curated example decks to learn from.

What it does

Give Claude Code a topic and it builds a polished MARP deck. The skill teaches it how to compose slides using SVG charts, metric cards, gauges, sparklines, progress bars, expandable sections, and more — all in raw HTML inside Markdown.

The 22 example decks are the secret sauce. Instead of just knowing the building blocks, Claude reads real decks that look good and matches that quality bar.

Quick start

1. Install the skill

git clone https://github.com/robonuggets/marp-slides

2. Add it to Claude Code

Point Claude Code at the skill folder:

claude --add-dir ./marp-slides

Or add it manually to your project’s .claude/skills/ directory.

3. Install the VS Code extension

Install Marp for VS Code and enable these settings:

{
  "markdown.marp.enableHtml": true,
  "markdown.marp.allowLocalFiles": true
}

4. Ask for a presentation

Create a MARP presentation reviewing my Q1 sales data. Dark theme, include stat cards and a bar chart.

Make me a deck about my favorite coffee brewing methods. Editorial style, warm tones.

Build a fitness dashboard presentation from this CSV data.

What’s included

marp-slides/
├── SKILL.md              # The skill — rules, components, design system
└── examples/             # 22 curated reference decks
    ├── marp_facebook-ads.md    # Data dashboard with SVG charts
    ├── marp_coffee.md          # Editorial lifestyle deck
    ├── marp_fitness.md         # Health tracking dashboard
    ├── marp_wine-tasting.md    # Tasting notes with ratings
    ├── marp_travel.md          # Travel guide with maps
    ├── marp_kids-party.md      # Fun creative deck
    └── ... 16 more examples

Example categories

Features

• Dark and light themes with tested font pairings (Outfit + Raleway, DM Serif + DM Sans, Space Grotesk + IBM Plex Mono, and more)
• SVG charts — line/area, donut/pie, gauges, sparklines, bar charts, radar
• Dashboard components — metric cards with gradient borders, status dots, verdict tags, hover rows
• Interactive elements — collapsible `` sections, tooltips, progress bars