Agent skill · writing content · nexu-io
huashu-annual-letter
OpenDesign's annual letter to its community: the year's story, what it learned, and where it's going next. Built as a decision-grade corporate strategy deck for community, contributors, investors.
Why this skill is useful
Provides a structured approach to creating a decision-grade corporate strategy deck that combines storytelling with strategic insights, which the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Annual Letter · 年度信笺 Produce a single-file, letter-grade HTML deck in the Stripe Annual Letter genre: a published letter you read, not a template you skim. Prose flows in serif paragraphs; numbers live in inline data cards and giant display anchors. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script, and never introduce colors or fonts outside this spec. Adapted from the editorial-longform style (references/design-styles.md, 安静派 · 杂志编辑长文流 / Editorial Longform) of huashu-design by 花叔 (alchaincyf), MIT licensed. Reference lineage: Stripe Annual Letter, Amazon six-page narrative memos, Stripe Press. Hard spec (locked — violating any line is a regression) Canvas & scaling One <div id="stage"> fixed at 1920 × 1080 px, centered with position: fixed; top: 50%; left: 50%. A fit() function scales the stage to the viewport: scale = min(innerWidth / 1920, innerHeight / 1080), applied as translate(-50%, -50%) scale(s), re-run on resize. Letterboxed, never cropped. All layout inside the stage uses px (never vw/vh/% for type) — the scaler owns responsiveness. Slides & navigation runtime (do not rewrite the script) Each page is one <section class="slide"> directly inside #stage, with a data-screen-label="01 刊头"-style label (1-indexed). Exactly one slide carries .active. No .dark pages in this theme — every page sits on cream paper; rhythm comes from density, not theme flips. Keyboard: ←/↑/PageUp previous · →/↓/Space/PageDown next · Home/End first/last. Hash routing #/N (1-indexed) read on load and hashchange, written via history.replaceState. Click: left third back, rest forward. Fixed counter pill bottom-right, key-hint bottom-left. Zero external JS, zero build step; the file must open via file:// inside a sandboxed iframe. Design tokens (in :root, keep the names — re-theme by changing values only) Fonts via Google Fonts @import: Newsreader (display, incl. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/huashu-annual-letter