CSS や JavaScript の知識がなくても、コーディングエージェントに任せてHTMLスライドを生成するためのSkill。Claude Codeプラグインとしてパッケージされており、SKILL.md を読めば Codex、Kimi Code、OpenCode、Gemini CLI などの他エージェントからも同じ手順で使える。
仕組み
言葉で美的好みを説明させるのではなく、最初に3つのビジュアルプレビューを生成して比較させる「show, don't tell」方式。決まった方向にだけ全スライドを書き起こすので、迷いが減る。
プレビューの内訳は次のとおり。
STYLE_PRESETS.md から1つの安全なプリセット
bold-template-pack/selection-index.json から少なくとも1つのboldテンプレート
- ワイルドカード1つ(別のboldテンプレートか、エージェントが自作するカスタム)
採用されたテンプレートだけ design.md をフル読み込みするので、コンテキストを浪費しない。
できること
- 内容ヒアリング → スタイル選択 → 完成HTML生成までを1コマンドで
- 既存PowerPointの変換(テキスト・画像・ノートを保持)
- 16:9固定、アクセシブル、コメント付きで後から手で直せるコード
- ビルドツール不要。CSS/JSインラインの単一HTMLとして出力
同梱スタイル
ダーク系(Bold Signal、Electric Studio、Creative Voltage、Dark Botanical)、ライト系(Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial)、特殊系(Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink)。さらに beautiful-html-templates から34種のbold design systemをオプションで読み込める。紫グラデーション×白文字のようなAI生成感は意識的に排除されている。
インストール
Claude Codeなら /plugin marketplace add https://github.com/zarazhangrui/frontend-slides のあとに /plugin install frontend-slides@frontend-slides で導入し、/frontend-slides:frontend-slides で呼び出す。手動インストールやリポジトリURLを別エージェントに渡す使い方も可能。