Agent skill · Code Review & Quality

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.

nexu95,528★ · +2,037/wk · 5 repos on radarProfile →
claude-codecodexcursorApache-2.0
Install
npx skills add nexu-io/open-design --skill huashu-slides --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 4
SKILL.md size: 9 KB
Bundled scripts: none
Path: plugins/_official/examples/huashu-slides/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 83,577 · +1,339 this week
Language: TypeScript
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 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](https://github.com/alchaincyf/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; human

What's inside
Steps it walks through
  1. Hard spec (locked — violating any line is a regression)
  2. Canvas & scaling
  3. Slides
  4. Navigation runtime (do not rewrite the script)
  5. Design tokens (in :root, keep the names)
  6. Layout enumeration (use 4–5 per deck, never one layout everywhere)
  7. Editorial grammar (every page)
  8. Scale (slides are read from 10 meters away)
  9. Rhythm
  10. Workflow
  11. Anti-AI-slop checklist (from the upstream skill — non-negotiable)
  12. Optional: PDF / editable PPTX export
Ships with 3 files
  • LICENSE
  • example.html
  • open-design.json
More from open-design
All skills →
About this skill
What does the huashu-slides skill do?

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.

How do I install it?

Run `npx skills add nexu-io/open-design --skill huashu-slides --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going