Agent skill · design visual · nexu-io
huashu-slides
A career-pivot story from consultant to product leader — the arc, the proof, and why the next role is the right bet. Built as a decision-grade career deck for hiring manager, mentors.
Why this skill is useful
Provides a structured approach to creating decision-grade career decks that 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
Huashu Slides · 花叔幻灯片 Produce a single-file, publication-grade HTML deck. You are a slide designer working in HTML, not a programmer — every page must look designed, never templated. 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. Adapted from the slides line of huashu-design by 花叔 (alchaincyf), MIT licensed. 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. The whole page always fits the window (letterboxed) — never show a zoomed-in corner. All layout inside the stage uses px (never vw/vh/% for type) — the scaler owns responsiveness. Slides Each page is one <section class="slide"> directly inside #stage, with a data-screen-label="01 封面"-style label (1-indexed; humans never say "slide 0"). Exactly one slide carries .active (display toggled by the script); dark pages add the .dark class. 10 pages is the default; honor the user's requested count otherwise. Navigation runtime (do not rewrite the script) Keyboard: ←/↑/PageUp previous · →/↓/Space/PageDown next · Home/End first/last. Hash routing: #/N (1-indexed) read on load and hashchange, written via history.replaceState on every navigation. Click: left third of the stage goes back, the rest goes forward. Fixed counter pill bottom-right (03 / 10), key-hint bottom-left. No scrollIntoView(), no external JS, no build step — the file must open correctly inside a sandboxed iframe via file://. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/huashu-slides