marp-check

Marpスライドの視覚検証ワークフロー。スライドをPNG画像に書き出して1枚ずつ目視チェックする。「スライドを確認して」「レイアウト崩れがないか見て」「検証して」、またはmarp-deckスキルでスライドを作成・編集した後の最終確認で必ず使う。

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/unsolublesugar/marp-slides-studio --skill marp-check

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name	marp-check
description	Marpスライドの視覚検証ワークフロー。スライドをPNG画像に書き出して1枚ずつ目視チェックする。「スライドを確認して」「レイアウト崩れがないか見て」「検証して」、またはmarp-deckスキルでスライドを作成・編集した後の最終確認で必ず使う。

スライドのMarkdown/CSSを編集しただけでは崩れに気づけない。必ず画像に書き出して1枚ずつ確認する。

PNG書き出し: npm run build -- slides/<deck> png
- slides/<deck>/png/slide.001.png 形式で全スライドが出力される
全スライドをReadツールで開いて目視確認する。チェック項目:
- テキストがカードやスライド端からあふれていない（オーバーフロー）
- 画像が枠内に収まり、極端に小さく/大きくなっていない
- 見出しの改行位置が不自然でない
- アクセント色が1スライド1〜2箇所に収まっている
- 空白が偏っていない（下半分がスカスカ等）
- 誤字・全角半角の混在がない
問題があれば修正して 1. に戻る。テキスト量を減らす・スライドを分割するのが第一選択。CSSいじりは最終手段
全スライドがパスしたら成果物をビルド: npm run build -- slides/<deck> および npm run build -- slides/<deck> pdf
検証用の png/ ディレクトリは .gitignore 済みなので残してよい

PDFだけはChromeの印刷経路で描画されるため、HTML・PNG（画面メディア）と結果が一致しないことがある。制約の詳細は .steering/marp-constraints.md を参照。新しく影・フィルタ・半透明の装飾をテーマに足したら、PDFでも必ず確認する。

PDF単体の見え方は次の方法で確認できる（sipsは1ページ目のみ変換）。

npm run build -- slides/<deck> pdf
sips -s format png slides/<deck>/slides.pdf --out /tmp/page1.png

特定ページを見たいときは、そのスライドだけの一時デッキを slides/ 配下に作ってPDF化するのが早い（slides/ の外だとビルドが通らないことがある）。