ZUI 3 skill
ZUI 3 is a framework-agnostic web UI library that ships two agent skills: integrating it and building standalone pages fast.
- 2,765 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The zui skill edits frontend project files locally, with no access to secrets or external services.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/zui-3Detects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The zui skill edits frontend project files locally, with no access to secrets or external services.
This is third-party code. Review the repository files before installing.
What it does
ZUI 3 is a web UI component library with CSS utilities, CSS components and JS components that works in plain web projects and inside any framework through UMD or ESM. For agents, the library publishes two skills in a `skills/` folder: `zui` detects the ZUI version already in a project and safely installs, integrates, refactors or diagnoses ZUI 3, while `zui-build` assembles a standalone page or small static site in ZUI straight from a task description, with no dependency install or build tool needed. The skills install as a Codex plugin through the repository's own marketplace, or connect through whichever skill-loading method a given agent supports.
Who it is for. Frontend developers integrating ZUI into an existing project or building a standalone static page without a build step.
Good fit when
- A project already uses ZUI, and the agent needs to detect the version and connection method before editing anything.
- A standalone HTML page built on ZUI components is needed without installing dependencies or a build tool.
- Theming and dark mode are set through CSS variables, and the agent needs to pick the right ones.
- An existing ZUI integration in a project needs diagnosing or refactoring.
Not a fit when
- A project is already built on another framework's component system (such as Material UI), and switching libraries is not planned.
- A finished design mockup is needed, not a component set for assembling the interface yourself.
- The skill documentation and examples are still mostly in Chinese.
Example request
Use $zui to check the current project and integrate ZUI 3 into the existing stack.Limitations
The library is not tied to a specific framework, but each functional block ships as a separate workspace package that can be combined as needed. Connecting the skill through Codex needs separate `plugin marketplace add` and `plugin add` commands and a Codex restart in a new session. The skills documentation in the repository is in Chinese; the English README translates only the library's general description, not the skill instructions.
How to disable. Remove the plugin with the reverse Codex command, or delete the connected skill files from the agent's skills directory.
FAQ
How do I install the skill in Codex?
Run `codex plugin marketplace add easysoft/zui`, then `codex plugin add zui@zui`, restart Codex and start a new session.
What is the difference between zui and zui-build?
`zui` detects ZUI's version and connection method in an existing project and edits it safely; `zui-build` assembles a standalone ZUI page or site from scratch based on a task description.
Does zui-build need a build tool?
No, the skill assembles a standalone page with no dependency install and no build tool.
How do I connect ZUI without Codex?
Connect the `skills/` folder through your agent's own local-skill loading method; the plugin-command install is specific to Codex.
Can dark mode be configured?
Yes, theming and dark mode are controlled through the library's CSS variables; the `zui` skill picks the right ones for an existing project.
Discussion
No questions or reviews yet.
Related
SkillsA skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.
The building-ui skill opens an editable UI mock: you change it directly, then the agent implements it with TDD.
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
README in short
The library splits its functionality into separate workspace packages and positions itself as a framework-agnostic component layer connectable via CDN, ES Module or a custom build.