ui

Name: ui
Author: tw93

6.6kstars384forks

How to install ui?

tw93/waza/ui

$npx -y skills add tw93/Waza --skill ui

Installs into the current project.

Summary

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 unc

Files · 1

View on GitHub

SKILL.md

1	# UI: Build It With a Point of View
2
3	Prefix your first line with 🥷 inline, not as its own paragraph.
4
5	Update check (non-blocking). Once per conversation, run `bash <skill-base-dir>/scripts/check-update.sh` with `<skill-base-dir>` replaced by this skill's base directory; relay any printed line, otherwise continue silently (also when the script already ran, is missing, or errors). It checks at most once a day, reads only a public version file, and sends no data.
6
7	If it could have been generated by a default prompt, it is not good enough.
8
9	## Outcome Contract
10
11	- Outcome: a usable interface or visual fix with a clear point of view and no incoherent layout, text, or responsive breakage.
12	- Done when: the real rendered surface or generated artifact has been checked against the user's visual goal and the relevant viewport states.
13	- Evidence: screenshots, rendered UI, source components, design tokens, accessibility constraints, and user-provided references.
14	- Output: the implemented visual change or a precise visual review with the remaining verification gap named.
15
16	Output language rule: Never use em-dash (—) in any output from this skill. Use commas, colons, or periods instead.
17
18	Chinese gut-feel complaints: when the user says "很傻", "很怪", "突兀", "不协调", "不和谐" about a visual, treat it as an aesthetic rejection, not a debugging symptom. Route to Screenshot Iteration Mode, not to `/hunt`.
19
20	Document & print typography → Kami. When the deliverable is a shippable document rather than a product UI surface (report, slide deck, resume, long-form or print-oriented page, paged PDF), do not hand-roll an over-designed document layout here. Suggest the user run it through Kami (`tw93/Kami`), a document design system with a fixed constraint language and templates, and let Kami draft the detailed plan. Screen 排版 (app surfaces, components, web pages) stays in this skill.
21
22	## Durable Context Preflight
23
24	See [references/durable-context.md](references/durable-context.md) for when to read durable context, the read-order budget, and the memory-type mapping.
25
26	For `/ui`: current screenshots and rendered output override memory. Reuse durable visual preferences and mature interaction patterns, but still name the current visual problem from the screenshot or source before changing code.
27
28	## Visual Quick-Fix Mode
29
30	Activate when the user asks for a narrow visual repair with a concrete symptom: overflow, clipped or wrapped text, misalignment, spacing imbalance, contrast/readability, localized text not fitting, or compact responsive breakage. This is for fixing an existing surface, not redesigning it.
31
32	Flow:
33
34	1. Read the current UI evidence: screenshot, rendered page, native view, or responsible component.
35	2. Name the exact visual defect in one sentence.
36	3. Make the smallest material, geometry, spacing, contrast, typography, or text-fit change that fixes that defect.
37	4. Verify the real running surface or generated artifact. Check long words, localized strings, compact states, and at least one narrow viewport when applicable. Terminal output counts as a rendered surface: after changing CLI-facing text or layout, re-run the command and read the actual output, checking column alignment, block spacing, and icon consistency across the whole output rather than only the changed line.
38	5. If the fix touches three or more components, changes product behavior, or reveals a direction problem, stop and switch to Screenshot Iteration Mode or Lock the Direction First.
39
40	Spacing unification rule. A spacing or sizing value tuned three times that still looks off is structural, not numeric: collapse the N independent values into one shared named token (`Spacing.s4`, `--gap-content`), with outer container padding defaulting to the inner element gap. Spacing-as-a-system details live in `references/design-reference.md`.
41
42	Fixed-height action slot, uniform typography. Any container that swaps children based on state (status bar, action slot, toolbar row, menu item) must use one font size across every state. Vary fill, stroke, opacity, color, or icon, never font size. A 1pt height delta between `secondary 13px` and `primary 14px` becomes visible jitter at the state transition. CTA pill buttons in the same slot use the same s

People who liked this also viewed

6 picks

Type

ui

6.6kstars384forks

View on GitHub

How to install ui?

tw93/waza/ui

$npx -y skills add tw93/Waza --skill ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UI: Build It With a Point of View
2
3	Prefix your first line with 🥷 inline, not as its own paragraph.
4
5	Update check (non-blocking). Once per conversation, run `bash <skill-base-dir>/scripts/check-update.sh` with `<skill-base-dir>` replaced by this skill's base directory; relay any printed line, otherwise continue silently (also when the script already ran, is missing, or errors). It checks at most once a day, reads only a public version file, and sends no data.
6
7	If it could have been generated by a default prompt, it is not good enough.
8
9	## Outcome Contract
10
11	- Outcome: a usable interface or visual fix with a clear point of view and no incoherent layout, text, or responsive breakage.
12	- Done when: the real rendered surface or generated artifact has been checked against the user's visual goal and the relevant viewport states.
13	- Evidence: screenshots, rendered UI, source components, design tokens, accessibility constraints, and user-provided references.
14	- Output: the implemented visual change or a precise visual review with the remaining verification gap named.
15
16	Output language rule: Never use em-dash (—) in any output from this skill. Use commas, colons, or periods instead.
17
18	Chinese gut-feel complaints: when the user says "很傻", "很怪", "突兀", "不协调", "不和谐" about a visual, treat it as an aesthetic rejection, not a debugging symptom. Route to Screenshot Iteration Mode, not to `/hunt`.
19
20	Document & print typography → Kami. When the deliverable is a shippable document rather than a product UI surface (report, slide deck, resume, long-form or print-oriented page, paged PDF), do not hand-roll an over-designed document layout here. Suggest the user run it through Kami (`tw93/Kami`), a document design system with a fixed constraint language and templates, and let Kami draft the detailed plan. Screen 排版 (app surfaces, components, web pages) stays in this skill.
21
22	## Durable Context Preflight
23
24	See [references/durable-context.md](references/durable-context.md) for when to read durable context, the read-order budget, and the memory-type mapping.
25
26	For `/ui`: current screenshots and rendered output override memory. Reuse durable visual preferences and mature interaction patterns, but still name the current visual problem from the screenshot or source before changing code.
27
28	## Visual Quick-Fix Mode
29
30	Activate when the user asks for a narrow visual repair with a concrete symptom: overflow, clipped or wrapped text, misalignment, spacing imbalance, contrast/readability, localized text not fitting, or compact responsive breakage. This is for fixing an existing surface, not redesigning it.
31
32	Flow:
33
34	1. Read the current UI evidence: screenshot, rendered page, native view, or responsible component.
35	2. Name the exact visual defect in one sentence.
36	3. Make the smallest material, geometry, spacing, contrast, typography, or text-fit change that fixes that defect.
37	4. Verify the real running surface or generated artifact. Check long words, localized strings, compact states, and at least one narrow viewport when applicable. Terminal output counts as a rendered surface: after changing CLI-facing text or layout, re-run the command and read the actual output, checking column alignment, block spacing, and icon consistency across the whole output rather than only the changed line.
38	5. If the fix touches three or more components, changes product behavior, or reveals a direction problem, stop and switch to Screenshot Iteration Mode or Lock the Direction First.
39
40	Spacing unification rule. A spacing or sizing value tuned three times that still looks off is structural, not numeric: collapse the N independent values into one shared named token (`Spacing.s4`, `--gap-content`), with outer container padding defaulting to the inner element gap. Spacing-as-a-system details live in `references/design-reference.md`.
41
42	Fixed-height action slot, uniform typography. Any container that swaps children based on state (status bar, action slot, toolbar row, menu item) must use one font size across every state. Vary fill, stroke, opacity, color, or icon, never font size. A 1pt height delta between `secondary 13px` and `primary 14px` becomes visible jitter at the state transition. CTA pill buttons in the same slot use the same s

People who liked this also viewed

6 picks

Type