agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/huashu-design/SKILL.md

huashu-design

Skill32 starsChanged 6 months agoMITView on GitHub

HTML-native design skill for high-fidelity prototypes, slide decks, animations, data visualizations and expert design review, with a library of named design styles and PPTX, PDF, MP4 and GIF export. Agent-agnostic; its own prompts are written in Chinese.

24 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use huashu-script-polish, huashu-data-pro and 9 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • Biraj2004Skill

    huashu-script-polish

    Colloquialise video scripts — remove formal, written-language tone so scripts feel natural when spoken aloud. Use when the user mentions "make it more conversational", "too formal", "sounds like someone speaking", or "script proofreading".

    Also in 5 projects that use this

  • Biraj2004Skill

    huashu-data-pro

    All-in-one data analysis and productivity assistant. Covers end-to-end workflows for data processing, analytical insights, report writing, PPT creation, and data visualisation. Always approaches tasks from an expert perspective — thinks one step ahead for the user. Proactively confirms with the user when uncertain. Supports: Excel data analysis, advertising data review, ROI calculation, data visualisation, report generation, PPT creation, formula generation. Use when the user mentions "analyse data", "create a report", "make a PPT", "Excel", "advertising analysis", "ROI", "retrospective", "weekly report", "monthly report", "data processing", "chart", "visualisation", "presentation", "table", or "formula".

    Also in 4 projects that use this

  • MicrosoftSkill

    planning-with-files

    **USE THIS FOR COMPLEX TASKS.** Implements Manus-style file-based planning for multi-step tasks. Creates task_plan.md, findings.md, and progress.md in .agent_cache/<task-name>/. Use when: implementing multiple APIs, refactoring modules, research tasks, or ANY task requiring >5 tool calls.

    Also in 3 projects that use this

  • +8 more from Biraj2004

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈0

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    When you need a pre-built component library or design system scaffold (use shadcn-ui or design-consultation)

    line 72

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

huashu-design

Catalogue stub — full skill: alchaincyf/huashu-design

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed?
    • Global: f=~/.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as huashu-design, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project"

    Global:

    npx skills add alchaincyf/huashu-design --skill huashu-design -g -y

    Project:

    npx skills add alchaincyf/huashu-design --skill huashu-design -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Python 3 for the skill's helper scripts (learn.py, design_lint.py, capabilities.py); Node.js with the packages in the skill's package.json (Playwright, pptxgenjs, sharp, pdf-lib) and ffmpeg on PATH for PPTX, PDF, MP4 and GIF export; the skills CLI installs none of these
  • License: MIT
  • Large download (~224 MB): the skills CLI gives up cloning after 300 s; if it times out, retry with SKILLS_CLONE_TIMEOUT_MS=900000.
<!-- das:install:end -->

Invoke after install

  • Skill name: huashu-design
  • Trigger phrases: "huashu", "magazine typography", "CSS Grid design", "animated prototype", "MP4 export"

What it does

Produces publication-quality HTML/CSS designs: clickable prototypes, slide decks, animations, infographics and visualizations, with expert design review. For any new design it first shows three directions and waits for your pick before executing, draws on a library of named design styles with visual specimens, runs a design-lint check on the delivered file, and keeps a "look ledger" of what you have shipped so later projects avoid repeating it. Supports animated interactive prototypes and exports to PPTX, PDF, MP4 and GIF. Agent-agnostic and does not need an external component library. The skill's prompts and references are in Chinese, but upstream says it works fine with English tasks.

When NOT to use

  • Production web apps or systems that need a backend — upstream says the skill does not apply
  • Non-HTML targets such as React Native, SwiftUI, or backend rendering (the skill is HTML/CSS native)
  • When you need a pre-built component library or design system scaffold (use shadcn-ui or design-consultation)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free