Skip to content
cccskills
FreePublished on GitHub

marp-theme-builder

Marpテーマのビルドパイプライン構築。SCSS→CSSコンパイル、サンプル画像生成、Makefile設定、Git hook、GitHub Actions CI設定を支援。「テーマのビルド環境を整備」などのリクエスト時に使用。

The English summary is being prepared. Showing the original description.

Works withGitHub
See how to install

Files included (10)

  • SKILL.md2.7 KB
  • assets/Makefile.template3.1 KB
  • assets/pre-commit.template1.6 KB
  • assets/test.yml.template4.0 KB
  • references/ci-setup.md5.5 KB
  • references/makefile-patterns.md3.8 KB
  • references/pre-commit-hook.md4.2 KB
  • scripts/build.sh2.3 KB
  • scripts/image_diff.py4.6 KB
  • scripts/init_theme_project.sh4.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Marp Theme Builder スキル

Marpテーマのビルドパイプラインを構築するスキル。

使用タイミング

  • 「テーマのビルド環境を整備」
  • 「CIを設定したい」
  • 「Makefileを作成」
  • 「pre-commitフックを設定」
  • 「画像差分テストを導入」

ワークフロー

  1. プロジェクト初期化: ディレクトリ構造、package.json
  2. Makefile作成: ビルドコマンドの定義
  3. Git hook設定: pre-commitでビルド確認
  4. CI設定: GitHub Actionsワークフロー
  5. 動作確認: ビルドとテスト実行

参照スキル

  • marp-theme-creator: テーマ作成(ビルド対象)

スクリプト

リファレンス

アセット(テンプレート)

プロジェクト構造

my-marp-theme/
├── .github/
│   └── workflows/
│       └── test.yml        # CI設定
├── .githooks/
│   └── pre-commit          # pre-commitフック
├── marp-themes/
│   ├── theme.scss          # テーマソース
│   └── theme.css           # 生成されるCSS
├── example/
│   ├── example.md          # サンプルスライド
│   └── example.001.png     # 生成される画像
├── Makefile
├── package.json            # (オプション)
└── README.md

ビルドフロー

SCSS ─────> CSS ─────> PNG画像
         (sass)    (marp-cli)
                      │
                      ▼
                   Git commit
                      │
                      ▼
                 pre-commit hook
                  (make実行)
                      │
                      ▼
                   CI (GitHub Actions)
                  (画像差分テスト)

$ARGUMENTS

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Marpスライドを各種形式(PDF, PNG, PPTX, HTML)にエクスポートするスキル。「PDFに変換」「スライドを書き出し」「画像で出力」「PowerPointにエクスポート」などのリクエストに対応。

The English summary is being prepared. Showing the original description.

ryo-touch/marp-skills3Updated Feb 27, 2026

Marpプレゼンテーションフレームワークの包括的な知識ベース。構文、ディレクティブ、テーマシステム、画像構文などの詳細情報を提供。他のMarpスキル(marp-markdown, marp-visual-fix, marp-theme-creator)から参照される基盤スキル。

The English summary is being prepared. Showing the original description.

ryo-touch/marp-skills3Updated Feb 27, 2026

Marp用Markdownプレゼンテーションファイルの作成・編集。スライドコンテンツの執筆、frontmatter設定、ディレクティブ適用を支援。「スライドを作りたい」「プレゼンを作成」などのリクエスト時に使用。

The English summary is being prepared. Showing the original description.

ryo-touch/marp-skills3Updated Feb 27, 2026

Marp用カスタムテーマの新規作成。SCSS/CSSでのテーマ設計、カラーパレット定義、タイポグラフィ設定、スライドクラス実装を支援。「新しいMarpテーマを作りたい」などのリクエスト時に使用。

The English summary is being prepared. Showing the original description.

ryo-touch/marp-skills3Updated Feb 27, 2026

Marpスライドの表示崩れ・レイアウト問題の診断と修正。文字はみ出し、画像サイズ問題、PDF書き出し崩れを解決。「スライドの見た目を修正」「文字がはみ出す」などのリクエスト時に使用。

The English summary is being prepared. Showing the original description.

ryo-touch/marp-skills3Updated Feb 27, 2026

See all skills by ryo-touch

Report a problem with this skill