evondevKit README

The project's README from github.com/evondev/evondevKit. As one markdown file: README.md.

evondevKit

English | Tiếng Việt

evondevKit / ui-ux: UI dashboard without the AI hassle

If you find this useful, you can support the project via MoMo (Vietnam):

MoMo QR code to support evondevKit

A ui-ux skill for Claude Code: builds and polishes app UIs (dashboards, lists, tables, forms, settings, modals) using your project's own component library and colors.

Overview: evondev-uiux.vercel.app/en/ui-ux

Install

Claude Code

/plugin marketplace add evondev/evondevKit
/plugin install evon@evondevkit

In the VS Code extension or the desktop app, /plugin isn't available: type / → Manage plugins → Marketplaces, add evondev/evondevKit, then install evon from the Plugins tab.

Invoke with /evon:ui-ux.

Update

/reload-plugins only reloads what's already downloaded; it doesn't fetch a new version. To skip updating by hand: Marketplaces → evondevkit → Enable auto-update. Claude Code then pulls the latest version every time it starts.

Uninstall

/plugin uninstall evon@evondevkit
/plugin marketplace remove evondevkit

The first line removes the skill, the second removes the source too (run it if you won't reinstall). Afterwards, start a new session so the skill is no longer loaded.

Cursor, OpenCode, Codex, Antigravity, ZCode, omp

Run at the project root (bunx works in place of npx):

npx skills add evondev/evondevKit

The command asks which tools to install for, then copies the skill into .agents/skills/ui-ux/, the folder Cursor, OpenCode, Codex, Antigravity and omp all read (ZCode gets .zcode/skills/ui-ux/). To preselect tools, add -a, e.g. -a cursor -a zcode. To share it across all projects, add -g.

Tool Invoke
Cursor, Antigravity /ui-ux Build an orders list…
Codex $ui-ux Build an orders list…
ZCode $ui-ux Build an orders list… (or pick it from the / menu)
OpenCode Use the ui-ux skill to build an orders list…
omp /skill:ui-ux Build an orders list…

Without the name, the tool turns the skill on when the prompt matches its description. ZCode doesn't show the skill yet? Open Settings → Skills and click Refresh. Update: npx skills update. Uninstall: npx skills remove ui-ux at the project root; if you installed with -g, use npx skills remove -g ui-ux. The skill is tested most on Claude; other tools work but may differ in places.

Beta. Works well for light-theme app UIs: tested on 70 prompts across real projects. Most testing so far used Vietnamese prompts. English prompts follow the same flow but have had less testing. Currently testing: adding dark mode to existing apps. The skill keeps changing as tests come in; get the latest as in Update above. To hear about new versions, click Watch → Custom → Releases on GitHub. Each release has a few lines on what changed in Releases.

The skill isn't perfect. It does its best within its own set of rules. Taste varies, and every project has its own quirks: after it builds, tweak by hand or ask your AI to adjust.

If something looks off, open an issue with a link or screenshot of the screen and the prompt you used.

Usage

By default the skill works like a designer: brief → you approve → 2–3 wireframes → you pick → build. Same in English or Vietnamese. To take a different path, say so in the prompt:

You want Type The skill
Build or redo a screen (default) /evon:ui-ux Build an orders list: order ID, customer, total, status. or /evon:ui-ux Redesign the jobs page. Brief → you approve → 2–3 wireframes → you pick → builds. Wireframes have a top bar: toggle concise text, no repeats, toggle color, try accent colors, preview mobile (☰ is clickable, bottom bar when there are few items), preview empty / error states, read pros and cons, copy a feedback line. Reply ok to build the recommended option
Build right away, no wireframes /evon:ui-ux Just build the notification settings screen. No wireframes (saves tokens): the skill picks the option it would recommend and builds it. On delivery it says which layout it chose and why
Lock a design system before building many screens /evon:ui-ux Build a design system for a clinic management app first, no screens yet. Tokens and seven base components (button, badge, input, card, list row, modal, empty state) on a /design-system page. No wireframes, one stop for your approval. If the project uses shadcn or its own kit, it adjusts that kit. Later screens are assembled from exactly this set
Find what's wrong with a UI /evon:ui-ux Review this page, what's off: http://localhost:3000/orders A table of issues with before/after screenshots. Reply fix 1, 3 before it changes anything
Tidy up, keep the brand and layout /evon:ui-ux Rebuild this page, keep the brand. Swaps controls, tightens cards, keeps your colors. Browse-to-pick pages and dashboards (formula B of P12) get an extra colored-version line. Reply ok or drop 7
Switch fully to the skill's style /evon:ui-ux Rebuild completely in the skill's style, drop the old style. Same as above, but changes the colors too, keeping only the logo and accent color
Clean up code, keep the look /evon:ui-ux Refactor the /settings CSS to Tailwind, keep the UI identical. Swaps classes, removes old CSS, compares before and after screenshots

Anything smaller than a screen (fix a component, add a dropdown, fix a bug) the skill just does, no wireframes.

Tips

Checking the result

What the skill keeps

Developing the skill: see DEVELOP.md (Vietnamese). License: MIT.

evondevKit (evondev/evondevKit)

Searching Database…

413 ·GitHub
EvondevKit
What is this?evondevKit is a UI/UX skill for Claude Code and other AI coding agents that builds and polishes app UIs - dashboards, lists, tables, forms, settings, modals - using your project's own component library and colors.
Is this a standalone app or something I add to my coding agent?It is an agent skill/plugin, not a standalone application - it plugs into tools like Claude Code, Cursor, OpenCode, Codex, Antigravity, ZCode or omp and drives their existing UI-building capability.
Which coding agents does it support?It works with Claude Code, Cursor, OpenCode, Codex, Antigravity, ZCode and omp, invoked with slash-commands like /evon:ui-ux or /ui-ux depending on the tool.
Does it work with any UI framework, or do I need Tailwind?It adapts to whatever you already have - shadcn, MUI or in-house kits - and even works without Tailwind or a package.json for plain HTML or WordPress projects. It's still in beta, tested most on light-theme app UIs and mostly with Vietnamese prompts so far.
What does a typical build request look like?By default it works like a designer: it writes a brief, waits for your approval, offers 2-3 wireframes you can pick from (with toggles for text density, colors, mobile preview, empty/error states), then builds the chosen option.
Can it audit an existing screen instead of building a new one?Yes - ask it to review a page and it returns a table of issues with before/after screenshots, and you can reply with something like 'fix 1, 3' to apply only those fixes.
Will it keep my brand colors and existing components?Yes, by default it keeps your brand colors and reuses your existing component library instead of imposing its own look, unless you explicitly ask it to drop the old style.
How do I update or remove the skill?In Claude Code run 'claude plugin marketplace update evondevkit' then /reload-plugins, or enable auto-update from the Marketplaces menu; for other tools run 'npx skills update' or 'npx skills remove ui-ux' to uninstall.
What are similar projects?oil-ui, open-steps, taste-skill, appllama-skills, pstack-claude, skills, skills, ux-ui-agent-skills
Which topics is it in?shadcn-ui, ui-design, claude-code-plugin, claude-code-skill, agent-skill, claude-skills, tailwindcss, component-library, design, skill, cursor, skills
Creator
evondev
Size
3.6 MB
Stars
413
Updated
CommitOct 14Releasev0.3.18Oct 05
Age
29d
Commits · 90 Days