mcpField
H
html-ppt-retro-quarterly-review

html-ppt-retro-quarterly-review

github.com/nexu-ioドキュメント104.6k2.8k 回インストール今日更新
リポジトリ

html-ppt-retro-quarterly-review について

3枚構成の四半期レビューを、単体で動作する HTML プレゼンテーションとして作成するスキルです。付属テンプレートを使い、ビジュアル、操作性、情報構成を保ちながら調整します。

主な機能

  1. 013枚構成の四半期レビュー用テンプレート
  2. 02レトロな青・オレンジ・クリーム色のスタイル
  3. 03キーボードでのスライド移動と再起動
  4. 04シーン表示とアニメーション遷移
  5. 05単一ファイルの HTML 出力

活用シーン

  1. 01四半期の優先事項の提示
  2. 02ロードマップと KPI 欄の表示
  3. 03DESIGN.md のトークンに合わせたレビュー調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-retro-quarterly-review

インストール後、Claude Code で/html-ppt-retro-quarterly-reviewを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

example.html
assets/
template.html
references/
checklist.md

詳細

レトロな四半期レビューのテンプレート

コントラストが強く、印刷物をイメージした、次の3枚の印象的なスライドで構成される四半期レビューのテンプレートです。

  1. 表紙（主役となるタイトルのロックアップ）
  2. 3つの優先事項（3分割のグリッド）
  3. ロードマップのタイムライン＋KPI一覧

リソースマップ

html-ppt-retro-quarterly-review/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

  1. まず有効な DESIGN.md を読み、レトロな青／オレンジ／クリームのビジュアル表現を保ちながら、依頼されたトークンの変更をCSS変数に反映します。
  2. assets/template.html をベースにします。ゼロから作り直さないでください。
  3. 3枚のスライドで構成される情報設計とタイポグラフィの階層を維持します。
  4. インタラクションとモーションの品質を保ちます。
    • キーボードの 1/2/3 で該当スライドにすばやく移動
    • R で再開
    • シーンごとにページインジケーターを更新
    • 上質なワイプトランジションと段階的な表示
  5. 出力は自己完結型（HTML単一ファイル、CSS＋JSをインラインで記述し、フレームワークのランタイムを使用しない）にします。
  6. コピー／データを変更する場合は、現実的で一貫性のある内容にします。
  7. 成果物を出力する前に、references/checklist.md に照らして検証します。

出力要件

短い案内文を1文出力し、その後に成果物を提示します。

<artifact identifier="retro-quarterly-review" type="text/html" title="Retro Quarterly Review">
<!doctype html>
<html>...</html>
</artifact>

コメント

Markdown 対応