埋め込みCSSとレスポンシブなキーボード操作可能なスライド遷移を備えた、洗練された自己完結型HTMLスライドデッキを生成するように設計されたAIコーディングエージェントスキルです。
インストール＆ダウンロード
1. ClawHub CLI
レジストリから直接スキルをインストールする最速の方法です。
npx clawhub@latest install visual-html-presentations
2. 手動インストール
スキルフォルダを以下のいずれかの場所にコピーしてください
~/.openclaw/skills/ <project>/skills/ 優先順位：ワークスペース > ローカル > バンドル
3. プロンプトのインストール
このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。
Clawhubを使って visual-html-presentations をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。
ダウンロードをご希望ですか？
ZIPアーカイブで生のスキルファイルを取得します。
Visual HTML Presentations とは？
Visual-html-presentationsスキルを使用すると、AIエージェントはアイデア、アウトライン、ドキュメント、またはトランスクリプトを即座に、魅力的なインタラクティブなHTMLプレゼンテーションデッキに変換できます。外部依存関係を排除することで、このスキルは生成されたプレゼンテーションが完全に自己完結し、軽量で、最新のデスクトップまたはモバイルブラウザでローカルに開くことができることを保証します。
ペースの速いチームミーティング、技術トレーニングワークショップ、録画されたビデオナレーションなど、どのような状況でも、このツールは美的シンプルさと技術的な実行力のバランスを取ります。構造化された空白、強力なタイポグラフィの階層、直感的なキーボードナビゲーションといったクリーンなデザイン原則を適用しながら、気を散らすような肥大化したデザイントレンドを排除します。
Visual HTML Presentations のユースケース
- 静的コンテンツのスライド変換: 未加工のmarkdownメモ、トランスクリプト、テキストレポートを構造化されたスライドナラティブに変換します。
- 迅速なクライアント向けピッチデッキ作成: 重いデザインソフトウェアを起動することなく、迅速でプロフェッショナルなWebベースのプレゼンテーションを生成します。
- ビデオ用スライドコンテンツの構築: 画面録画、リール、ビデオナレーションに最適化された、高コントラストでテキストの少ないレイアウトを作成します。
- カリキュラムおよびトレーニング資料の作成: 技術チュートリアル、ワークショップ、またはクラスに、明確な視覚セクションと明示的なスライド番号を付けてパッケージ化します。
Visual HTML Presentations の仕組み
- 入力分析: エージェントがユーザーの未加工メモ、アウトライン、またはドキュメントを読み取り、主要メッセージ、ターゲットオーディエンス、および目的のトーンを特定します。
- ナラティブシーケンシング: タイトルスライドと問題提起から、メインの主張、最終的な行動喚起まで、論理的なスライドの流れを構築します。
- レイアウトとスタイルの選択: このスキルは、コンテンツに適したカラーパレットを選択し、スライド全体で構造的なレイアウトパターンを変化させて視覚的な興味を維持します。
- コード生成: プレゼンテーションのナビゲーションを駆動するための完全に埋め込まれたCSSスタイルとJavaScriptロジックを備えた単一のHTMLファイルがコンパイルされます。
- 検証チェック: エージェントがフォントサイズの制限、レイアウトのレスポンシブ性、テキストの折り返し、キーボードナビゲーションコントロールを確認します。
- ローカルデリバリー: 最終的なコードはローカルファイルパスに直接書き込まれ、チャット内で包括的なmarkdown実行サマリーが提供されます。
Visual HTML Presentations のセットアップ
Openclaw Skillsのこれらの機能を活用するには、スキル構成がローカルプロジェクトワークスペースに正しくリストされていることを確認してください。
ネイティブWeb標準に依存しているため、専門的なサードパーティのグローバル依存関係は必要ありません。スキルが有効になっている状態でエージェントプラットフォームを実行するだけです：
# ターミナルワークスペースから直接プレゼンテーション生成をトリガー
openclaw run "Create an HTML presentation from project_spec.md"
Visual HTML Presentations のデータスキーマとタクソノミー
このスキルは、プロジェクトが複雑になるのを防ぐために、クリーンで分離されたスキーマを使用してアセットを生成および追跡します。デフォルトでは、アセットが明示的に要求されない限り、単一ファイル配信モデルで動作します。
出力アーキテクチャ
| ファイルアセット | タイプ | 説明 |
|---|---|---|
*.html |
出力 | すべてのHTMLスケルトン構造、埋め込み <style> シート、およびインタラクションスクリプトを含む自己完結型プレゼンテーション。 |
| ローカルアセット | ディレクトリ | (オプション) ユーザーが埋め込みオプションの代わりにローカル画像パスや専用フォントパッケージを明示的に要求した場合にのみ作成されるローカルディレクトリ。 |
Markdown戻り値のタクソノミー
生成されたすべての出力は、以下の分類フレームワークを使用してユーザーに要約されます：
- サマリー: 目標、ターゲットオーディエンスの想定、およびデザインスタイルの選択をキャプチャします。
- 構造: 特定のタイトルを詳細に記述するスライドごとの順次インデックス。
- 結果: 新しいプレゼンテーションをホストするローカルファイルシステムパス。
- 検証: ローカルレンダリングテストおよびナビゲーション機能に関するレポート。
- 残り: 不足しているアセット、必要なブランド追加、またはオプションのクレーム検証を呼び出します。
Visual HTML Presentations の高度な機能
- コンテキスト認識プレゼンテーションモード: ビデオモード（高コントラスト、超低ワードカウント、16:9制限）と トレーニングモード（スライド番号、要約セクションの区切り、より高いテキスト密度を含む）の間でレイアウトルールを動的に切り替えます。
- 埋め込みキーボードおよびナビゲーションコントロール: ブラウザ間の矢印キーバインディング（
Left/Right）とともに、表示される視覚的なUIドットまたはナビゲーション矢印を設定します。 - ローカルファイル分離（プライバシー優先）: 厳格なローカルセキュリティモデルの下で動作し、プレゼンテーションコード、企業資産、またはブランドデータが明示的な許可なしに外部Webホスティングプロバイダーに公開されたり、漏洩したりしないようにします。
- PDF印刷に適したCSS: 埋め込みスタイル内で特別なメディア印刷クエリフックをサポートし、ブラウザの印刷メニューを通じたレイアウトエクスポートをクリーンかつ予測可能にします。
SKILL.md
ローディング
関連するOpenclawのスキル
ヒューマナイズ・ライティング・エディター
硬い、機械的、あるいはAI生成されたコピーを、自然で信頼性が高く、文脈に適した人間らしい文章にリライトする専用のテキスト編集ユーティリティです。
Factual Claim Verifier
AIエージェントが公開前に下書き、記事、製品コピーをレビューするための、高度なファクトチェックおよび主張検証スキルです。
Dumbing Us Down
家族や教育者が義務教育の欠陥を診断し、システムから脱却し、John Taylor Gattoの記念碑的な著作に基づいて自主学習を実装できるように設計された実行可能なAIコーディングエージェントスキルです。
Hanfeizi Wisdom
Hanfeizi Wisdom は、組織管理、体系的な規則、および権力バランスの決定的な法家フレームワークを AI agent プロトコルにもたらします。
Process Interviewer
自動化や構築を開始する前に、ユーザーへのインタビューを通じて複雑なワークフローをマッピング、構造化、およびドキュメント化するインタラクティブな発見スキルです。
WeChatミニプログラム開発実現可能性意思決定アシスタント
自動市場調査、WeChat指数分析、専門的なHTML実現可能性レポートを通じて、WeChatミニプログラムのコンセプトを即座に評価します。
ABN ビジネス検証
オーストラリアの事業者登録所 (ABR) を通じて、オーストラリアの企業、ABN、ACN、および GST 登録ステータスを直接検証するためのリアルタイムの読み取り専用スキルです。
特徴*
