본문으로 건너뛰기
cccskills
무료GitHub에 공개

creating-marp-slides

このリポジトリの Marp スライドを作成・修正・レビューし、HTML/PDF/PPTX に出力する際に使用する。画像配置、対象を絞ったビルド、表示確認を扱う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(3)

  • SKILL.md3.4 KB
  • references/content-optimization.md1.3 KB
  • references/troubleshooting.md1.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Marp スライド作成

Claude Code / Codex 共通の作業ガイド。特定のサブエージェントや MCP ツールを前提にしない。 パスとコマンドは、特記しない限りリポジトリルートを基準とする。

作成・修正

対象ファイルと依頼された内容・出力形式を確認する。既存スライドのテーマや構成を尊重し、 新規作成で指定がなければ次の Front Matter を出発点にする。

---
marp: true
theme: default
paginate: true
---

marp: true は必須。テーマとページ番号は用途に合わせて変更する。

  • スライドは slides/*.md、画像は slides/images/、カスタムテーマは themes/*.css。
  • 画像は ./images/filename.png で参照する。プレビューと HTML 出力で同じ相対配置を保つための規約。
  • 組み込みテーマは default / gaia / uncover。いずれも invert をサポートする。
  • Marp 設定は .marprc.yml、コマンドの定義は package.json を正とする。

開発コマンド

依存関係がなければ bun install。以下の scripts は全スライドを対象にする。

コマンド用途
bun run previewhttp://localhost:8080/slides/<name>.md を表示
bun run buildHTML + PDF
bun run build:htmlHTML と dist/images/ への画像コピー
bun run build:pdfPDF
bun run build:pptxPPTX
bun run lintMarkdown と JavaScript の lint

特定ファイルのみの依頼では、インストール済みの CLI で対象を絞る。例:

mkdir -p dist
bun run copy:images
bun run -- marp slides/example.md -o dist/example.html --html --allow-local-files
bun run -- marp slides/example.md -o dist/example.pdf --pdf --allow-local-files
bun run -- marp slides/example.md -o dist/example.pptx --pptx --allow-local-files
bun run -- markdownlint slides/example.md

必要な形式だけ実行する。画像コピーは HTML 用。HTML を渡す場合は dist/images/ も含める。 PDF/PPTX の出力には対応ブラウザが必要。通常の PPTX はスライドを画像として格納するため、 編集可能なテキストや図形が必要という依頼なら、この出力で要件を満たすか確認する。

検証

  • 変更対象を lint し、要求された形式を生成してファイルの存在を確認する。
  • 表示に関わる変更は利用可能なブラウザや画像出力で確認する。レビュー依頼では対象の全スライドを確認する。
  • lint / ビルド成功だけで、見切れや画像表示の確認済みとはしない。
  • 結果には対象、実行した検証、出力先、未確認の事項を簡潔に記す。

情報量や見切れを調整するときは コンテンツ最適化、 画像・テーマ・変換の問題があるときは トラブルシューティング を読む。

仕様を確認する場合は Marp CLI と 組み込みテーマ を参照する。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

이 스킬의 문제 신고