AgentSkillsCN

marp-theme-builder

构建 Marp 主题的完整流水线。支持 SCSS 转 CSS 编译、生成示例图片、配置 Makefile、设置 Git Hook 以及 GitHub Actions CI 配置。当您提出“搭建主题开发环境”等需求时，此技能将为您提供有力支持。

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

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: テーマ作成（ビルド対象）

スクリプト

リファレンス

アセット（テンプレート）

プロジェクト構造

code
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

ビルドフロー

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