| name | marp-slides |
| description | Marp スライド作成・編集時にデザインとディレクティブの規約を自動適用するスキル。Marp でスライドを作成・編集する際に使用する。Marp、スライド、プレゼンテーション、発表資料に関するタスクで発動する。 |
Marp Slides スキル
前提条件: marp-cli のインストール
スライドをビルドする前に marp コマンドが使用可能か確認する。
which marp
コマンドが見つからない場合は、ユーザーに以下のインストールコマンドを提示し、承認を得てから実行する:
brew install marp-cli
注意: ユーザーの承認なしにインストールを実行してはならない。
フロントマターテンプレート
新規スライド作成時は、このスキルの template.md をコピーしてベースにする。template.md にはフロントマターと style: ブロックにデザイン定義が含まれている。
スライドごとにスタイルを個別調整する場合は、コピーした style: ブロック内を直接編集する。
ビルドコマンド
marp slides.md
PDF 出力する場合:
marp slides.md -o slides.pdf
デザイン検証
スライド生成後、エージェントはデザインを検証するために以下の手順を実施する:
- 画像を出力してブラウザで確認:
marp --images png *.md -o /tmp/**/*.png で画像を出力し確認
- 問題があれば修正し、再度ビルド・検証を行う
注意: marp --images png は内部で puppeteer (Chrome) を起動するため、sandbox モードでは失敗する。sandbox を無効にして実行すること。
Marp ディレクティブの使い方
タイトルスライド / セクション区切りスライド
<!-- _class: title -->
<!-- _header: "" -->
<!-- _paginate: false -->
_class: title でタイトル用レイアウト（垂直中央寄せ・テキスト中央揃え）を適用_header: "" と _paginate: false でヘッダー・ページ番号を非表示にする- セクション区切りスライドにも同じ
_class: title を使用する
通常スライド
paginate: true でページ番号表示（フロントマターで設定済み）- ヘッダー・フッターはフロントマターの値が自動表示される
背景画像スライド
画像を背景に使用するスライドでは _class: bg-image を指定し、画像には Marp 組み込みのフィルタ構文 brightness:0.4 を付ける:
<!-- _class: bg-image -->
# スライドタイトル
_class: bg-image によりテキスト・見出し・ヘッダー・フッター・ページ番号がすべて白色になるbrightness:0.5 は Marp の画像フィルタ構文で、CSS ではなく Markdown 側で背景画像を暗くする（CSS の img セレクタでは Marp の背景画像に効かないため）- タイトルスライドと組み合わせる場合:
<!-- _class: title bg-image -->
コンテンツ規約
太字（**）の使い分け
- 全テキストが
font-weight: bold で太字がベース
**テキスト**（strong）はアクセントカラーで表示される。特に伝えたいメッセージや重要な結論にのみ使用する- タイトルスライド内の
**テキスト** は通常の文字色で表示される（アクセントカラーにならない）
コードブロック
- 言語指定を必ず付ける（例:
go`、bash`）
- 出力例など言語がない場合は言語指定なしで可
