open-design/skills/weread-year-in-review-video-template/SKILL.md
Tuola-waj 5254559cb1
Add WeRead year-in-review HyperFrames template (#2131)
Co-authored-by: Tuola Ge <gexingli@refly.ai>
2026-05-19 15:11:41 +08:00

3 KiB

name description triggers od
weread-year-in-review-video-template WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.
WeRead year in review
WeRead annual report
reading year in review video
annual reading report template
微信读书年度报告
读书年度总结视频
阅读年报 HyperFrames
mode surface type platform preview design_system outputs example_prompt capabilities_required
template video hyperframes mobile
type entry reload
html example.html debounce-100
requires
false
primary secondary
index.html
template.html
example.html
Create a WeRead-style 9:16 HyperFrames annual reading report video with 12 scenes, warm paper texture, book-page transitions, reading stats, notes, keywords, and a final reading persona card.
file_write

WeRead Year in Review Video Template

Create a vertical HyperFrames composition for annual reading reports: WeRead, Goodreads, Readwise, Notion reading logs, book clubs, or personal learning recaps. The template turns reading time, active days, bookshelf assets, notes, keywords, and a reading persona into a shareable 9:16 video.

Resource Map

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

Workflow

  1. Copy assets/template.html to index.html.
  2. Replace the default report data in the REPORT object:
    • owner/title
    • reading hours and active days
    • bookshelf and completion stats
    • note composition
    • interest keywords
    • reading persona and share line
  3. Preserve the 12-scene timeline unless the user asks for a shorter cut.
  4. Keep the WeRead-inspired visual language:
    • warm paper background
    • ink-blue typography
    • restrained WeRead green accents
    • book pages, bookmarks, highlights, note cards, and shelf metaphors
  5. Motion should feel like flipping through a reading journal. Avoid techy slide transitions, bouncy UI effects, and dashboard-loading motion.
  6. Keep the composition deterministic:
    • direct data-start, data-duration, and data-track-index attributes
    • no unseeded randomness
    • no infinite loops or repeat: -1
    • no dependency on scroll, hover, localStorage, or runtime class discovery
  7. Validate against references/checklist.md before emitting.

Output Contract

Emit one short orientation sentence, then a single HTML artifact:

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