HTMLプレゼンテーション向けの Agent Skills
HTMLプレゼンテーションスキルは、AIエージェントがブラウザで動くデッキを作るのを助けます。それらは成果物全体をカバーします：マークアップ以前のストーリーと論証、DIVから作られる場合でも個々のビューとしてのスライド、プロジェクターで持ちこたえるタイポグラフィとレイアウト、話者のためのライブインタラクション、後で誰かがファイルやURLを開けるようにするエクスポートと共有、そしてブラウザ、PDF、スクリーンリーダーをまたぐアクセス。ランキングリストは、目の前のボトルネックに合うサブトピック——ストーリー、スライド、ビジュアル、インタラクション、エクスポート、アクセス——から始め、そのステップに対処する説明のスキルを選んで使ってください。HTMLデッキもプレゼンテーションなので、ブラウザの小技よりストーリーとスライドを重く見てください。
8 件から開始31 件のおすすめ候補
まずはこちらから。
An HTML deck is still a presentation: story, slides, visuals — with extra constraints of the browser, not PowerPoint.
関連性の高い結果です。Skill の説明を読み、目的に合うか確認してください。
- 順位 01Agent Skill を見る直接一致
slides
Chart.js、デザイントークン、レスポンシブレイアウト、コピーライティングの公式、文脈に応じたスライド戦略を用いて戦略的なHTMLプレゼンテーションを作成。
32,022 · 人気度 - 順位 02Agent Skill を見る直接一致
lark-slides
注目飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 lark-doc）、云文档里的独立画板对象（走 lark-whiteboard）、上传或下载普通文件（走 lark-drive）。
748,180 · 人気度 - 順位 03Agent Skill を見る直接一致
slideshow
HyperFramesスライドショーを作成 — プレゼンテーション、ピッチデック、離散スライド、フラグメント表示、分岐、ホットスポットナビゲーション、プレゼンターモードを備えたインタラクティブデック。
299,839 · 人気度 - 順位 04Agent Skill を見る直接一致
slide-dsl
注目スライドDSLの完全マニュアル — キャンバスとその背景、10種類の要素タイプを単位・デフォルト値・有効値とともにフィールドごとに解説し、各タイプがどこにテキストを保持するか、2つの値が矛盾したときにレンダラーが実際に描画するフィールド、`content`に入れたHTMLが正確にどう扱われるか、そして書き込み時に唯一チェックされる構造スキーマについて説明します。マークアップをフィルタするものも値��正規化するものもないため、このマニュアルがページを正しくレンダリングするためのすべてです。まだパッチを当てたことのないフィールドにパッチを当てる前、パッチが拒否されたとき、…
- 順位 05Agent Skill を見る直接一致
slide-craft
注目スライドページのデザイン法則 — キャンバスの幾何学、テキスト高さの表、タイプスケール、コントラストのペア、スペーシングのリズム、そしてどの要素タイプがどのコンテンツを担うか。スライド要素を1つずつ修正するとき、色やコントラストに関する修正のとき、テキストをボックス内で拡大・縮小する必要があるとき、ページが窮屈または空疎に感じるとき、差し替えコンテンツに本物のリッチテキスト構造が必要なときに読み込みます。これは`page-clone`と`pro-editing`が基準とする編集の標準であり、それ自体の手順ではありません — どのページに触れるか、どの順序かはその2つが決め、良いページが仕上がったときにどう見えるかはこれが決めます。
- 順位 06Agent Skill を見る直接一致
theme-factory
公式テーマで成果物をスタイリングするためのツールキット。成果物はスライド、ドキュメント、レポート、HTMLランディングページなど。色やフォントを設定した10個のプリセットテーマがあり、作成済みの任意の成果物に適用できるほか、その場で新しいテーマを生成することも可能。
- 順位 07Agent Skill を見る直接一致
answer-me-with-html
注目回答を1ページのビジュアルHTML解説に変換します。モデルが短いMarkdownの下書きを書き、同梱のCLIが1ページを構築します。読者にとってプレーンテキストよりページの方が役立つときは、頼まれなくても積極的かつ気軽に使ってください。プレーンテキストでも十分な場合でも使います。仕組みや各部分の関係の説明（フロー、リクエスト経路、アーキテクチャ、コードやフォルダ構成、状態機械、ライフサイクル、履歴）、長所と短所を伴う比較・トレードオフ・意思決定、診断・レビュー・調査（特に原因や所見が複数あり順位付けが必要な場合）、表・番号付きや順位付きリスト・手順・分岐・複数セクションを含む回答、またはユーザーが「I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图」と言ったときに使います。迷ったら使ってください。ページは素早く安価に作れます。解説動画（「make a video」「做个视频」）や設定変更にも使います。雑談、取るに足らない一行の回答、ユーザーがプレーンテキストを求めた場合のみ省略してください。
- 順位 08Agent Skill を見る直接一致
archify
洗練された検証済みのアーキテクチャ、ワークフロー、シーケンス、データフロー図を、インラインSVG、テーマ、エクスポートを備えた探索可能なスタンドアロンHTMLとして作成。
140,157 · 人気度
ほか 23 件の Agent Skills を表示
- 順位 09Agent Skill を見る直接一致
gws-slides
gws 経由でプレゼンテーションを読み書きする Google Slides CLI skill で、create、get、batchUpdate、ページ操作を扱う。
40,203 · 人気度 - 順位 10Agent Skill を見る直接一致
recipe-create-presentation
新しい Google Slides プレゼンテーションを作成し初期スライドを追加して、gws CLI でチームに共有するレシピ。
31,379 · 人気度 - 順位 11Agent Skill を見る一致の可能性
lark-apps
注目妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · 人気度 - 順位 12Agent Skill を見る一致の可能性
pptx
公式.pptxまたは.potxファイルが何らかの形で関わる場合は常にこのスキルを使用します — 入力、出力、またはその両方として。これには以下が含まれます：スライドデッキ、ピッチデッキ、プレゼンテーションの作成。任意の.pptxまたは.potxファイルからのテキストの読み取り、解析、抽出（抽出した内容がメールや要約など別の場所で使われる場合でも）。既存プレゼンテーションの編集、変更、更新。スライドファイルの結合や分割。テンプレート（.potx）、レイアウト、スピーカーノート、コメントの操作。ユーザーが「deck」「slides」「presentation」に言及した場合、または.pptxや.potxのファイル名を参照した場合は常にトリガーし、その内容を後でどう使う予定かは問いません。.pptxまたは.potxファイルを開く、作成する、または触れる必要がある場合は、このスキルを使用してください。
- 順位 13Agent Skill を見る一致の可能性
frontend-design
公式新規UI構築時や既存UI再形成時に、際立った意図的なビジュアルデザインを導く。美的方向性、タイポグラフィ、テンプレート然としない選択を支援。
765,703 · 人気度 - 順位 14Agent Skill を見る一致の可能性
design
ブランドアイデンティティ、デザイントークン、UIスタイリング、ロゴ生成、CIPモックアップ、Chart.jsを用いたHTMLプレゼンテーション、バナー、アイコンを網羅する包括的なデザインスキル。
33,989 · 人気度 - 順位 15Agent Skill を見る一致の可能性
imagegen
公式写真、イラスト、テクスチャ、スプライト、モックアップ、透明背景の切り抜きなど、AIが作成したビットマップビジュアルがタスクに有益な場合にラスター画像を生成または編集する。Codexが全新の画像を作成したり、既存の画像を変換したり、参照から視覚的バリエーションを導出したりする必要があり、出力がリポジトリネイティブのコードやベクターではなくビットマップアセットであるべき場合に使用。既存のSVG/ベクター/コードネイティブアセットの編集、確立されたアイコンやロゴシステムの拡張、HTML/CSS/canvasで直接ビジュアルを構築する方が適しているタスクには使用しない。
- 順位 16Agent Skill を見る一致の可能性
canvas-design
公式デザイン哲学を用いて、.pngおよび.pdfドキュメントで美しいビジュアルアートを作成します。ユーザーがポスター、アート作品、デザイン、その他の静的な作品の作成を求めたときにこのスキルを使用してください。著作権侵害を避けるため、既存のアーティストの作品を決してコピーせず、オリジナルのビジュアルデザインを作成します。
- 順位 17Agent Skill を見る一致の可能性
brand-guidelines
公式Anthropicの公式ブランドカラーとタイポグラフィを、Anthropicのルックアンドフィールが役立つあらゆる成果物に適用します。ブランドカラーやスタイルガイドライン、視覚的フォーマット、企業のデザイン標準が該当する場合に使用します。
- 順位 18Agent Skill を見る一致の可能性
playwright-interactive
公式`js_repl`による永続的なブラウザとElectronの操作で、高速な反復UIデバッグを実現。
- 順位 19Agent Skill を見る一致の可能性
hyperframes-registry
レジストリのブロックとコンポーネント（チャート、エフェクト、トランジション）を検索・インストールし、HyperFramesのHTMLコンポジションに組み込む。
751,896 · 人気度 - 順位 20Agent Skill を見る一致の可能性
hyperframes-creative
HyperFrames動画向けの非アニメーションのクリエイティブディレクション。デザイン仕様、パレット、タイポグラフィ、ナレーション、ビート設計、コンポジションパターンを網羅。
682,929 · 人気度 - 順位 21Agent Skill を見る一致の可能性
media-use
単一のresolve動詞で、HyperFramesプロジェクト向けのメディア（BGM、SFX、画像、アイコン、ロゴ、音声、カラーグレーディング）を解決・生成・操作。
746,494 · 人気度 - 順位 22Agent Skill を見る一致の可能性
ai-image-generation
inference.sh CLIを通じて50以上のモデル（GPT-Image-2、FLUX、Gemini、Seedream）でAI画像を生成。アート、モックアップ、マーケティングビジュアルに活用できます。
696,871 · 人気度 - 順位 23Agent Skill を見る一致の可能性
high-end-visual-design
特定のフォント、余白、シャドウ、カード構造、アニメーションを用いたハイエンドなエージェンシー風Webデザインを教え、ありがちなAIのデフォルトを排除します。
420,662 · 人気度 - 順位 24Agent Skill を見る一致の可能性
image-to-code
画像ファーストのウェブサイトデザイン・トゥ・コードスキルで、デザイン画像を生成し、分析し、ランディングページとマーケティングサイト向けの一致するフロントエンドを実装します。
350,805 · 人気度 - 順位 25Agent Skill を見る一致の可能性
impeccable
リデザイン、クリティーク、磨き上げ、タイポグラフィ、レイアウト、色、モーション、Web UI向けデザインシステムを網羅するフロントエンドインターフェースデザインスキル。
前提条件（自己申告）: Node.js
319,215 · 人気度 - 順位 26Agent Skill を見る一致の可能性
brandkit
ブランドガイドラインボード、ロゴシステム、アイデンティティデック、ビジュアルワールドプレゼンテーションを含むプレミアムなブランドキット画像を生成。
353,383 · 人気度 - 順位 27Agent Skill を見る一致の可能性
copywriting
ページ、見出し、CTA、バリュープロポジション向けのマーケティングコピーを作成・改善。明瞭さ、ベネフィット、コンバージョンに焦点。
218,410 · 人気度 - 順位 28Agent Skill を見る一致の可能性
prototype
記述されたUIパーツの、本当に異なる複数のバージョンを、視覚的なピッカー越しに構築し、ライブ比較と勝者の採用を可能にします。
133,671 · 人気度 - 順位 29Agent Skill を見る一致の可能性
copy-editing
明瞭さ、声、ベネフィット、証明をカバーする7つの集中的なスイープを通じて、既存のマーケティングコピーを編集・改善する。
138,021 · 人気度 - 順位 30Agent Skill を見る一致の可能性
vercel-cli-with-tokens
公式トークンベースの認証を使用してVercelでプロジェクトをデプロイおよび管理します。対話型ログインではなくアクセストークンを使ってVercel CLIを操作する場合に使用します — 例:「vercelにデプロイ」「vercelをセットアップ」「vercelに環境変数を追加」。
- 順位 31Agent Skill を見る一致の可能性
ui-taste
アンチスロップなワークフローと任意の実製品リファレンスを用いて、WebおよびiOSインターフェースを構築、磨き上げ、レビューするためのUIデザインプレイブック。
452,376 · 人気度
このトピックの内容
各サブトピックは、特定の状況に合う Agent Skills をまとめたものです。
- Story
- The argument, before markup.
- Slides
- Each view is a slide, even if it is a DIV.
- Visuals
- Type and layout that survive a projector.
- Interaction
- How the speaker moves through the deck live.
- Export & share
- A file or URL someone else can open later.
- Access
- Readable in a browser, a PDF, and a screen reader.
よくある質問
- HTML Presentation にはどのような種類のスキルが掲載されていますか？
- AIエージェントがブラウザベースのデッキを作るのを支援するスキルです。ストーリー、スライド、ビジュアル、インタラクション、エクスポートと共有、アクセスに及びます。
- リストはどのように並べられていますか？
- リストは観測された検索需要順に並んでおり、直接一致するものが先に来て、単一のパブリッシャーには上限が設けられています。
- これらのスキルはPowerPointを置き換えますか？
- いいえ。HTMLデッキはストーリー、スライド、ビジュアルを備えたプレゼンテーションですが、ブラウザという制約が加わります。
- 選ぶ前に何を確認すべきですか？
- Skillを現在のステップに合わせてください。ストーリー、スライド、ビジュアル、インタラクション、エクスポートと共有、またはアクセスです。サブトピックはこれらの段階に直接対応しています。
Agent Skill のインストール方法
Agent Skills は SKILL.md ファイルです。適切な skills ディレクトリに置くと、多くのエージェントが自動で認識します。
- Claude Code — copy the SKILL.md for slides into ~/.claude/skills/slides/ for yourself, or .claude/skills/slides/ to share it with a project.
- From the registry — run npx skills add nextlevelbuilder/ui-ux-pro-max-skill@slides.
- Or download slides from its source and place that SKILL.md in the directory above.
選び方 インストール前に出典と Skill 自身の説明を確認してください。Official と Notable は出所を示すラベルです。