GitHub Issues × Claude AI でスライドを自動生成する仕組みを作る

name: Build Slides

on:
  pull_request:
    paths:
      - 'input/**.md'
      - 'theme/theme.css'

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Japanese fonts
        run: |
          sudo apt-get update
          sudo apt-get install -y fonts-noto-cjk

      - name: Install Marp CLI
        run: npm install -g @marp-team/marp-cli

      - name: Create output directory
        run: mkdir -p output

      - name: Build PDF
        run: marp input/input.md --theme theme/theme.css --pdf --html -o output/slides.pdf --allow-local-files

      - name: Build PPTX
        run: marp input/input.md --theme theme/theme.css --pptx --html -o output/slides.pptx --allow-local-files

      - name: Build HTML
        run: marp input/input.md --theme theme/theme.css --html -o output/slides.html --allow-local-files

      - name: Upload Artifacts
        uses: actions/upload-artifact@v4
        with:
          name: slides
          path: output/

      - name: Comment PR with preview (upsert)
        uses: actions/github-script@v7
        with:
          script: |
            const MARKER = '<!-- slides-build-comment -->';
            const runUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
            const artifactUrl = `${runUrl}#artifacts`;

            const body = [
              MARKER,
              '## スライドビルド完了',
              '',
              '| 形式 | ファイル |',
              '|------|--------|',
              '| PDF  | `slides.pdf` |',
              '| PPTX | `slides.pptx` |',
              '| HTML | `slides.html` |',
              '',
              `[アーティファクトをダウンロード](${artifactUrl})`,
            ].join('\n');

            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });

            const existing = comments.find(c => c.body.includes(MARKER));

            if (existing) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: existing.id,
                body,
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body,
              });
            }

# スライド生成ルール

## 概要
このリポジトリはMarpを使ってスライドを自動生成するシステムです。
IssueでスライドのストーリーやアイデアをもらったらMarp形式のMarkdownを生成し、`input/input.md`に保存してPRを出してください。

## ルール

### ファイル
- スライドの内容は必ず `input/input.md` に保存する
- 画像素材は `imgs/` フォルダを参照する
- テーマは `theme/theme.css` を使用する

### スライドのクラス
- タイトルスライドのみ `<!-- _class: title -->` を使う
- それ以外のスライドにはclassを付けない

### 数式

- 数式は必ずKaTeX記法で書く（プレーンテキストやコードブロックに入れない）
- インライン数式：`$E = mc^2$`
- ブロック数式：`$$\text{Attention}(Q,K,V) = \text{softmax}\left(\frac{QK^\top}{\sqrt{d_k}}\right)V$$`

### 図・ダイアグラム

- フロー図・アーキテクチャ図はMermaidではなく **HTML/CSS** で描く
- `div` の `display:flex` / `display:grid` とインラインスタイルで構成する
- カラートークン（`var(--color-primary)` 等）を使って統一感を保つ
- 詳細は `.claude/skills/theme-guide.md` を参照

### スライドの区切り（`---`）

- 「話題のまとまり」が完結するところで区切る
- 段落の途中、箇条書きの途中、説明の途中では区切らない
- 区切りの直前の内容が中途半端に見えないか必ず確認する
- 1枚のスライドが長くなりすぎる場合は、**セクションのまとまりごと**に分割する

### コンポーネント
- 重要なポイントは `<div class="callout">` を使う
- 警告・注意は `<div class="callout warning">` を使う
- 2カラムレイアウトは `<div class="cols">` を使う
- 3カラムレイアウトは `<div class="cols3">` を使う
- ラベル＋値の情報（プロフィール、スペック等）は `<div class="kv">` を使う
- 解決済み/注意/補足をボックスで囲む場合は `<div class="card ok|warn|info">` を使う（乱用しない）

詳細な使い方は `.claude/skills/theme-guide.md` を参照。

### スライドの構成
1. タイトルスライド
2. アジェンダ
3. 本編（内容に応じて）
4. まとめ

### 文体ルール

#### タイトル・見出しの記法

- **コロン（：）を使用しない**
  - ❌ 悪い例: `原則❶：自律性の最大化`
  - ✅ 良い例: `原則❶ 自律性の最大化`

#### 理知的な文体の維持

- **感嘆符（！）や疑問符（？）を避ける**
  - ❌ 悪い例: `AIで開発が10倍速に！`
  - ✅ 良い例: `AIで開発が10倍速に`
- **装飾的な絵文字を避ける**
  - ❌ 悪い例: `🧩 問題領域の複雑さ`
  - ✅ 良い例: `問題領域の複雑さ`
- **色による強調は控えめに** — 赤・緑などの強い色は避け、`--color-muted`・`--color-text` を基調にする

## スキル

- `.claude/skills/marp-convert.md` : Marp変換の詳細ルール
- `.claude/skills/theme-guide.md` : テーマの使い方・レイアウトパターン集

name: スライド生成依頼
description: Claudeにスライドを自動生成してもらうための依頼テンプレート
title: "[Slide] "
labels: ["slide-request"]
body:
  - type: markdown
    attributes:
      value: |
        このIssueを作成すると、Claudeが自動的にMarpスライドを生成してPRを作ります。
        内容をできるだけ詳しく記入してください。

  - type: input
    id: title
    attributes:
      label: スライドタイトル
      description: スライドのメインタイトルを入力してください
      placeholder: 例：2026年度 プロジェクト計画
    validations:
      required: true

  - type: textarea
    id: purpose
    attributes:
      label: 目的・背景
      description: このスライドは何のために作りますか？誰に向けて発表しますか？
      placeholder: |
        例：
        - 対象：チームメンバー（10名）
        - 目的：Q2の振り返りと次四半期の計画共有
        - 発表時間：15分程度
    validations:
      required: true

  - type: textarea
    id: content
    attributes:
      label: スライドに含めたい内容
      description: 伝えたいポイントや構成案を書いてください。箇条書きでもOK。
      placeholder: |
        例：
        - Q1の実績（目標 vs 実績）
        - 課題だった点と対応策
        - Q2の目標と施策
        - チームへのお願い
    validations:
      required: true

  - type: input
    id: slide_count
    attributes:
      label: 希望スライド枚数（目安）
      description: 枚数の目安があれば入力してください
      placeholder: 例：10〜15枚

  - type: textarea
    id: style
    attributes:
      label: スタイル・トーンの要望
      description: デザインや文体に希望があれば記入してください
      placeholder: |
        例：
        - ビジネスライクにまとめてほしい
        - 図表（cols レイアウト）を多めに使いたい
        - 数字を強調したい

  - type: textarea
    id: extra
    attributes:
      label: その他・補足
      description: 追加情報があれば何でも