lewislulu/html-ppt-skill

解決する課題

ビルドステップを必要とせず、プロフェッショナルで高品質な HTML プレゼンテーションを作成するための包括的なシステムを提供します。視覚的に魅力的でポータブル（静的な HTML/CSS/JS）なスライドを作成できるだけでなく、プレゼンターモード、多様なテーマ、シネマティックなアニメーションなど、重厚なプレゼンテーションソフトに通常見られる高度な機能を提供します。

仕組み

このプロジェクトは「AgentSkill」として設計されており、AI エージェントのランタイム（Claude Code、Cursor、Windsurf など）に統合して、エージェントが自動的にプレゼンテーションを作成できるようにします。テーマやレイアウトを CSS 変数で管理するトークン駆動型のデザインシステムを採用しています。

主な技術的特徴：

• プレゼンターモード: BroadcastChannel と iframes を使用した専用ウィンドウにより、視聴者用ビューとプレゼンター用のスクリプト、タイマー、プレビューをリロードなしで同期します。
• 静的アーキテクチャ: デッキは純粋な HTML/CSS/JS で構成されており、デプロイが容易でオフラインでも動作します（Google Fonts のフォールバック付き）。
• テンプレートシステム: 36 種類のテーマ、36 種類のページレイアウト、15 種類のフルデッキテンプレートが用意されており、単純な HTML 属性や CSS リンクで切り替え可能です。

対象ユーザー

• AI エージェント: 構造化されたプロフェッショナルなスライドデッキを生成する必要があるエージェントを構築する開発者。
• プレゼンター: PowerPoint や Keynote に代わる、軽量でコードベースのプレゼンターモード内蔵ツールを求める個人。
• 開発者: 静的ファイルとデザインシステムアプローチによるプレゼンテーション作成を好む方。

ハイライト

• 豊富なライブラリ: 36 種類のテーマ、36 種類のレイアウト、15 種類のフルデッキテンプレートを収録。
• シネマティックなアニメーション: 合計 47 種類のアニメーション（27 種類の CSS ベースのエフェクトと 20 種類の高性能 Canvas FX：粒子爆発、マトリックス風の雨など）。
• 本格的なプレゼンターモード: 現在/次のスライドのマグネットカード、スピーカーノート、タイマー機能を搭載。
• ビルドステップ不要: 静的ファイルとして即座に動作し、コンパイルやバンドルは不要です。
• AI エージェント対応: npx skills add で簡単にインストールでき、さまざまな AI コーディングエージェントと互換性があります。