frontend-slides (Claude Skill) — インストール & ライブデモ

なぜ使うのか

主な機能

スライドは HTML です - バージョン管理可能、差分可能
CSS トランジションとアニメーション (壊れやすい Keynote ファイルなし)
適切な構文強調表示を備えたコードスニペット
Responsive — works on laptop → projector → phone
バックアップのために PDF にエクスポート

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： frontend-slides

概要から 20 分間の技術トーク資料を作成する

👤 ミートアップ/カンファレンスでプレゼンテーションを行う開発者 ⏱ ~90 min intermediate

使うタイミング： 概要と48時間があります。 Keynote テンプレートと格闘する必要はありません。

フロー

足場

Use frontend-slides. From /talks/outline.md, generate a deck in /talks/deck/. One HTML per slide pattern, shared CSS.✓ コピーしました

→ Folder with index.html + slide assets; opens in browser
ポーランド語のコードスライド

For code slides, use my repo's actual style (look at src/example.ts). Add syntax highlighting.✓ コピーしました

→ Code renders with proper highlighting and your formatting
PDFバックアップ

Export to PDF for the "projector won't connect" scenario.✓ コピーしました

→ PDF saved alongside HTML

結果： git で反復処理し、GitHub Pages でホストし、ブラウザから提示できるデッキです。

注意点

Venue WiFi is bad and your deck has remote assets — Inline/embed everything; test offline before the talk

組み合わせ： ファイルシステム

コードと UI がスライドに埋め込まれたデモデッキ

👤 プロトタイプを見せる創設者 ⏱ ~120 min intermediate

使うタイミング： 実際に製品を操作できるスライドがミッドデッキに必要です。

フロー

レイアウト

Generate a 10-slide pitch deck. On slide 4, embed an iframe of the product demo. On slide 7, embed a live CodePen.✓ コピーしました

→ Deck has iframes at the right slides
反応性をリハーサルする

Re-render for a 1024x768 projector. Does anything break?✓ コピーしました

→ Breakpoint fixes applied

結果： デッキとは思えない、製品のようなデッキです。

注意点

Iframe CSP blocks embed — Host the demo under a domain that allows framing, or use a recording

組み合わせ

他のMCPと組み合わせて10倍の力を

frontend-slides-skill + filesystem

Version-control the deck alongside your repo

/talks/2026-05-conf/ にスキャフォールディングしてコミットします。✓ コピーしました

frontend-slides-skill + github

Deploy via GitHub Pages

このデッキを gh-pages ブランチにプッシュし、URL を表示します。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
scaffold_deck	outline.md	任意のデッキの開始
add_slide	title, content	スライドを追加する
pdf_export	deck/	バックアップ成果物

コストと制限

運用コスト

APIクォータ: N/A
呼び出しあたりのトークン: デッキサイズに比例
金額: Free
ヒント: 最初にスケルトンを生成してから、1 回の巨大なパスではなくスライドごとに磨きをかけます

セキュリティ

権限、シークレット、影響範囲

最小スコープ： filesystem-write

認証情報の保管： None

データ送信先： なし;あなたのデッキはリモートアセットを参照している可能性があります

トラブルシューティング

よくあるエラーと対処法

Safari ではトランジションが機能しない

スキルドキュメントのブラウザ互換性表を確認してください。デフォルト設定は接頭辞付きのプロパティを使用します

コード構文の強調表示がありません

バンドルされた Prism/Shiki にはアセットの読み込みが必要です - ホスト時に相対パスが解決されることを確認してください

PDF エクスポートのレイアウトがマングルされる

印刷には Chrome ヘッドレスを使用します。スキルのデフォルトは風景プリセットの Puppeteer です。

代替案

frontend-slides 他との比較

代替案	代わりに使う場面	トレードオフ
reveal.js / Slidev	完全なフレームワークが必要であり、その構成に慣れている	さらなる機能;もっと学ぶ
Keynote / PowerPoint	企業設定にはファイルベースのデッキが必要です	ウェブネイティブではありません。共有するのが難しい

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る