marp-slides

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

デザイン検証

スライド生成後、エージェントはデザインを検証するために以下の手順を実施する:

1. 画像を出力してブラウザで確認: marp --images png *.md -o /tmp/**/*.png で画像を出力し確認
2. 問題があれば修正し、再度ビルド・検証を行う

注意: 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 -->
![bg brightness:0.4](./images/photo.jpg)

# スライドタイトル

• _class: bg-image によりテキスト・見出し・ヘッダー・フッター・ページ番号がすべて白色になる
• brightness:0.5 は Marp の画像フィルタ構文で、CSS ではなく Markdown 側で背景画像を暗くする（CSS の img セレクタでは Marp の背景画像に効かないため）
• タイトルスライドと組み合わせる場合: <!-- _class: title bg-image -->

コンテンツ規約

太字（**）の使い分け

• 全テキストが font-weight: bold で太字がベース
• **テキスト**（strong）はアクセントカラーで表示される。特に伝えたいメッセージや重要な結論にのみ使用する
• タイトルスライド内の **テキスト** は通常の文字色で表示される（アクセントカラーにならない）

コードブロック

• 言語指定を必ず付ける（例: go`、bash`）
• 出力例など言語がない場合は言語指定なしで可