pakco-html

pakco.html

pakco.html は、AI 生成スライドデッキ用のローカルファーストなビジュアルテイストメニューです。ユーザーが毎回ゼロからテイストを説明せずに済むよう、目に見えるスタイルを閲覧し、実行可能なプロンプトをコピーして、Claude Code / Codex / Hermes / WorkBuddy / TRAE Work に安定したビジュアル制約でデッキを生成させることができます。

基盤となるスキルは、テーマ、デッキ全体のテイストカード、レイアウト、アニメーション、プロンプトを備えた、プロフェッショナルな HTML プレゼンテーションを引き続き静的ファイルとして作成します。テーマファイル 1 つにつき 1 つの見た目、レイアウトファイル 1 つにつき 1 つのページタイプ、アニメーションクラス 1 つにつき 1 つのエントリーエフェクトです。 すべてのページで、assets/base.css にあるトークンベースのデザインシステムを共有します。

インストール

Codex

リポジトリのルートから GitHub スキルをインストールするよう Codex に指示します。

Install this skill from GitHub: https://github.com/pakco77/pakco-html
Use the repo root as the skill path and install it as pakco-html.

ターミナルでの代替手順：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-codex.sh | bash

インストール後、Codex を再起動して ~/.codex/skills/pakco-html を再読み込みします。

Claude Code / AgentSkill CLI

npx skills add https://github.com/pakco77/pakco-html

WorkBuddy

WorkBuddy のユーザースキルディレクトリにインストールします。

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- workbuddy

インストール後、WorkBuddy を再起動するか、スキルを更新してください。

TRAE Work / TRAE SOLO

インストール済みのエディションに合った AgentSkill CLI ターゲットを使用します。

npx skills add https://github.com/pakco77/pakco-html --agent trae-cn -g
# International edition:
npx skills add https://github.com/pakco77/pakco-html --agent trae -g

TRAE Work CN のターミナルでの代替手順：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- trae-work

インストール後、TRAE Work を再起動するか、スキルを更新してください。

その他の AgentSkill エージェント

対応エージェントでは、skills CLI のエージェントターゲットを使用します。

npx skills add https://github.com/pakco77/pakco-html --agent kimi-code-cli
npx skills add https://github.com/pakco77/pakco-html --agent qwen-code
npx skills add https://github.com/pakco77/pakco-html --agent gemini-cli

ローカルの SKILL.md フォルダーを読み取るその他のエージェントには、汎用インストーラーを使用します。

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- ~/.some-agent/skills/pakco-html

ビルドは不要です。CDN Web フォントのみを使用する、純粋な静的 HTML/CSS/JS です。

このスキルでできること

• 36 種類のテーマ（assets/themes/*.css）— minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte/mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、rainbow-gradient、aurora、blueprint、memphis-pop、cyberpunk-neon、y2k-chrome、retro-tv、japanese-minimal、vaporwave、midcentury、corporate-clean、academic-paper、news-broadcast、pitch-deck-vc、magazine-bold、engineering-whiteprint
• 24 種類のデッキテイストカード（templates/full-decks/<name>/ ＋ Guizang バリアント）— スコープ付き .tpl-<name> CSS を備えた、完全なマルチスライドデッキ 15 種類と、Guizang カラーバリアント 9 種類。ネイティブテンプレートには、抽出したルック 8 種類（xhs-white-editorial、graphify-dark-graph、knowledge-arch-blueprint、hermes-cyber-terminal、obsidian-claude-gradient、testing-safety-alert、xhs-pastel-card、dir-key-nav-minimal）と、シナリオ用のひな型 7 種類（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 3:4、course-module、presenter-mode-reveal — 演講者モード専用）が含まれます
• 31 種類のレイアウト（templates/single-page/*.html）。実用的なデモデータ付きです
• 27 種類の CSS アニメーション（assets/animations/animations.css）。data-anim で使用します
• 20 種類の canvas FX アニメーション（assets/animations/fx/*.js）。data-fx で使用します — particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力指向）、neural-net（パルス）、constellation、orbit-ring、galaxy-swirl、word-cascade、letter-explode、chain-react、magnetic-field、data-stream、gradient-blob、sparkle-trail、shockwave、typewriter-multi、counter-explosion
• キーボードランタイム（assets/runtime.js）— 矢印キー、T（テーマ）、A（アニメーション）、F/O、S（プレゼンターモード：CURRENT / NEXT / SCRIPT / TIMER カードを備えたマグネットカード式ポップアップ）、N（ノートドロワー）、R（プレゼンターモードでタイマーをリセット）
• FX ランタイム（assets/animations/fx-runtime.js）— スライドに入ると [data-fx] を自動初期化し、離れるとクリーンアップします
• テーマ / レイアウト / アニメーション / デッキ全体のギャラリー用ショーケースデッキ
• PNG エクスポート用のヘッドレス Chrome レンダースクリプト

スタイルピッカーを開く

ユーザーがスタイルメニューを開く／閲覧するように求めた場合（例：「html来」、「风格菜单を開く」、「pakco-html を開く」、「htmlスタイルを開く」、「どんなスタイルがあるか見せて」、「ピッカーを開いて」）、この SKILL.md があるディレクトリを SKILL_ROOT として扱います。そのディレクトリからローカルサーバーを起動し、ホストのブラウザーまたは HTML プレビューでピッカーを開きます。

cd "$SKILL_ROOT" && python3 -m http.server 8000 &
# then open: http://localhost:8000/templates/style-picker.html

一般的なルートは ~/.codex/skills/pakco-html、~/.claude/skills/pakco-html、~/.workbuddy/skills/pakco-html、~/.trae/skills/pakco-html、~/.trae-cn/skills/pakco-html です。いずれかを前提にせず、実際に読み込まれた Skill のパスを確認してください。

ピッカーには、4 つのタブ（Skins / Templates / UI Taste / Social Cards）に 60 件以上のライブプレビューが表示されます。ユーザーがカードをクリックしてプロンプトをコピーし、それをあなたに貼り付けます。

使用するタイミング

スライド形式の出力を求められた場合や、テキスト／メモを見栄えのよいスライドデッキにまとめたい場合に使用します。ゼロから作成するより、こちらを優先してください。

🎤 Presenter Mode（演説者モード + 全文台本）

ユーザーが 演説 / 共有 / 台本 / 全文台本 / speaker notes / presenter view / 演説者ビュー / テレプロンプター のいずれかに言及した場合、または「チームに xxx を説明する」「技術共有会を開く」「スムーズに話せるか不安」「全文台本付きの PPT が欲しい」といった場合は、presenter-mode-reveal のフルデッキテンプレートを使用し、各スライドの <aside class="notes"> に 150～300 語の全文台本を書きます。

3 つの台本作成ルールを含む完全な作成ガイドについては、references/presenter-mode.md を参照してください。

1. 台本ではなく、話すための合図 — 核となる言葉を太字にし、つなぎの文は独立した段落にします
2. 各ページ 150～300 字 — 1 ページあたり 2～3 分のペース
3. 書き言葉ではなく、話し言葉 — 「したがって」→「だから」、「当該の案」→「この案」

すべてのフルデッキテンプレートは、S キーによるプレゼンターモードに対応しています（runtime.js に組み込まれています）。S キーを押すと、4 つのマグネット式カードを備えた新しいポップアップウィンドウが開きます。

• 🔵 CURRENT — 現在のスライドをピクセル単位で正確に表示する iframe プレビュー
• 🟣 NEXT — 次のスライドをピクセル単位で正確に表示する iframe プレビュー
• 🟠 SPEAKER SCRIPT — 大きなフォントで表示される全文台本（スクロール可能）
• 🟢 TIMER — 経過時間 + スライドカウンター + 前へ／次へ／リセットボタン

各カードはヘッダーをドラッグして移動でき、右下隅のハンドルを使ってサイズを変更できます。カードの位置とサイズは、デッキごとに localStorage に保存されます。「レイアウトをリセット」ボタンで既定の配置に戻せます。

プレビューがピクセル単位で正確な理由：各プレビューは、?preview=N クエリパラメーターを付けて実際のデッキ HTML を読み込む <iframe> です。runtime.js がこれを検知し、クロームを表示せずに N 枚目のスライドだけを描画します。そのため、プレビューには聴衆向けビューと同じ CSS、テーマ、フォント、ビューポートが使われ、色とレイアウトは完全に一致します。

スムーズな移動：スライドが切り替わると、プレゼンターウィンドウは各 iframe に postMessage({type:'preview-goto', idx:N}) を送信します。iframe はスライド間の .is-active を切り替えるだけなので、再読み込みもちらつきもありません。2 つのウィンドウは BroadcastChannel を介して同期されます。

すべてのスライドに適切な台本例があり、この機能を前提に一から設計されているのは presenter-mode-reveal だけです。

プレゼンターウィンドウのキーボード操作：← → 移動（聴衆向けウィンドウと同期）· R タイマーをリセット · Esc ポップアップを閉じる。 聴衆向けウィンドウのキーボード操作：S プレゼンターを開く · T テーマを切り替える · ← → 移動（プレゼンターと同期）· F 全画面表示 · O 概要。

📱 ウェブページモード（Webpage Mode）

ユーザーが ウェブページ / ウェブページ版 / ウェブページ形式 / ウェブページを作る / ウェブページを生成 / web page / webpage / 長いページ / 上下にスクロール / スマートフォンで見る / リンクを送って他の人に見せる のいずれかを求めた場合や、コンテンツがライブプレゼンテーションではなく閲覧、共有、保存を目的とする場合は、デッキではなくウェブページテンプレートを使用します。

ウェブページモードでは、スライドの境界がない、縦にスクロールする HTML ページが生成されます。デッキとの主な違いは次のとおりです。

	デッキ	ウェブページ
インタラクション	キーボード／ジェスチャーでページを切り替え	ブラウザー標準のスクロール
レイアウト	全画面 16:9 スライド	中央揃え、幅 720px で画面に適応
JS	runtime.js が必要	不要
body class	(なし)	webpage
構造	.deck > .slide	.page > section
適した用途	演説、共有会、Keynote	閲覧、共有、リンクの送信

足場の作成方法：

<body class="webpage">
<div class="page">
  <section class="hero">...</section>
  <div class="section-break"></div>
  <section>...</section>
  ...
  <div class="page-footer">...</div>
</div>
</body>

スターターテンプレート：templates/webpage.html。新しいウェブページを作成するには、これをコピーして始めてください。 すべてのデザイントークン（テーマ、.card、.grid、.pill、.gradient-text など）は、どちらのモードでも使用できます。 ウェブページモードでは runtime.js を含めないでください。不要です。

作成を始める前に — 必ず質問するか、提案してください

スライドを書き始める前に、次の3点を把握してください。 ユーザーに直接質問するか、すでに十分な内容が提供されている場合は、適切なデフォルト案を提示して確認してください。

1. 内容と対象者。 どのような資料で、スライドは何枚で、誰が見るのか（エンジニア／経営幹部／小红书の読者／学生／VC）？
2. スタイル／テーマ。 36種類のテーマのうち、どれが合うか？ 判断に迷う場合は、雰囲気に合わせて候補を2～3個提案してください。
   • ビジネス／投資家向けピッチ → pitch-deck-vc、corporate-clean、swiss-grid
   • 技術共有／エンジニアリング → tokyo-night、dracula、catppuccin-mocha、 terminal-green、blueprint
   • 小红书の図文 → xiaohongshu-white、soft-pastel、rainbow-gradient、 magazine-bold
   • 学術／レポート → academic-paper、editorial-serif、minimal-white
   • エッジの効いた表現／サイバー／ローンチ → cyberpunk-neon、vaporwave、y2k-chrome、 neo-brutalism
3. 出発点。 15種類のネイティブなフルデッキテンプレート、9種類のGuizangバリアント、またはスクラッチのいずれにするか？ 最も近い templates/full-decks/<name>/ を示し、合っているか確認してください。ユーザーの内容から明確な候補が分かる場合（例：「我要做产品发布会」→ product-launch）は、ただ質問するのではなく、自信を持って提案してください。

最初のメッセージの例：

このPPTをお作りします！まず、次の3点を確認させてください：

1. おおまかな内容／ページ数／対象者は誰ですか？
2. お好みのスタイルはありますか？次の3つのテーマがおすすめです：tokyo-night（技術共有に使いやすいデザイン）、xiaohongshu-white（小红书風）、corporate-clean（正式な報告向け）。
3. 既存の tech-sharing フルデッキテンプレートをベースにしますか？

これらが明確になってから、デッキの骨組みを作成し、執筆を始めてください。

更新（更新）

ユーザーが「更新 pakco-html」、「update pakco-html」、「升级」、または「拉最新版」と言った場合は、この SKILL.md があるディレクトリを SKILL_ROOT として、次を実行してください：

bash "$SKILL_ROOT/scripts/update.sh"

scripts/update.sh がまだ存在しない場合（古いインストールの場合）は、同等の処理をインラインで実行してください：

TMP=$(mktemp -d) && git clone --depth 1 https://github.com/pakco77/pakco-html.git "$TMP/r" 2>/dev/null && cp -r "$TMP/r/assets" "$TMP/r/templates" "$TMP/r/references" "$TMP/r/scripts" "$SKILL_ROOT/" && cp "$TMP/r/SKILL.md" "$SKILL_ROOT/" && rm -rf "$TMP" && echo "✅ 更新完成"

相対パスで assets/ を参照している既存のデッキには、最新の機能（テーマ、レイアウト、モバイル対応、バグ修正）が自動的に適用されます。HTMLの変更は必要ありません。

クイックスタート

1. 新しいデッキの骨組みを作成します。 リポジトリのルートから実行します：

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. テーマを選びます。 デッキを開いて T キーを押すと切り替えられます。または、直接指定します：

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   カタログは references/themes.md を参照してください。
3. レイアウトを選びます。 templates/single-page/ 内のファイルから <section class="slide">...</section> ブロックをコピーして、デッキに貼り付けます。デモデータを置き換えてください。 カタログは references/layouts.md を参照してください。
4. アニメーションを追加します。 任意の要素に data-anim="fade-up"（または class="anim-fade-up"）を指定します。<ul>／グリッドには、順番に表示するために anim-stagger-list を使用してください。 Canvas FXには <div data-fx="knowledge-graph">...</div> を使用し、<script src="../assets/animations/fx-runtime.js"></script> を含めてください。 カタログは references/animations.md を参照してください。
5. フルデッキテンプレートを使用します。 templates/full-decks/<name>/ を examples/my-talk/ にコピーして、出発点として使用します。各フォルダーはスコープ付きCSSを含む自己完結型です。カタログは references/full-decks.md、ギャラリーは templates/full-decks-index.html を参照してください。
6. PNGにレンダリングします。

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

作成ルール（重要）

• 必ずテンプレートから始めてください。 スライドを一から作成しないでください。まず templates/single-page/ から最も近いレイアウトをコピーし、その後で内容を置き換えてください。
• 色は直接指定せず、トークンを使用してください。 色、角の丸み、影はすべて、assets/base.css で定義され、テーマによって上書きされる CSS 変数から指定してください。適切な例：color: var(--text-1)。不適切な例：color: #111。
• 新しいレイアウトファイルを作らないでください。 既存のレイアウトの組み合わせを優先してください。31種類のどれも当てはまらない場合に限り、新しい templates/single-page/*.html を追加してください。
• クローム用スロットを尊重してください。 .deck-header、.deck-footer、.slide-number、進捗バーは assets/base.css と runtime.js によって提供されます。
• キーボード操作を優先してください。 デッキが ← → / T / A / F / S / O / ハッシュによるディープリンクに対応できるよう、必ず <script src="../assets/runtime.js"></script> を含めてください。
• 論理ページごとに .slide を1つ配置してください。 runtime.js によって .slide.is-active が表示され、それ以外はすべて非表示になります。
• ノートを用意してください。 各スライド内で、スピーカーノートを <div class="notes">…</div> で囲んでください。S キーを押すとオーバーレイが開きます。
• スライド自体に、発表者だけが見るテキストを絶対に入れないでください。 「このページでは……を示します」や「発表者：ここで補足できます……」のような説明文や、発表者向けの小さな補足キャプションは、必ず <div class="notes"> 内に入れてください。スライド上の可視要素である <p> / <span> に入れてはいけません。.notes クラスはデフォルトで display:none であり、S キーのオーバーレイでのみ表示されます。スライドには、聴衆に見せる内容（タイトル、箇条書き、データ、グラフ、画像）のみを含めてください。

執筆ガイド

ファイル構成、命名規則、アウトラインからデッキへの変換方法、対象者に応じたレイアウトやテーマの選び方、中国語と英語を併記したデッキの作り方、エクスポート方法について、手順を追って説明しています。references/authoring-guide.md を参照してください。

カタログ（必要に応じて読み込む）

• references/themes.md — 36種類すべてのテーマと用途。
• references/layouts.md — 31種類すべてのレイアウト。
• references/animations.md — CSS アニメーション27種類と Canvas FX アニメーション20種類。
• references/full-decks.md — ネイティブのフルデッキテンプレート15種類と Guizang ピッカーバリエーション9種類。
• references/presenter-mode.md — 演者モード + 台本作成ガイド（技術共有／講演で必読）。
• references/authoring-guide.md — ワークフロー全体。

ファイル構成

pakco-html/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── webpage.html               (webpage mode starter — vertical scroll, no slides)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 15 native full-deck templates)
│   ├── full-decks/<name>/         (17 deck folders: 15 native + 2 Guizang bases)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

PNG へのレンダリング

scripts/render.sh は、ヘッドレス Chrome の /Applications/Google Chrome.app/Contents/MacOS/Google Chrome を呼び出します。複数スライドのキャプチャでは、runtime.js が #/N のディープリンクを公開し、render.sh が 1..N を順に処理します。

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

キーボード操作早見表

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

ライセンスと作者

MIT。Copyright (c) 2026 lewis <[email protected]>.

これは lewislulu/html-ppt-skill のフォークです。 フォークのメンテナー： @pakco77 — 上流の成果を基に、インタラクティブなスタイルピッカー WebUI、Guizang デッキバリアントの統合、演者モードの安定性に関する修正を追加しています。