01
このSkillでできること
- ✓HTMLプレゼンテーションの新規作成
- ✓PowerPointからWebスライドへの変換
- ✓CSS・JSによるアニメーション設計
- ✓PDF出力やURLデプロイの準備
02
使い方
01
STEP 1
読み上げ中心か閲覧中心かを決める
02
STEP 2
1920×1080の固定ステージで各スライドを作る
03
STEP 3
CSS変数、文字、背景、動きを一貫設計する
04
STEP 4
必要に応じてPPTX変換やPDF出力を行う
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/zarazhangrui/frontend-slides手動でインストールする
README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。
mkdir -p ~/.claude/skills/frontend-slides/scripts
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
読み上げ中心の16:9 HTMLプレゼンを、個性的な配色と段階表示アニメーションで作成してください。出力例を見る
単一HTMLのスライドデッキ、固定ステージ、スライド切替、アニメーション。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- shell: lides to a PDF for email, Slack, Notion, or printing: ```bash bash scripts/export-pdf.sh ./my-deck/index.html bash scripts/export-pdf.sh ./presentation
- network: [large code block omitted]text /plugin marketplace add https://github.com/zarazhangrui/frontend-slides [large code block omitted]text https://github.com/
- network: hangrui/frontend-slides [large code block omitted]text https://github.com/zarazhangrui/frontend-slides [large code block omitted]text /frontend-slides:fr
06