Web Design Engineer
ConardLi/garden-skills
Builds polished browser-rendered HTML, CSS, JavaScript and React pages, dashboards, prototypes and slide decks, aiming for a stunning rather than merely functional result.
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
Install HTML Design
$ npx skills add NimaChu/html-design --skill html-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install NimaChu/html-design html-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .claude/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NimaChu/html-design --skill html-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install NimaChu/html-design html-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .agents/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NimaChu/html-design --skill html-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install NimaChu/html-design html-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .cursor/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NimaChu/html-design --skill html-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install NimaChu/html-design html-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .gemini/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install NimaChu/html-design html-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add NimaChu/html-design --skill html-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .github/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NimaChu/html-design --skill html-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install NimaChu/html-design html-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "html-design" agent skill from https://github.com/NimaChu/html-design/tree/main into .opencode/skills/html-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
html-design- GitHub stars
- 101
- Token cost
- ~2.7k tokens
- SKILL.md length
- 1,021 words
- Files
- 69 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
- Works in 12 steps: Inspect the audience, environment, core… → Choose the deliverable type and… → Choose one visual direction… → …
- Marketing experiences
- SKILL.md covers Route The Request, Workflow, Scaffold and Architecture Threshold, plus 3 more sections
- Calls python3
What it does
HTML Design is an agent skill from NimaChu/html-design. Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables. Use for marketing experiences, product prototypes, infographics, motion narratives, documents, browser tools, dashboards, guided workflows, knowledge interfaces, mini-games, presentations, reusable style and brand systems, and local-model text, vision, image, or code tools that must run without a build chain or hosted service.
Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 76 other files, including scripts, reference files and assets (for example `README.en.md`, `README.md` and `agents/openai.yaml`).
It sits in Media & Creative, covering HTML artifacts, Infographics and Design systems. It works with JavaScript and OpenAI. The repository describes itself as: Create lightweight standalone HTML apps from simple prompts—no framework or build step, with optional local AI.
When your agent uses it
- Marketing experiences
- Product prototypes
- Motion narratives
- Guided workflows
Example prompts
- “/html-design”
Requirements
- Python 3
Workflow steps
12 steps, taken from the first numbered list in SKILL.md.
- Inspect the audience, environment, core task, inputs, outputs, data sensitivity, and required states.
- Choose the deliverable type and interaction kind, then write a compact contract. Use recommend --brief when a registered single scenario…
- Choose one visual direction independently of the scenario. Filter the style registry when a reusable family is appropriate; otherwise…
- Preserve working domain logic when modifying an existing app.
- Preserve all decision-relevant user content; do not invent data, metrics, or conclusions.
- For presentations, select an existing brand pack first. When no brand applies and visual ambiguity is consequential, generate three…
- Scaffold only when no useful implementation exists.
- Replace starter content and behavior with the actual task; a registry style is a seed, not a finished theme.
- Implement empty, ready, working, success, partial, error, and reset states where relevant.
- Validate with scripts/webapp.py validate --strict.
- Run the primary workflow in a real browser at desktop, narrow mobile, and 320 px widths. For fixed-stage presentations, inspect the scaled…
- Build a zip only when the user needs a distributable package.
What it can do on your machine
Read from SKILL.md and the folder at commit 829670b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML Design loads about 2.7k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 110 tokens; SKILL.md has 1,021 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,021 words (~2,702 tokens).
“Build the usable application, not a page that describes it. Default to one self-contained index.html with inline CSS and JavaScript. Keep the result inspectable, portable, and runnable from local storage.”
- name
- html-design
Files
SKILL.md and 68 other files (scripts, references, assets) in the repository root of NimaChu/html-design.
- SKILL.md
- README.en.md
- README.md
- agents/openai.yaml
- assets/brand-packs/editorial-evidence/brand.css
- assets/brand-packs/editorial-evidence/brand.json
- assets/brand-packs/international-grid/brand.css
- assets/brand-packs/international-grid/brand.json
- assets/brand-packs/neutral-corporate/brand.css
- assets/brand-packs/neutral-corporate/brand.json
- assets/kind-contracts/index.json
- assets/local-config.example.json
- assets/presentation-styleboard/index.html
- … and 56 more
Open the folder on GitHubat commit 829670b
Compare with similar skills
HTML Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HTML Design this skillNimaChu/html-design | 101 | — | ~2.7k | Automated safety check: Pass | None | |
| Web Design EngineerConardLi/garden-skills | 13k | — | ~8.8k | Automated safety check: Pass | MIT | |
| Math ExplainerGordenSun/mathVideoMaker | 289 | 1 repos | ~2.4k | Automated safety check: Pass | None | |
| Tufte Reportglebis/claude-skills | 388 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Image Generationonyx-dot-app/onyx | 32k | 1 repos | ~1.7k | Automated safety check: Pass | Custom licence | |
| Ecom Image2buluslan/gpt-image2-ecommerce | 405 | — | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Math Explainer
GordenSun/mathVideoMaker
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
Tufte Report
glebis/claude-skills
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files.
Image Generation
onyx-dot-app/onyx
Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via onyx-cli image.
Ecom Image2
buluslan/gpt-image2-ecommerce
由 buluslan（公众号：新西楼.AI）研发的开源电商做图 Skill：39 个电商场景模板、Campaign 套图一致性、GPT-Image-2.5 官方双模型路由（Flare/Sunburst）与平台技术预检。通过用户配置的 OpenAI 兼容端点生成图片，或导出 prompt 包手动使用。Trigger whenever the user wants product main…
Sdf Art
shaun8149/sdf-js
Generate sdf-js code from a natural-language scene description.
Related
Works with
Categories
Questions about HTML Design
What does HTML Design do?
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables. HTML Design is an agent skill from NimaChu/html-design. Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
When should I use HTML Design?
HTML Design fits situations like: marketing experiences; product prototypes; motion narratives; guided workflows.
How do I install HTML Design in Claude Code?
Run `npx skills add NimaChu/html-design --skill html-design -a claude-code`. Or copy the skill folder (the NimaChu/html-design repository) into .claude/skills/html-design in your project. Claude Code loads it when a task matches its description.
How do I install HTML Design in Codex?
Run `npx skills add NimaChu/html-design --skill html-design -a codex`. Or copy the skill folder (the NimaChu/html-design repository) into .agents/skills/html-design in your project. Codex loads it when a task matches its description.
Can I use HTML Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add NimaChu/html-design --skill html-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-design, .gemini/skills/html-design, .github/skills/html-design and .opencode/skills/html-design in your project.
What does HTML Design need to run?
Going by SKILL.md and its folder, HTML Design needs the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does HTML Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is HTML Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does HTML Design use?
No licence was found for HTML Design or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does HTML Design use?
About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 10k tokens, read only when the agent opens those files.
What are the alternatives to HTML Design?
Skills that share tags, products or a category with HTML Design: Web Design Engineer (ConardLi/garden-skills, 13k stars), Math Explainer (GordenSun/mathVideoMaker, 289 stars), Tufte Report (glebis/claude-skills, 388 stars) and Image Generation (onyx-dot-app/onyx, 32k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML Design?
NimaChu (a GitHub user) maintains it in NimaChu/html-design, which has 101 GitHub stars. The repository was last updated on August 31, 2026.
Source: NimaChu/html-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.