RM

robonuggets/marp-slides

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

329 stars 质量 54 趋势 19

robonuggets/marp-slides 是从 https://github.com/robonuggets/marp-slides. 导入的特工技能候选。

概览

robonuggets/marp-slides 是从 https://github.com/robonuggets/marp-slides. 导入的特工技能候选。

概述(AI 翻译)

一项使用 MARP 制作精美演示的 Claude Code 技能——SVG 图表、仪表盘组件、暗/亮主题,以及 22 个精选的示例卡组供学习。

它的作用

给Claude Code一个主题,它就能构建一个精致的MARP牌组。该技能教它如何用SVG图表、公制卡、仪表、火花线、进度条、可展开的部分等内容编写幻灯片——全部用Markdown中的原始HTML完成。

这22套示例套牌是秘诀。克劳德不仅仅知道构件,还会阅读看起来不错且质量条匹配的真实套牌。

快速开始

1.安装技能

2.把它添加到Claude代码里

在技能文件夹中指出Claude代码:

或者手动添加到你的项目的.claude/skills/目录中。

3.安装VS Code扩展

安装Marp for VS Code并启用以下设置:

4.要求做一个演讲

包含了什么

示例类别

类别 示例 风格
数据/仪表盘 Facebook广告、健身、比较 SVG图表、统计卡、仪表
生活方式 / 编辑 咖啡、品酒、鸡尾酒 温暖的基调、摄影、评分

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

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

Category Examples Style
Data / dashboard facebook-ads, fitness, comparison SVG charts, stat cards, gauges
Lifestyle / editorial coffee, wine-tasting, cocktail Warm tones, photography, ratings
Guide / how-to garden, houseplant, home-gym Step-by-step, tips, checklists
Fun / creative kids-party, board-game, film-director Playful, colorful, interactive
Travel / location travel, walking-tour, road-trip Maps, itineraries, photo backgrounds
Showcase hero, apartment, wardrobe Visual-first, minimal text

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
在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add robonuggets/marp-slides
新手?先看 mcpskill.org 教程 →