frontend-slides

frontend-slides スキルの概要

frontend-slides は、アニメーション豊かな HTML スライドデッキを作成したり、PPT/PPTX ファイルをブラウザ対応のプレゼンテーションに変換したりするための Claude Code スキルです。CSS を手で書いたり、フレームワークを組んだり、レイアウトやモーションを勘で調整したりせず、完成度の高いデッキを素早く作りたい人に最適です。主な用途はシンプルで、ラフな内容を、意図してデザインされた見た目で、ビューポートに収まり、抽象的な指示ではなく視覚的に反復改善できるプレゼンテーションへ変えることです。

frontend-slides はどんな人向けか

frontend-slides スキルは、講演用、ピッチ用、社内デモ用、個人ポートフォリオ用、または PowerPoint から Web への変換に必要なスライドデッキを作るときに使います。最終的なビジュアルの方向性は決めきれていないが内容は用意できる、という場合に特に有効です。ワークフロー自体が、視覚的な探索とスタイル選定を中心に組まれているからです。

frontend-slides の違い

frontend-slides は、依存関係なしの HTML、個性のあるスタイリング、そしてビューポートへの必須フィットを重視します。この組み合わせは、ビルド工程なしでブラウザ上で動く移植性の高い出力を求める場合や、いかにも「AIっぽい」無難なレイアウトを避けてプレゼン品質を確保したい場合に重要です。通常のプロンプトよりも方針が明確で、強いタイポグラフィ、統一感のある配色設計、スライドごとの内容管理へと自然に誘導します。

frontend-slides が向かないケース

要点だけの短い要約、表計算ソフト風のレポート、あるいは複雑な PowerPoint のインタラクションをそのまま保ったデッキが欲しいなら、frontend-slides は避けたほうがよいです。また、メッセージをスライド単位に分割できない場合も向きません。このスキルは、はみ出しをスクロールの問題ではなく、内容設計の問題として扱うためです。

frontend-slides スキルの使い方

frontend-slides をインストールする

frontend-slides の実用的なインストールは、通常 Claude Code の marketplace 設定から始めます。

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

環境が手動管理のスキル保存方式を使っている場合は、スキルを Claude Code の skills ディレクトリにコピーし、付属スクリプトも一緒に配置してください。リポジトリには .claude-plugin/ のマニフェストも含まれており、インストールフローが marketplace メタデータに依存している場合に役立ちます。

スキルが実際に使える入力を与える

frontend-slides をうまく使うには、まず形容詞ではなく内容を与えることが重要です。以下を明確に伝えてください。

• プレゼンテーションの目的
• 想定読者
• デッキの長さ
• スライド構成または元テキスト
• 必ず残したいブランド要素
• PPT/PPTX を変換するのか、ゼロから作るのか

弱いプロンプトの例: 「これをモダンにして」
強いプロンプトの例: 「B2B 開発者向けツールのための 7 枚構成の投資家向けイントロデッキを作成してください。トーンは自信のあるミニマルなものにし、ダークなエディトリアル調を使い、3 つの製品訴求は書かれている通り正確に保持してください。」

先に読むべきファイル

frontend-slides を理解するには、まず SKILL.md から始めて、続けて次のファイルを確認してください。

• ベースとなるスライド構造は html-template.md
• プリセット主導の方向づけは STYLE_PRESETS.md
• トーンに結びついた動きの選択は animation-patterns.md
• 妥協できないフィット条件は viewport-base.css
• 変換や書き出しを行うなら scripts/extract-pptx.py と scripts/export-pdf.sh

これらのファイルは README をざっと読むより重要です。スキルが何を最適化し、何を譲らないのかが分かるからです。

より良いデッキを作るワークフロー

Slide Decks 用の frontend-slides ワークフローで安定して良い結果を出すには、次の順序が有効です。

1. デッキの目的と対象読者を定義する
2. 内容をスライド単位に分割する
3. プリセットからビジュアルの方向性を選ぶ
4. 初稿を生成する
5. どのスライドを分割すべきか確認する
6. メッセージがビューポートに収まってから、最後に磨き込む

PowerPoint を変換する場合は、まず構造を守り、次にスタイルを整えてください。ゼロから生成する場合は、見た目を整える前にストーリーの流れを決めるのが先です。

frontend-slides スキルの FAQ

frontend-slides は PowerPoint 変換専用ですか？

いいえ。PowerPoint 変換は用途のひとつですが、frontend-slides はオリジナルの HTML プレゼンテーションにもよく合います。すでにアウトライン形式のスライド内容があるなら、PPTX を起点にしなくてもブラウザベースのデッキへ変換できます。

CSS や JavaScript を知っている必要はありますか？

始めるだけなら不要です。frontend-slides の使いどころは、実装の細部をスキル側が担ってくれる点にあります。トーン、ブランド、内容の境界を具体的に指定できるほど結果はよくなりますが、自分でデッキをコーディングする必要はありません。

これは通常のプロンプトと何が違うのですか？

通常のプロンプトでもスライド作成は頼めますが、frontend-slides には具体的なプレゼンテーションのワークフロー、依存関係なしの出力モデル、ビジュアルスタイルの探索、そしてビューポートに収めるためのルールがあります。インストールしやすさ、再現性、そしてブラウザ上で本当にスライドデッキらしく動く出力を重視するなら、この違いが効いてきます。

どんなときに frontend-slides を使うべきではありませんか？

長文スクロールが必要な内容、情報量の多い参照資料、あるいはプレゼンテーションを超えるインタラクティブなアプリ挙動が必要なら使わないでください。また、ビジュアルの方向性がほとんどない、ありふれたコーポレートスライドを望む場合にも不向きです。このスキルは、より個性のあるデザイン判断へ押し上げる前提で作られているからです。

frontend-slides スキルを改善する方法

元となる素材を強くする

品質を最も大きく左右するのは入力の質です。「見栄えよくして」ではなく、次のような情報を与えてください。

• 1 文で言える主張
• 正確なスライド枚数
• 話すためのメモやトークポイント
• ブランドカラー、または使ってはいけない色
• 逐語で残す必要がある文言

こうすることで、frontend-slides がメッセージに合わない構成を勝手に作るのを防げます。

ありがちな失敗を見抜く

主な失敗は、内容の詰め込みすぎ、曖昧な美学、変換時の前提不足です。1 枚が窮屈に見えるなら分割してください。ビジュアルの方向性がありきたりなら、プリセットや参照方向を明示してください。PPTX 変換で意味が崩れるなら、優先順位を指定します。まずテキストを保持し、次に画像を保持し、そのあとでレイアウトを簡略化し、最後にスタイルを整える、という順番です。

的を絞って反復する

初回出力のあとで frontend-slides の結果を良くするには、重要な点だけを修正します。

• 「3 枚目を 2 枚に分けてください。」
• 「配色をもっと暗くして、エディトリアル寄りにしてください。」
• 「コピーを短くし、見出しのコントラストを強めてください。」
• 「グラフのラベルは一字一句そのまま保持してください。」
• 「最後のスライドのモーションを減らしてください。」

こうした修正は、大きく作り直してほしいと頼むよりずっと効果的です。

リポジトリを判断材料として使う

導入前に frontend-slides を評価したいなら、テンプレート、プリセット、書き出しスクリプトを確認してから決めてください。そこを見ると、自分の環境に合うか、チームで保守できるか、そして frontend-slides ガイドが一般的なプロンプトより自分のデッキ作成習慣に合っているかが分かります。