Skip to content
creating-marp-slides logo

Marp スライド作成スキル

creating-marp-slides

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

SKILL.md

Full skill instructions

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 では期待通りに動作しない場合あり。

詳細リファレンス

More Other skills

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

179.7K 76.1K
View

Fundamental design principles for writing maintainable, testable Python code.

40.2K 21.9K
View

Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.

40.2K 20K
View

Generate Playwright tests from scenarios using interactive browser exploration and validation.

39.7K 18.2K
View

Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.

40.2K 14.7K
View

GDPR-compliant data handling with consent management, data subject rights, and privacy controls.

40.2K 14.3K
View

Python error handling patterns including input validation, exception hierarchies, and partial failure handling. Use when implementing validation logic, designing exception strategies, handling batch processing failures, or building robust APIs.

40.2K 13.5K
View

Detailed multi-file refactor planning with safety checks and rollback guidance.

39.7K 13K
View