Boneyard
0xGF/boneyard
Use boneyard-js to add, configure, debug, or rebuild skeleton screens.
在 ZUI 主仓库的 lib/ 中设计、实现或修复组件及 Web Component 适配；需求明确时完成必要设计后直接实施。
Install Zui Component
$ npx skills add easysoft/zui --skill zui-component -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install easysoft/zui zui-component --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/zui-component .claude/skills/zui-component && rm -rf skills-srcUse ~/.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/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .claude/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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.
$skill-installer install https://github.com/easysoft/zui/tree/main/.agents/skills/zui-componentType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add easysoft/zui --skill zui-component -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install easysoft/zui zui-component --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/zui-component .agents/skills/zui-component && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .agents/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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 easysoft/zui --skill zui-component -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install easysoft/zui zui-component --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/zui-component .cursor/skills/zui-component && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .cursor/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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.
$ gemini skills install https://github.com/easysoft/zui.git --path .agents/skills/zui-component--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add easysoft/zui --skill zui-component -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install easysoft/zui zui-component --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/zui-component .gemini/skills/zui-component && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .gemini/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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 easysoft/zui zui-componentInstalls 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 easysoft/zui --skill zui-component -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/zui-component .github/skills/zui-component && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .github/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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 easysoft/zui --skill zui-component -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install easysoft/zui zui-component --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/easysoft/zui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/zui-component .opencode/skills/zui-component && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "zui-component" agent skill from https://github.com/easysoft/zui/tree/main/.agents/skills/zui-component into .opencode/skills/zui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zui-component", 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
zui-component- GitHub stars
- 2.8k
- Token cost
- ~586 tokens
- SKILL.md length
- 117 words
- Files
- 2
- Skills in repo
- 24
- Repo updated
- First seen
- Licence
- MIT
At a glance
在 ZUI 主仓库的 lib/ 中设计、实现或修复组件及 Web Component 适配；需求明确时完成必要设计后直接实施。
- Works in 5 steps: 从现有代码、请求及已确认决定推断用途、场景、目标用户和约束。合理沿用既有约定并说明… → 只询问无法从仓库发现且会改变设计的信息，通常包括 → 提问时说明已确认的背景及问题影响；答案明确后继续相关设计。需求明确后按共享工作流继… → …
- Frontend & Design work in your project
- SKILL.md covers 准备, 理解与设计, 实施计划 and 实施
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Zui Component is an agent skill from easysoft/zui. 在 ZUI 主仓库的 lib/ 中设计、实现或修复组件及 Web Component 适配；需求明确时完成必要设计后直接实施。
Its SKILL.md is about 590 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design. It works with Preact. 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-component”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 从现有代码、请求及已确认决定推断用途、场景、目标用户和约束。合理沿用既有约定并说明；同一术语仍有无法可靠消除、会实质改变组件身份、包角色、架构或公开契约的歧义时，提出 1–3 个最少必要问题，暂缓依赖该答案的设计，不以假设代替高影响选择。其他只读调查可继续。
- 只询问无法从仓库发现且会改变设计的信息，通常包括
- 提问时说明已确认的背景及问题影响；答案明确后继续相关设计。需求明确后按共享工作流继续实施。
- 分别判断包角色和实现架构。不要因为包类型是 component 就默认使用 Preact，也不要因使用 Preact 就改变包角色。
- 定义最小公开 API、状态或数据流、DOM 生命周期与清理策略。仅暴露真实需要的入口。
What it can do on your machine
Read from SKILL.md and the folder at commit d99f043. 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
No scripts in the folder and no shell commands in SKILL.md.
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 Component loads about 586 tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 117 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); files beside SKILL.md are not scanned.
SKILL.md
The full file from easysoft/zui at commit d99f043, republished under its MIT licence (© easysoft). 117 words, ~586 tokens.
Download SKILL.mdSave it as
.claude/skills/zui-component/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- zui-component
- description
- 在 ZUI 主仓库的 lib/* 中设计、实现或修复组件及 Web Component 适配；需求明确时完成必要设计后直接实施。
ZUI 组件开发
准备
按 共享工作流 定位目标、检查所有权并复用已有发现。组件实现读取 组件规范 的相关部分；运行时加载外部资源再读 external-library 规范，涉及包元数据再读 library 规范，其他领域按需路由。
涉及自定义元素时，读取 Web Component 规范。无论采用独立工厂配置还是元素子类，定义必须在 lib/<lib-name>/src/web-component/ 内实现，并经该目录 index.ts 和库 src/main.ts 导出。
阅读本次判断所需的目标源码；架构或公开契约尚不清楚时再检查相似实现。默认仅修改目标库；新增第三方依赖时，按第三方依赖的版权与文档将 licenses/ 和公共依赖说明纳入必要文件集，其余跨库修改须在任务范围内。
新增组件或能力前执行先查找，再复用，检索并核实可组合的已有组件和 helper；设计中说明所复用的 API 或必须新增的缺口。
理解与设计
- 从现有代码、请求及已确认决定推断用途、场景、目标用户和约束。合理沿用既有约定并说明；同一术语仍有无法可靠消除、会实质改变组件身份、包角色、架构或公开契约的歧义时，提出 1–3 个最少必要问题，暂缓依赖该答案的设计，不以假设代替高影响选择。其他只读调查可继续。
- 只询问无法从仓库发现且会改变设计的信息，通常包括：
- 需要支持的 HTML/CSS、Preact、vanilla 构造器、Web Component、
zui-create或 toggle 消费方式； - 受控或非受控状态、事件、命令式方法、异步和错误行为；
- 视觉变体、响应式、键盘、焦点、ARIA 与国际化要求。
- 需要支持的 HTML/CSS、Preact、vanilla 构造器、Web Component、
- 提问时说明已确认的背景及问题影响；答案明确后继续相关设计。需求明确后按共享工作流继续实施。
- 分别判断包角色和实现架构。不要因为包类型是
component就默认使用 Preact，也不要因使用 Preact 就改变包角色。 - 定义最小公开 API、状态或数据流、DOM 生命周期与清理策略。仅暴露真实需要的入口。
实施计划
按共享工作流形成可直接实施的计划；以下仅展开本次相关决策：
- 类型判断：包角色、组件架构及必要参考依据；
- 目标、非目标和验收场景；
- 公开 API：消费方式、options/props、事件、方法、类型及兼容性；Web Component 还需确定标签、注册时机、attribute/property 映射和表单关联需求；
- 实现方式：渲染、状态/数据流、生命周期、清理、无障碍和 i18n；
- 外部资源（若有）：
LibLoader所有权、注册名、资源/check/依赖、加载时机、失败重试、开发资源与销毁竞态； - 文件集、入口导出、依赖和
contributes影响； - 正式文档与调试页是否纳入；
- 验证方式、边界场景和仍存在的假设。
需求明确后直接实施；任务范围、必要澄清及协作模式遵循共享工作流。
实施
- 重新检查工作区状态，按任务范围和计划实施。
- 使用 Preact 而不是 React，并遵循状态与副作用规范：禁止 hooks，响应式状态推荐 signals，按生命周期清理
effect。跨库导入使用@zui/<name>；显式维护局部和库入口导出。 - 运行时外部依赖统一通过库内单例
LibLoader<T>按需加载，并落实加载失败、重试、异步销毁竞态和第三方实例清理；不要在组件内直接调用$.getLib、注入资源标签或维护第二份模块缓存。 - 按 布局与样式规范 实现样式，落实组件 CSS 的
@apply优先和src/style/index.ts统一入口规则；新增或修改布局类时，读取并执行 CSS utilities 核实流程，核对公开支持、实际效果及目标产物后再使用。落实语义标签、键盘、焦点和 ARIA。 - 仅在任务范围内调用或遵循
$zui-i18n、$zui-doc、$zui-dev；不要借机修改其他领域。 - 按共享工作流验证本次改动、修复范围内问题并复跑受影响检查；组件验收项目按本次涉及的行为选择。
- 汇报实现文件、公开 API、验证结果和未验证风险，不自动提交。
© 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 1 other file in .agents/skills/zui-component of easysoft/zui.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit d99f043
Compare with similar skills
Zui Component 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 |
|---|---|---|---|---|---|---|
| Zui Component this skilleasysoft/zui | 2.8k | — | ~586 | Automated safety check: Pass | MIT | |
| Boneyard0xGF/boneyard | 7.5k | — | ~2.2k | Automated safety check: Notes | MIT | |
| Tailwind To Stylexshadcn-labs/shadcn-cssinjs | 122 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Frontend8borane8/s2pipe | 107 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Deno Frontend Developmentdenoland/skills | 100 | — | ~783 | Automated safety check: Pass | MIT | |
| Preact Developeroaustegard/claude-skills | 150 | — | ~4.6k | Automated safety check: Pass | MIT |
Similar skills
Tailwind To Stylex
shadcn-labs/shadcn-cssinjs
Migrate TailwindCSS to StyleX. An agent skill from shadcn-labs/shadcn-cssinjs.
Frontend
8borane8/s2pipe
Conventions front (Slick, Preact, CSS structurel, islands). An agent skill from 8borane8/s2pipe.
- Official
Deno Frontend Development
denoland/skills
Chooses between running regular npm frontend frameworks under Deno and building with Fresh, Deno's island-architecture framework, with Fresh 2.x guidance.
Preact Developer
oaustegard/claude-skills
Guides building standards-based Preact apps with native-first choices, HTM syntax, import maps and vendored ESM, from single-file demos to larger builds.
Webpack Plugin Recipes
pproenca/dot-skills
A skill your agent uses whenever you face a webpack-build problem that ends with needing to write a plugin — 26 production-shaped recipes covering bundle-size budgets, forbidden architectural…
More from easysoft/zui
All 24 skills in this repoZui Build
easysoft/zui
使用内置 ZUI 资源从零创建可运行的独立网页或小型静态站点。向已有应用集成 ZUI 时使用 zui 技能. An agent skill from easysoft/zui.
Zui
easysoft/zui
在已有应用中集成、使用或排查 ZUI 3，直接创建和注册应用自定义组件，或使用已提供的 Web Components；适用于消费方项目，不用于开发 ZUI 源码仓库。
Zui Standards
easysoft/zui
查询 ZUI 主仓库的开发规范，为库开发及本地 exts 接入任务提供相关约束和仓库证据；规范查询保持只读. An agent skill from easysoft/zui.
Zuix Standards
easysoft/zui
查询独立 ZUI 扩展项目的开发规范，解析目标库、扩展工作区、Git 所有权及所需宿主上下文；始终只读. An agent skill from easysoft/zui.
Zui Wrap Lib
easysoft/zui
将已经可用的 UMD/IIFE 资源封装为 ZUI 主仓库的 lib/ 库，通过 LibLoader 按需加载。不转换资源格式，需求明确时形成集成计划后直接实施。
Zui Commit
easysoft/zui
审查并提交 ZUI 主仓库的改动；用户直接调用本技能即进入提交模式，必要检查通过后直接提交。只要求分析、评审或生成提交信息时保持只读。
Related
Works with
Categories
Questions about Zui Component
What does Zui Component do?
在 ZUI 主仓库的 lib/ 中设计、实现或修复组件及 Web Component 适配；需求明确时完成必要设计后直接实施。. Zui Component is an agent skill from easysoft/zui.
When should I use Zui Component?
Zui Component fits situations like: frontend & Design work in your project.
How do I install Zui Component in Claude Code?
Run `npx skills add easysoft/zui --skill zui-component -a claude-code`. Or copy the skill folder (.agents/skills/zui-component in easysoft/zui) into .claude/skills/zui-component in your project. Claude Code loads it when a task matches its description.
How do I install Zui Component in Codex?
Run `npx skills add easysoft/zui --skill zui-component -a codex`. Or copy the skill folder (.agents/skills/zui-component in easysoft/zui) into .agents/skills/zui-component in your project. Codex loads it when a task matches its description.
Can I use Zui Component 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-component -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-component, .gemini/skills/zui-component, .github/skills/zui-component and .opencode/skills/zui-component in your project.
What does Zui Component need to run?
SKILL.md names no scripts, command-line tools or credentials: Zui Component is instructions for the agent only.
Does Zui Component 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 Component 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. Review the folder before installing.
What licence does Zui Component use?
Zui Component 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 Component use?
About 586 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Zui Component?
Skills that share tags, products or a category with Zui Component: Boneyard (0xGF/boneyard, 7.5k stars), Tailwind To Stylex (shadcn-labs/shadcn-cssinjs, 122 stars), Frontend (8borane8/s2pipe, 107 stars) and Deno Frontend Development (denoland/skills, 100 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Zui Component?
easysoft (a GitHub organization) maintains it in easysoft/zui, which has 2,764 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on October 6, 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.