What is the waza-ui skill?
The waza-ui skill is the ui skill inside tw93's Waza plugin set. It makes an agent resolve five direction questions before writing code, routes bounded fixes, screenshots and generated images to separate modes, and bans common AI-default looks. It targets frontend work, not backend logic or data pipelines.
Waza is a set of eight small skills, each a habit for one engineering job. The ui skill is the one for frontend work, and its description promises distinctive production UI and visual polish grounded in screenshots.
Its main idea is that a default-prompt result is not good enough. Before code, the agent has to commit to a point of view, and afterwards it re-reads that thesis to see whether the screen drifted.
Four paths for four kinds of request
- A bounded fix to an existing screen, such as cramped spacing, loads a quick-fix mode file.
- A supplied screenshot as the evidence to improve against loads the screenshot iteration mode.
- A generated image asset, such as a cover or social card, loads the generated-asset mode.
- A new page, component or visual system goes through direction lock, with no mode file needed.
The five direction questions
- Who uses this, and in what context? A dashboard differs from a landing page.
- What is the aesthetic direction? Clean and modern does not count as one.
- What is the design signature, such as a typeface, a color system or an unexpected motion?
- What are the hard constraints: framework, bundle size, contrast and keyboard access?
- What is the signature micro-interaction, and how exactly is it implemented?
Who the waza-ui skill is for
Best for
- Building or restyling pages and components where the result must not look like a generic template. For related guardrails, see anti-ui-slop.
- Iterating from a screenshot of a rendered screen with a visual complaint, in English or Chinese.
- Adding a new panel or dialog to a mature app, where the skill says to reuse the existing sibling component first.
Not for
- Backend logic or data pipelines, which the skill description rules out directly.
- Reports, slide decks, resumes and print-oriented documents. The skill hands document typography to a typesetting skill if one is installed.
- Full redesigns when you only want a bounded fix. Ask for its quick-fix mode instead, and see also polish.
Use it with UiChemy
The skill produces code and visual fixes in your project, not a WordPress page. To bring a design into WordPress, build it in Figma and use UiChemy Figma to WordPress, or use AI to WordPress. Click Get Started on uichemy.com and review the result.
The skill expands multi-page work into a written design file. See also design-md and motion-system.
How to install Waza UI Skill: Distinctive Interfaces and Screenshot Polish
/plugin marketplace add tw93/Waza
/plugin install waza@wazaAdd the marketplace in Claude Code
Inside a Claude Code session, run
/plugin marketplace add tw93/Waza. This is the host plugin route that the README offers next to its one-line skills installer.Install the plugin
Run
/plugin install waza@waza. It installs all eight Waza skills, with the ui skill namespaced as /waza:ui. To update later, the README givesclaude plugin update waza.Codex route
For Codex, run
codex plugin marketplace add tw93/Waza, thencodex plugin add waza@waza. In Codex you invoke the installed skill by name and follow the same playbook.Describe the interface task
Ask for a page, a component or a fix, or paste a screenshot with your complaint. The skill's when_to_use field lists triggers such as build page, create component and screenshot with visual complaint.
Check that it loaded
Ask for a new settings page. The agent should name the user context, aesthetic direction, signature, constraints and micro-interaction first, show a three-line summary with a visual thesis, and only then write code.
Key features
- Outcome contractThe skill states its outcome, a done condition and the evidence it needs: screenshots, rendered UI, source components, design tokens, accessibility constraints and your references.
- Direction lock before codeFive dimensions must be resolved by evidence, a stated assumption or one compact clarification round with at most two sub-questions. A quiet utility surface may deliberately have no signature motion.
- Reference extractionIf you cite a site as the feel you want, the agent must extract three concrete properties from it: button radius philosophy, surface depth treatment and accent color family.
- Sibling component reuseFor a new panel, dialog, sheet or toast inside an existing app, the agent searches for the nearest existing component and reuses its container, motion and typography tokens.
- Source repo as referenceWhen given a repository to recreate, the agent reads the theme and token files, global styles and named components, and lifts exact hex codes, spacing entries, font stacks and radii.
- Native app restraintFor an existing native app with a coherent direction, the skill defaults to incremental polish, not a wholesale move to a newer platform style, unless you ask for it.
- Always-on bansNo thick side-border accents, gradient text, default glass cards, reflex purple-to-blue palettes, generic shadow-card grids, modal escapes for overflow, transition all or layout-property animation.
- Two motion rulesFrequency decides whether something animates: nothing keyboard-initiated animates. And every pressable thing moves on press, not only on hover, so a click is always acknowledged.
- Design file scaffoldFor production or multi-page work, the thesis grows into a nine-section DESIGN.md covering theme, palette, typography, components, layout, depth, do and don't, responsive and a prompt guide.
- Three options on requestWhen asked for options, the agent gives at least three variations across genuinely different dimensions, and offers labeled candidates unprompted when the decision is taste, not correctness.
Frequently asked questions
What is the waza-ui skill?
It is the ui skill from tw93's Waza set, an agent skill for building and restyling frontend interfaces. It locks a direction first, supports screenshot-driven iteration and bans common generic AI looks, and it checks the rendered result against your visual goal.
How do I install waza-ui?
Add the Waza marketplace and install the waza plugin with your host's plugin commands, shown in the install steps above. The ui skill ships inside the plugin with seven other skills, so you cannot install it alone through that route.
Does it work with Claude Code, Codex and Cursor?
The README names Claude Code and Codex for the plugin route. Its one-line installer also names Cursor, Gemini CLI, Copilot, Amp and Kimi Code CLI, but that form is outside this page. Cursor support through the plugin route is not stated.
What is the difference between its four modes?
Quick fix handles a bounded change to an existing screen. Screenshot iteration improves against a supplied image. Generated asset covers diagrams, covers and social cards. A new page or visual system skips the mode files and starts at direction lock.
Will it ask me many questions first?
Only a little. It infers from tokens, sibling components, screenshots and git history first, then asks at most one compact round with two sub-questions, and only when the missing answer would materially change a deliverable. Skipped answers accept its stated assumptions.
What does it say about animation?
Frequency decides whether to animate at all, so keyboard-initiated actions and anything done hundreds of times a day get no motion. Every pressable element should respond on press. The skill also bans transition all and layout-property animation.
Can it recreate a site I like?
Not by copying looks from memory. For a named reference, it extracts three concrete properties. For a repository you provide, it reads the real theme and token files and lifts exact values. It also offers brand presets only with your approval.
What license does waza-ui use?
The repository metadata and README list the MIT license. The README also says to feel free to use Waza and contribute. Check the repository for the current terms before bundling the skill into a product.