ckm:slides

概要

ckm:slides とは？

ckm:slides は、戦略性のある完成した HTML スライドデックを設計するための AI スキルです。単なる箇条書きの羅列ではなく、以下を活用してブラウザですぐ表示できる一貫したプレゼンテーション構造をエージェントに生成させます。

• データ可視化のための Chart.js
• 一貫したビジュアルテーマのための Design tokens
• さまざまなデバイスに対応するレスポンシブレイアウト
• 説得力のあるメッセージのためのコピーライティングのフレームワーク
• 代表的なデック種別に対応した実績あるスライド戦略

このスキルは、ストーリーと構成の両方が重要となるマーケティング資料、ピッチデック、ステークホルダー向けレポート、プロダクトデモなどの作成に最適化されています。

ckm:slides は誰に向いている？

ckm:slides は、次のような方に向いています。

• マーケティング、セールス、資金調達、レポーティング向けにスライドデックを作ることが多い
• PowerPoint ではなく、HTML/JavaScript ベースのプレゼンテーションを好む
• 毎回ゼロから作るのではなく、再利用できるレイアウトパターンやテンプレートがほしい
• YC seed deck、sales pitch、QBR などの明確なナラティブ構造をプロセスに組み込みたい

開発者、プロダクトマーケター、ファウンダー、アナリティクスチームなどが、「トピック + 希望スライド枚数」から構造化された HTML プレゼンテーションプランまで一気に進めるために利用できます。

どんな課題を解決できる？

ckm:slides は次のような問題を避けるのに役立ちます。

• ストーリーラインがなく散漫なデックになってしまう
• スライドごとにレイアウトやタイポグラフィがバラバラになる
• 説得力に欠ける、ありきたりなスライド文言になってしまう
• 毎回新しいプレゼンごとに Chart.js のチャートを手作業で組み込む必要がある

レイアウトパターン、コピーライティングのフレームワーク、すぐ使える HTML テンプレートを組み合わせることで、強力なデックを設計し、実装可能な HTML を生成するために必要な要素をエージェント側にすべて提供します。

ckm:slides が向いていないケース

ckm:slides があまり適さないケースは次のとおりです。

• HTML ではなくネイティブな PowerPoint や Keynote ファイルが必要な場合
• フロントエンドを扱わない、または HTML/JS アセットをホスティングできない場合
• フルデックではなく、一枚だけの単発スライドがほしい場合

そのようなケースでは、テキストのみの簡易スライドジェネレーターや .pptx を直接出力できるツールの方が適しています。

使い方

インストールとセットアップ

nextlevelbuilder/ui-ux-pro-max-skill リポジトリから slides スキルをエージェント環境に追加するには、次のコマンドでインストールします。

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

インストール後は次のステップを実行します。

1. .claude/skills/slides 配下の SKILL.md を開き、スキルの高レベルな挙動と引数の取り方を確認します。
2. スキルが依存しているパターンやテンプレートを把握するため、references/ フォルダを確認します。
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

スキル自体のための追加ビルドステップは不要で、既存のエージェント環境の一部として動作します。ただし、生成された HTML を表示する方法（例：ファイルとして保存してブラウザで開くなど）は別途用意する必要があります。

基本的な呼び出しパターン

このスキルは、次の形式の引数を期待します。

• [topic] [slide-count]

また、create サブコマンドをサポートしています。エージェントへの典型的な指示は、次のような形になります。

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

内部的なルーティングは、SKILL.md に定義されているとおり、次のフローで行われます。

1. $ARGUMENTS からサブコマンドをパースする（先頭の単語、例: create）。
2. 対応するリファレンスファイルを読み込む（create の場合は references/create.md）。
3. 残りの引数（トピックとスライド枚数）を使って、デックの構造とコンテンツを生成する。

新しいデックを作るときの推奨ワークフロー

1. 目的とオーディエンスを定義する

ckm:slides を呼び出す前に、次の点を整理しておきます。

• 目的（例：シードラウンドの資金調達、エンタープライズ案件のクロージング、取締役会のアップデート）
• 主なオーディエンス（VC、見込み顧客、経営陣、社内チーム、カンファレンス参加者 など）
• おおよそのスライド枚数

このコンテキストを引数として渡すことで、スキルが適切な構造やパターンを選びやすくなります。

2. スライド戦略を指定するか、スキルに選ばせる

references/slide-strategies.md には、次のような代表的なデック構成が 15 種類掲載されています。

• YC Seed Deck（10〜12 枚）
• Sales Pitch（7〜10 枚）
• Product Demo（5〜8 枚）
• QBR、Board Meeting、Webinar、Workshop など

使い方としては、次のどちらかです。

• 「Use a YC seed deck structure」のように、使いたい構成を明示的に指定する
• 目的とオーディエンスに基づき、エージェントに最適な戦略を推定させる

各戦略には、スライドごとのアウトラインと、ストーリーの一貫性を保つための感情の変化（例：curiosity → frustration → hope → confidence → trust → urgency）が定義されています。

3. 説得力のあるコピーをフレームワークで生成する

references/copywriting-formulas.md には、次のような 25 個のコピーライティングフレームワークが収録されています。

• 問題スライド向けの PAS（Problem–Agitate–Solution）
• フックや CTA 向けの AIDA（Attention–Interest–Desire–Action）
• 機能紹介やプロダクトスライド向けの FAB（Features–Advantages–Benefits）
• 緊急性・変化を演出する Cost of Inaction や Before–After–Bridge

スキルはこれらのフレームワークを使い、スライドごとの見出し、本文コピー、CTA を構造化します。以下の点をエージェントに指示するとより効果的です。

• スライドタイプごとに適切なフレームワークを対応付ける
• 用意されているテンプレート文を出発点として利用する
• 自社ブランドやオーディエンスのリテラシーに合わせてトーンを調整する

4. レイアウトパターンとアニメーションを適用する

references/layout-patterns.md には、次のような CSS ベースのレイアウトパターンが 25 種類定義されています。

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

各レイアウトには、次の要素が含まれます。

• 推奨されるユースケース
• 例示的なアニメーションクラス（animate-fade-up、animate-stagger、animate-scale など）
• 代表的なスライドタイプ向けの CSS 構造例

デック生成を指示する際には、次のような要望を含めるとよいでしょう。

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

これにより、デック全体のビジュアルが一貫し、CSS を使ったテーマ変更もしやすくなります。

5. HTML スライドテンプレートを使う

references/html-template.md には、デック全体の HTML 構造がまとめられており、次のような要素が含まれています。

• CDN 経由で Chart.js を読み込む <head>
• :root の CSS variables を用いたトークンベースのテーマシステム
• 16:9 アスペクト比に合わせた .slide-deck コンテナと .slide 要素
• タイポグラフィとレイアウトのベーススタイル

典型的なワークフローは次のとおりです。

1. 提供されている HTML テンプレートをベースとして使用する。
2. 生成されたスライドを、適切なクラスを付与した <section> または <div> として挿入する。
3. embed-tokens.cjs などから取得した design tokens を :root ブロックに貼り付ける。
4. Chart.js 用の <canvas> 要素と、それに対応するチャート用 JavaScript を追加する。

スキルは次のような出力形態に対応できます。

• HTML ファイル全体のドラフト
• 自前のシェルテンプレートに貼り付けるための <body> 配下のスライド構造のみ

6. Chart.js でデータビジュアライゼーションを組み込む

メトリクスダッシュボード、トラクションスライド、QBR、ボードレポートといったデータ中心のデック向けに、ckm:slides は html-template.md に示されているとおり Chart.js との連携を前提に設計されています。

エージェントには次のような指示が可能です。

• 該当するスライドレイアウト内にチャート表示用の <canvas> 要素を作成する
• 測定指標に基づき、Chart.js のコンフィグオブジェクト（datasets、labels、colors など）案を提案させる
• ページ読み込み時にチャートを初期化する <script> ブロックを埋め込む

実際のデータの投入やチャート設定の最終確認はあなたの責任で行う必要がありますが、スキル側が構造的な下地を用意してくれます。

7. エクスポートとプレゼンテーション

デック用の HTML が完成したら、次のステップで利用します。

1. プロジェクト内に .html ファイルとして保存する。
2. ブラウザで直接開くか、任意の Web サーバー経由で配信する。
3. キーボード操作や、必要に応じて自作の JS を使ってスライドを切り替える。

PowerPoint に慣れたステークホルダーと共有する必要がある場合は、ブラウザを画面共有したり、ブラウザの印刷機能を使ってスライドを画像／PDF としてエクスポートしたりできます。

ckm:slides をうまく使うためのコツ

• 可能な限り、スライド枚数や構成について明示的に指示する。
• デックで最終的にどんな意思決定（資金調達、購入、合意形成など）を促したいのかをエージェントに伝える。
• どのスライドにチャートを入れるか、またチャートの種類（line、bar、pie など）を指定する。
• スライド番号、タイトル、目的、レイアウト、主要なコピーライティングフレームワークを一覧にしたテーブルの作成を依頼し、本格的なコンテンツ生成前にプランをレビューする。

FAQ

ckm:slides は具体的に何を生成しますか？

ckm:slides は、次の内容を生成するよう設計されています。

• スライドごとの目的とナラティブアークを含むアウトライン
• PAS、AIDA、FAB などのフレームワークを用いた各スライドのドラフトコピー
• layout-patterns.md に定義されたパターンに基づくレイアウト提案
• レスポンシブかつトークンベースのスライドデック用 HTML/CSS 構造
• データ可視化スライド向けの Chart.js のスキャフォールディング

具体的なアウトプットはエージェントへのプロンプト次第ですが、核となるのは「ただのテキスト」ではなく「戦略的な HTML スライドコンテンツ」です。

ckm:slides は PowerPoint（.pptx）ファイルを作成できますか？

いいえ。ckm:slides は HTML スライドデックに特化しています。HTML、CSS、Chart.js を利用して、ブラウザで表示できるプレゼンテーションを生成します。.pptx ファイルが必要な場合は、このスキルの外でエクスポートや変換の手段を別途用意する必要があります。

自社ブランドに合わせてデザインをカスタマイズできますか？

はい。html-template.md では、CSS variables を使った design tokens アプローチを採用しています。次のようなカスタマイズが可能です。

• :root に定義されているサンプルトークンを、自社のブランドカラー、フォント、余白設定などに置き換える
• CSS クラスを拡張して、独自のレイアウトやアニメーションを追加する
• ロゴ、フッター、ウォーターマークなど独自コンポーネントを追加する

ckm:slides は構造化されたスタート地点を提供し、ブランドらしさの実装はあなた側で自由に行えます。

create サブコマンドはどのように動作しますか？

create サブコマンドは、references/create.md で説明されているメインのエントリーポイントです。create に引数を渡して呼び出すと、スキルは次のように動作します。

1. <task>$ARGUMENTS</task> を、作成したいデックの説明として扱う。
2. レイアウトパターン、コピーライティングのフレームワーク、スライド戦略、HTML テンプレートといったナレッジベースを利用し、そのタスクに沿った説得力のあるデックを設計する。

通常、CLI から create を直接叩くのではなく、エージェントに対して「ckm:slides スキルを create サブコマンド付きで使うように」指示する形で利用します。

ckm:slides が特に得意なデックの種類は？

slide-strategies.md に定義されたパターンに基づき、ckm:slides は特に次のようなデックに適しています。

• 資金調達デック（YC Seed Deck、Series A）
• セールスピッチやプロダクトデモ
• Quarterly business review（QBR）やボードアップデート
• Webinar、Workshop、カンファレンストーク
• ケーススタディや競合分析プレゼンテーション

これらはいずれも、明確なストーリーと説得力のあるコピー、そしてチャートが重要になる領域であり、まさにこのスキルのナレッジベースが最適化されている領域です。

ナビゲーションやキーボード操作はどう扱えばよいですか？

ベースの HTML テンプレートは、レイアウトとビジュアルにフォーカスしています。ナビゲーション（矢印キーでの移動、クリックでのページ送り、進捗インジケーターなど）はリファレンスのスニペットでは完全には定義されておらず、実装はあなた側に委ねられています。例えば次のような方法があります。

• ArrowLeft / ArrowRight キー入力を検知して表示スライドを切り替える JavaScript を追加する
• URL ハッシュや data 属性を使ってアクティブなスライドを管理する
• 既存の HTML スライドショーフレームワークと統合する

ckm:slides はコンテンツと構造の設計を支援し、ナビゲーション動作はフロントエンド実装に委ねる設計になっています。

ckm:slides を使うのに JavaScript の知識は必要ですか？

基本的なフロントエンドの知識があると役立ちます。特に次のような場合です。

• HTML テンプレートを編集・拡張したい場合
• Chart.js のチャート設定やインタラクションを調整したい場合

とはいえ、ストーリー構成、レイアウト選定、コピーライティングパターンといった作業は非技術的な要素が中心です。開発者ではない方でも、最終的な HTML やチャートの仕上げを開発者と協業する形で十分活用できます。

利用可能なパターンや戦略を一覧で確認するには？

スキルのディレクトリ（通常は .claude/skills/slides）を開き、次のファイルを確認します。

• 全体の挙動、引数、ルーティングの概要：SKILL.md
• レイアウトや CSS 構造：references/layout-patterns.md
• ベースとなる HTML スライドデックのシェル：references/html-template.md
• 説得力のあるコピーのフレームワーク：references/copywriting-formulas.md
• 完成されたデック構造と感情の起伏：references/slide-strategies.md

これらのファイルを一通り確認することで、ckm:slides でできることが明確になり、デック生成時により精度の高いプロンプトを設計しやすくなります。