Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

weread-year-in-review-video-template — Claude Code skill

Creates a vertical 9:16 HTML video for WeRead-style annual reading reports: stats, notes, keywords, and a reading persona card.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill weread-year-in-review-video-template -a claude-code
Open on GitHub

What weread-year-in-review-video-template does

The skill builds an annual reading report from reading hours, active days, notes, keywords, and reader persona into a vertical HyperFrames video. The template has 12 scenes with WeRead visual language: warm paper texture, ink-blue typography, restrained green accents, book-page metaphors, bookmarks, highlights, and note cards. Animation mimics flipping through a reading journal.

You copy assets/template.html to index.html, replace the REPORT object with your data (owner, hours, bookshelf, notes, interests), and the skill renders a deterministic composition with no randomness or infinite loops. The final index.html can be converted to MP4. Before output, the skill validates against references/checklist.md.

Useful when you need a shareable year-in-reading visualization for social media, personal archives, or reader communities. Requires file_write capability.

What it helps with

  • build a vertical WeRead-style year-in-reading video report
  • turn Readwise, Notion, or Goodreads stats into a shareable clip
  • visualize reading time, notes, and keywords from your bookshelf
  • create a deterministic HyperFrames composition with no random animation
  • generate a personalized reading persona card

Example prompts for the agent

  • Build a WeRead-style annual reading report: 12 scenes, warm paper texture, page-flip transitions, reading time and notes stats, keywords, and a final reading persona card
  • Create a 9:16 vertical video for my year in review: data from `reading-log.json`, WeRead style, 12 HyperFrames scenes
  • Make a shareable reading year clip: hours, active days, top books, notes, interests, and reader persona

How to install weread-year-in-review-video-template

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill weread-year-in-review-video-template -a claude-code

2Manually: put the files in place

~/.claude/skills/weread-year-in-review-video-template/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/weread-year-in-review-video-template/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

ip-as-logo s1dashu This skill creates simple square character images for logos and product visuals. Use it when you need a clear silhouette and several candidates to compare. Claude Code CX Codex Cursor +1 3,400installs diagram-generator zhaoxuya520 Generates, checks, and renders diagrams from text, code, schemas, and tables. Useful for architecture views, process maps, and UML models. Claude Code CX Codex Cursor +1 1,300installs antislop-ui miqdadbadjuber A UI and visual skill for reviewing color, layout, components, and motion. Use it when building or editing a website, web app, or other interface. Claude Code CX Codex Cursor +1 6,300installs pexo-agent pexoai This skill creates finished multi-shot videos from text, images, URLs, scripts, or audio. Use it for product ads, short videos, and explainers. Claude Code CX Codex Cursor +1 40,400installs canva-creator official anthropics Executes marketing campaigns from an approved content brief: builds the schedule, generates Canva graphics for social posts, writes copy, and stages sends in HubSpot. Claude Code CX Codex Cursor +1 1,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about weread-year-in-review-video-template

How to install weread-year-in-review-video-template in Claude Code?

Run npx skills add nexu-io/open-design --skill weread-year-in-review-video-template -a claude-code. The skill will appear in ~/.claude/skills/weread-year-in-review-video-template/SKILL.md.

What does weread-year-in-review-video-template do?

Creates a vertical HTML template for a WeRead-style annual reading video report. Turns reading time stats, notes, keywords, and reader persona into a 9:16 HyperFrames video with warm paper texture and book-page metaphors.

What data can I customize in the template?

In the REPORT object you change the owner, title, reading hours, active days, bookshelf and completion stats, note composition, interest keywords, reading persona, and share line. The 12-scene structure stays unless you ask for a shorter cut.

Source text

SKILL.md · Apache-2.0 
---
name: weread-year-in-review-video-template
description: |
  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.
triggers:
  - "WeRead year in review"
  - "WeRead annual report"
  - "reading year in review video"
  - "annual reading report template"
  - "微信读书年度报告"
  - "读书年度总结视频"
  - "阅读年报 HyperFrames"
od:
  mode: template
  surface: video
  type: hyperframes
  platform: mobile
  preview:
    type: html
    entry: example.html
    reload: debounce-100
  design_system:
    requires: false
  outputs:
    primary: index.html
    secondary:
      - template.html
      - example.html
  example_prompt: "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."
  capabilities_required:
    - 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

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

The rendered MP4 showcase used by `example.html` is hosted at
`https://repo-assets.open-design.ai/resources/videos/skills/weread-year-in-review-video-template/default-showcase.mp4`.

## 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:

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

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor