creating-marp-slides

このプロジェクトでの Marp スライド作成ルール。スライド作成、画像配置、ビルド、プレビュー時に使用。画像は slides/images/ に配置、bun run preview/build を使用。

$ インストール

git clone https://github.com/toku345/marp-slides /tmp/marp-slides && cp -r /tmp/marp-slides/.claude/skills/creating-marp-slides ~/.claude/skills/marp-slides

// tip: Run this command in your terminal to install the skill

SKILL.md

View on GitHub →

name: creating-marp-slides description: このプロジェクトでの Marp スライド作成ルール。スライド作成、画像配置、ビルド、プレビュー時に使用。画像は slides/images/ に配置、bun run preview/build を使用。

Marp スライド作成スキル

本プロジェクトにおける Marp スライド作成の固有ルールと設定。

画像配置（重要）

スライドで使用する画像は 必ず slides/images/ に配置。

![](./images/diagram.png)
![bg right:40%](./images/photo.jpg)

理由: Marp CLI サーバーモードはルート以下のみ配信。他の場所では CLI プレビューで表示されない。参考: GitHub Issue #163

ファイル配置

種類	パス
スライド	`slides/*.md`
画像	`slides/images/`
カスタムテーマ	`themes/*.css`
出力	`dist/`

開発コマンド

# プレビュー（ルートから実行）
bun run preview
# → http://localhost:8080/slides/[ファイル名].md

# ビルド
bun run build        # HTML + PDF
bun run build:html   # HTML のみ
bun run build:pdf    # PDF のみ
bun run build:pptx   # PPTX のみ

設定（.marprc.yml）

allowLocalFiles: true  # ローカル画像読み込み許可
themeSet: ./themes     # カスタムテーマディレクトリ
html: true             # HTML タグ許可

その他のオプション（inputDir, output 等）については Marp CLI 公式ドキュメントを参照。

Front Matter 必須設定

---
marp: true
theme: default  # または gaia, uncover
paginate: true  # 推奨
---

テーマ選択

default: ビジネス向け、シンプル
gaia: カラフル、視覚的
uncover: ミニマル、テキスト中心

注意: invert クラスは default テーマで最も安定。gaia では期待通りに動作しない場合あり。