MARP - SVG 차트, 대쉬보드 구성 요소, 다크 / 라이트 테마 및 22 curated 예제 데크를 사용하여 아름다운 프리젠 테이션을 만드는 클레드 코드 기술.

무엇 그것

Claude Code 주제를 부여하고 광택있는 MARP 갑판을 구축합니다. 기술은 SVG 차트, 미터 카드, 게이지, 스파클레이션, 진행 막대, 확장 가능한 섹션을 사용하여 슬라이드를 구성하는 방법을 가르칩니다. 그리고 Markdown 내부의 모든 HTML.

22 예 데크는 비밀 소스입니다. 건물 블록을 아는 대신 Claude는 품질 막대가 좋고 일치시키는 실제 데 도움이됩니다.

빠른 시작

##1. 기술 설치

##2. Claude 코드에 추가

기술 폴더의 Point Claude Code:

또는 프로젝트의 .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