Back to Skills

ui

Produces distinctive, production-grade UI for pages, components, visual interfaces, typography, and screenshot-driven polish. Use when users ask in any language for UI, page, component, frontend, typography, screenshot-grounded visual polish, or complaints that a screen looks unclear, ugly, inconsistent, or visually wrong. Not for backend logic or data pipelines.

6,650stars392forksUpdated 7/29/2026

Security Assessment

Safe(95/100)
Security Score95/100

About ui

UI (from the waza collection) produces distinctive, production-grade user interfaces for pages, components, visual systems, and typography, and performs screenshot-driven visual polish. It is built to move past generic, default-prompt output by forcing a clear point of view: its guiding principle is that if a result could have been generated by a default prompt, it is not good enough. It triggers across languages, including Chinese gut-feel aesthetic complaints, and explicitly excludes backend logic and data pipelines.

The skill operates through an outcome contract (a usable interface or visual fix verified against the user's goal and relevant viewport states) and a mode picker that routes each request: bounded quick fixes to an existing screen, screenshot-grounded iteration when an image is the evidence to improve against, generated image assets (diagrams, covers, social cards), or building a new page/component/visual system. Before writing code it requires locking direction, reusing an existing app's component vocabulary and tokens when adding a surface to a mature product, and benchmarking against 2-3 mature products in the same category. Reference files cover design aesthetics, data-visualization dashboards (chart selection, tabular-nums alignment, row separators), durable-context handling with a redaction gate, and per-mode workflows. It also defers shippable documents (reports, decks, resumes, print) to a separate document-design system.

Target users are developers and designers who want frontend UI with intentional aesthetics, or who need a precise visual review of an existing screen. It suits building new components and pages, fixing cramped or incoherent layouts, iterating against screenshots, and producing information-dense dashboards.

FAQ

What types of work does this skill handle?

Building new pages, components, and visual systems; bounded fixes to existing screens; screenshot-grounded visual iteration; and generated image assets like diagrams, covers, and social cards. It is not for backend logic or data pipelines.

How does it decide which workflow to follow?

A mode picker routes the request: quick-fix mode for bounded changes, screenshot-iteration mode when a screenshot is the evidence, generated-asset mode for images, and a direction-lock flow for new surfaces. Each mode file is read in full before work begins.

Does it work with non-English requests?

Yes. It triggers on Chinese aesthetic complaints such as 很丑, 很怪, 突兀, or 不协调 and treats them as aesthetic rejections routed to screenshot-iteration mode rather than as debugging symptoms.

When should I use a different tool instead?

For shippable documents such as reports, slide decks, resumes, or print-oriented and paged PDFs, the skill recommends the Kami document-design system rather than hand-rolling a document layout here. Screen UI stays in this skill.

How does it approach dashboards and data-heavy screens?

A dedicated data-visualization reference gives dashboard defaults, a chart-selection table, and rules like tabular-nums for numeric columns, right-aligned numbers with left-aligned labels, and subtle row separators, loaded only when the surface is chart- or number-dense.

All Files

8 files
references/mode-generated-asset.md2.9 KB
View
references/design-data-viz.md2.3 KB
View
SKILL.md13.1 KB
View
references/design-reference.md28.0 KB
View
references/durable-context.md1.6 KB
View
references/design-aesthetic-quality.md3.7 KB
View
references/mode-screenshot-iteration.md3.5 KB
View
references/mode-quick-fix.md3.9 KB
View

Install ui

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill

Repository

tw93/waza