How do I install the Huashu Design skill?

Run npx skillmds add podo/huashu-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Huashu Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Huashu Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Huashu Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Huashu Design?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Huashu Design by podo — Agent Skill

Name: Huashu Design
Rating: 4.2 (5 reviews)
Author: podo

Huashu Design

HTML-native design skill producing magazine-grade typography, precise CSS Grid, animated prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export. Agent-agnostic and works without external component libraries.

podo 50c1de6 2 files · 2.5 KB Updated Sep 9, 2026

File contents

huashu-design

Catalogue stub — full skill: alchaincyf/huashu-design

Decision tree

Is the full skill already installed? Check whether the skill at this location still has a das: block:
- Global: grep -q "^das:" ~/.agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- Project: grep -q "^das:" .agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- No das: block → full skill installed, invoke it and proceed
- das: block present → go to step 2

Detect scope, then install:

To detect scope:

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

Global (installed with -g):

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

Project (installed without -g):

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

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

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 with magazine-grade typography and precise CSS Grid layouts, drawing on 20 named design philosophies. Includes a built-in 5-dimension self-review loop that critiques its own output across readability, hierarchy, proportion, rhythm, and contrast before delivering. Supports animated interactive prototypes and MP4 export for sharing or presenting motion designs. Entirely agent-agnostic — no external component libraries or framework dependencies required.

When NOT to use

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)

---name: huashu-designdescription: HTML-native design skill producing magazine-grade typography, precise CSS Grid, animated prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export. Agent-agnostic and works without external component libraries.--- # huashu-design > Catalogue stub — full skill: [alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design) ## Decision tree 1. **Is the full skill already installed?** Check whether the skill at this location still has a `das:` block: - Global: `grep -q "^das:" ~/.agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - Project: `grep -q "^das:" .agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - No `das:` block → full skill installed, invoke it and proceed - `das:` block present → go to step 2 2. **Detect scope, then install:** To detect scope: ```bash [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project" ``` **Global** (installed with `-g`): ```bash npx skills add alchaincyf/huashu-design --skill huashu-design -g -y ``` **Project** (installed without `-g`): ```bash npx skills add alchaincyf/huashu-design --skill huashu-design -y ``` > **Claude Code:** send either command as a chat message starting with `!` to run it without leaving the conversation. ## 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 with magazine-grade typography and precise CSS Grid layouts, drawing on 20 named design philosophies. Includes a built-in 5-dimension self-review loop that critiques its own output across readability, hierarchy, proportion, rhythm, and contrast before delivering. Supports animated interactive prototypes and MP4 export for sharing or presenting motion designs. Entirely agent-agnostic — no external component libraries or framework dependencies required. ## When NOT to use - 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`)

Frequently asked questions