weread-year-in-review-video-template

WeRead 年間レビュー動画テンプレート

年間読書レポート向けに、縦型の HyperFrames コンポジションを作成します。WeRead、 Goodreads、Readwise、Notion の読書ログ、読書会、個人の学びの振り返りなどに使えます。 このテンプレートでは、読書時間、読書した日数、本棚の素材、メモ、キーワード、 読書ペルソナを、共有できる 9:16 の動画にまとめます。

リソースマップ

weread-year-in-review-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

example.html で使用する、レンダリング済み MP4 のショーケースは https://repo-assets.open-design.ai/resources/videos/skills/weread-year-in-review-video-template/default-showcase.mp4 でホストされています。

ワークフロー

1. assets/template.html を index.html にコピーします。
2. REPORT オブジェクト内のデフォルトのレポートデータを置き換えます。
   • オーナー／タイトル
   • 読書時間と読書した日数
   • 本棚と読了数の統計
   • メモの構成
   • 興味のあるキーワード
   • 読書ペルソナと共有用の一文
3. ユーザーから短縮版を求められない限り、12 シーンのタイムラインを維持します。
4. WeRead をイメージしたビジュアル表現を維持します。
   • 温かみのある紙の背景
   • インクブルーのタイポグラフィ
   • 控えめな WeRead グリーンのアクセント
   • 本のページ、しおり、ハイライト、メモカード、本棚のメタファー
5. 動きは、読書日記をめくるような印象にします。テクノロジー感の強い スライド切り替え、弾むような UI 効果、ダッシュボードの読み込みアニメーションは避けます。
6. コンポジションの動作を決定的にします。
   • data-start、data-duration、data-track-index 属性を直接指定する
   • シードのないランダム処理を使わない
   • 無限ループや repeat: -1 を使わない
   • スクロール、ホバー、localStorage、実行時のクラス検出に依存しない
7. 出力する前に references/checklist.md に照らして検証します。

出力要件

短い方向説明の文を 1 つ記述し、その後に単一の HTML アーティファクトを出力します。

<artifact identifier="weread-year-in-review-video-template" type="text/html" title="WeRead Year in Review Video Template">
<!doctype html>
<html>...</html>
</artifact>