New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Zui Build

by easysoft in easysoft/zui

使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能. An agent skill from easysoft/zui.

MITAuto-check passedFrontend & Design

Install Zui Build

skills CLI
$ npx skills add easysoft/zui --skill zui-build -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install easysoft/zui zui-build --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/zui-build .claude/skills/zui-build && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
zui-build
GitHub stars
2.8k
Token cost
~1.4k tokens
SKILL.md length
694 words
Files
21 (incl. scripts, references, assets)
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能. An agent skill from easysoft/zui.

  • Works in 4 steps: Read applicable workspace instructions… → Default to one responsive static page… → Choose a new empty directory. Never run… → …
  • Frontend & Design work in your project
  • SKILL.md covers Establish the output, Scaffold with bundled resources, Turn the starter into the… and Prefer declarative ZUI behavior, plus 1 more section
  • Runs JavaScript scripts from its folder; calls node and python3

What it does

Zui Build is an agent skill from easysoft/zui. 使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能。

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 26 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `assets/vendor/zui-3.0.0/icons/fontawesome-license.md` and `assets/vendor/zui-3.0.0/manifest.json`).

It sits in Frontend & Design. The repository describes itself as: ZUI is an HTML5 front UI framework. The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/zui-build”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Read applicable workspace instructions and inspect the requested destination before writing.
  2. Default to one responsive static page with index.html, app.css, and local ZUI assets when the user does not specify a stack.
  3. Choose a new empty directory. Never run the scaffold over an existing or non-empty project; it intentionally refuses to overwrite files.
  4. If the request is actually to add ZUI to an existing application, stop this workflow and use the separate $zui integration skill.

What it can do on your machine

Read from SKILL.md and the folder at commit 3b1d7da. 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/ (JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • 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

Zui Build loads about 1.4k tokens when it runs, and up to ~4.5k if it reads all its reference files. Until then it costs about 16 tokens; SKILL.md has 694 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~16
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.5k

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

The full file from easysoft/zui at commit 3b1d7da, republished under its MIT licence (© easysoft). 694 words, ~1,396 tokens.

Download SKILL.mdSave it as .claude/skills/zui-build/SKILL.md (or your agent's skills folder). This skill also uses 20 other files; get the full folder from GitHub.
name
zui-build
description
使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能。

Build standalone pages with ZUI

Create a portable static Web project that opens without package installation. Treat the user's intent as the design brief, ZUI as the interface foundation, and the bundled published release as the default runtime.

Establish the output

  1. Read applicable workspace instructions and inspect the requested destination before writing.
  2. Default to one responsive static page with index.html, app.css, and local ZUI assets when the user does not specify a stack.
  3. Choose a new empty directory. Never run the scaffold over an existing or non-empty project; it intentionally refuses to overwrite files.
  4. If the request is actually to add ZUI to an existing application, stop this workflow and use the separate $zui integration skill.

Do not add npm, a framework, a bundler, or a development server dependency unless the user asks. A simple static page is the fastest default and still supports ZUI's full browser bundle.

Scaffold with bundled resources

Run:

sh
node <skill-root>/scripts/create-zui-page.mjs \
  --output <empty-page-directory> \
  --title "<page title>" \
  --lang <language-tag>

Omit --lang to use zh-CN. The command copies the bundled ZUI release, including the icon fonts and licenses, into assets/zui/.

Use CDN delivery only when the user requests it or the result must not carry local vendor assets:

sh
node <skill-root>/scripts/create-zui-page.mjs \
  --output <empty-page-directory> \
  --title "<page title>" \
  --cdn

Read references/resources-and-delivery.md before selecting CDN, ESM, another ZUI version, multiple pages, or updating the bundled release. Prefer the bundled exact version over network retrieval for speed and reproducibility.

If Node is unavailable, copy assets/starter/ and assets/vendor/zui-3.0.0/ manually, preserve the CSS-to-icons/ layout, replace every {{TOKEN}}, and apply the same empty-destination safety rule.

Turn the starter into the requested interface

Do not deliver the starter unchanged. Replace its information architecture, content, visual direction, sample data, accessible names, and interactions so they serve the user's actual goal. Delete irrelevant sections instead of filling every starter slot.

Read references/page-quality.md before making substantive layout or visual decisions. In particular:

  • use semantic HTML and verified ZUI component classes for matching controls and structures;
  • place page-specific CSS after zui.css and build on ZUI color, radius, shadow, and spacing variables;
  • derive the page structure, tasks, and responsive hierarchy from the user's brief rather than from the starter;
  • make content credible and specific without inventing business claims;
  • preserve accessibility, keyboard behavior, focus, contrast, reduced motion, and meaningful states.

Use images only when they materially support the brief. Store output-owned assets locally unless the user requests remote URLs, and give every meaningful image suitable alternative text.

Show full SKILL.md (303 more words)Show less

Prefer declarative ZUI behavior

Choose the smallest working surface in this order:

  1. semantic HTML plus ZUI CSS;
  2. zui-create for a component initialized with the page;
  3. zui-toggle for click or hover behavior;
  4. zui-on-* or a small zui-init action;
  5. imperative zui.* code only when state, lifecycle, CSP, dynamic data, or a public method requires it.

If the user requests Web Components, first check the selected runtime using Web Component availability; custom tags are a separate consumption surface and do not use zui-create to instantiate themselves.

Read references/declarative-zui.md before adding interactive components or dynamically inserted markup. Verify every component name, option, event, method, CSS class, and variable against the bundled release or version-matched official documentation. Do not infer APIs.

Keep evaluated declarative values developer-authored. Never interpolate untrusted user, URL, CMS, or API data into zui-create-*, zui-toggle-*, zui-on-*, or zui-init attributes. Use controlled JavaScript when data is dynamic or a strict CSP forbids evaluated declarations.

Validate the result

Run the deterministic ZUI resource check:

sh
node <skill-root>/scripts/validate-zui-page.mjs --root <page-directory>

The validator only verifies that the entry page references ZUI and that recognized local ZUI resources resolve safely. It deliberately imposes no requirements on page content, document metadata, landmarks, headings, IDs, controls, or declarative interaction style. A CSS-only ZUI page is valid; include zui.js only when the requested page needs it.

Then preview the actual page, for example:

sh
python3 -m http.server 4173 --directory <page-directory>

Inspect it in a browser at narrow and wide widths. Exercise the primary flow with pointer and keyboard; verify declared components, focus and dismissal, dynamic initialization, responsive layout, theme behavior, console output, and every local or CDN resource request. Fix discovered problems rather than merely reporting validator success.

Deliver the runnable entry path, resource mode and ZUI version, changed files, validation performed, and any browser behavior that could not be checked. Do not publish or deploy unless the user asks.

© easysoft, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 20 other files (scripts, references, assets) in skills/zui-build of easysoft/zui.

  • SKILL.md
  • agents/openai.yaml
  • assets/starter/app.css
  • assets/starter/index.html
  • assets/vendor/zui-3.0.0/LICENSE
  • assets/vendor/zui-3.0.0/icons/fontawesome-license.md
  • assets/vendor/zui-3.0.0/icons/zenicon.eot
  • assets/vendor/zui-3.0.0/icons/zenicon.svg
  • assets/vendor/zui-3.0.0/icons/zenicon.ttf
  • assets/vendor/zui-3.0.0/icons/zenicon.woff
  • assets/vendor/zui-3.0.0/manifest.json
  • assets/vendor/zui-3.0.0/zui.css
  • assets/vendor/zui-3.0.0/zui.esm.js
  • assets/vendor/zui-3.0.0/zui.js
  • references
  • … and 6 more

Open the folder on GitHubat commit 3b1d7da

Compare with similar skills

Zui Build 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.

Zui Build compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Zui Build this skilleasysoft/zui2.8k—~1.4kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from easysoft/zui

All 24 skills in this repo

  • Zui

    easysoft/zui

    在已有应用中集成、使用或排查 ZUI 3，直接创建和注册应用自定义组件，或使用已提供的 Web Components；适用于消费方项目，不用于开发 ZUI 源码仓库。

    2.8k GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed

  • Zui Standards

    easysoft/zui

    查询 ZUI 主仓库的开发规范，为库开发及本地 exts 接入任务提供相关约束和仓库证据；规范查询保持只读. An agent skill from easysoft/zui.

    2.8k GitHub stars~452 tokensUpdated yesterday
    Auto-check passed

  • Zuix Standards

    easysoft/zui

    查询独立 ZUI 扩展项目的开发规范，解析目标库、扩展工作区、Git 所有权及所需宿主上下文；始终只读. An agent skill from easysoft/zui.

    2.8k GitHub stars~403 tokensUpdated yesterday
    Auto-check passed

  • Zui Wrap Lib

    easysoft/zui

    将已经可用的 UMD/IIFE 资源封装为 ZUI 主仓库的 lib/ 库，通过 LibLoader 按需加载。不转换资源格式，需求明确时形成集成计划后直接实施。

    2.8k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Zui Commit

    easysoft/zui

    审查并提交 ZUI 主仓库的改动；用户直接调用本技能即进入提交模式，必要检查通过后直接提交。只要求分析、评审或生成提交信息时保持只读。

    2.8k GitHub stars~1.5k tokensUpdated yesterday
    Auto-check: notes

  • Zuix Commit

    easysoft/zui

    审查并提交独立 ZUI 扩展项目的改动；用户直接调用本技能即进入提交模式，必要检查通过后直接提交。只要求分析、评审或生成提交信息时保持只读。

    2.8k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check: notes

Categories

Questions about Zui Build

What does Zui Build do?

使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能. An agent skill from easysoft/zui. Zui Build is an agent skill from easysoft/zui.

When should I use Zui Build?

Zui Build fits situations like: frontend & Design work in your project.

How do I install Zui Build in Claude Code?

Run `npx skills add easysoft/zui --skill zui-build -a claude-code`. Or copy the skill folder (skills/zui-build in easysoft/zui) into .claude/skills/zui-build in your project. Claude Code loads it when a task matches its description.

How do I install Zui Build in Codex?

Run `npx skills add easysoft/zui --skill zui-build -a codex`. Or copy the skill folder (skills/zui-build in easysoft/zui) into .agents/skills/zui-build in your project. Codex loads it when a task matches its description.

Can I use Zui Build 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 easysoft/zui --skill zui-build -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/zui-build, .gemini/skills/zui-build, .github/skills/zui-build and .opencode/skills/zui-build in your project.

What does Zui Build need to run?

Going by SKILL.md and its folder, Zui Build needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and python3). Our summary lists: Python 3; Node.js.

Does Zui Build 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 Zui Build 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 Zui Build use?

Zui Build is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Zui Build use?

About 1.4k tokens (SKILL.md is roughly 5.6k 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 3.1k tokens, read only when the agent opens those files.

What are the alternatives to Zui Build?

Skills that share tags, products or a category with Zui Build: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Zui Build?

easysoft (a GitHub organization) maintains it in easysoft/zui, which has 2,765 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on October 8, 2026.

Source: easysoft/zui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.