ui

Featured

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.

Web & Frontend 6,996 stars 410 forks Updated 4 days ago MIT

Install

View on GitHub

Quality Score: 95/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# UI: Build It With a Point of View Prefix your first line with 🥷 inline, not as its own paragraph. If it could have been generated by a default prompt, it is not good enough. ## Outcome Contract - Outcome: a usable interface or visual fix with a clear point of view and no incoherent layout, text, or responsive breakage. - Done when: the real rendered surface or generated artifact has been checked against the user's visual goal and the relevant viewport states. - Evidence: screenshots, rendered UI, source components, design tokens, accessibility constraints, and user-provided references. - Output: the implemented visual change or a precise visual review with the remaining verification gap named. **Output language rule:** Never use em-dash (—) in any output from this skill. Use commas, colons, or periods instead. **Chinese gut-feel complaints**: when the user says "很傻", "很怪", "突兀", "不协调", "不和谐" about a visual, treat it as an aesthetic rejection, not a debugging symptom. Route to `references/mode-screenshot-iteration.md`, not to `/hunt`. **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, com...

Details

Author
tw93
Repository
tw93/Waza
Created
6 months ago
Last Updated
4 days ago
Language
Python
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

ui

Production UI craft route when a page or component needs a committed visual direction, or a taste complaint such as 不好看、突兀、死板、沒回饋感 needs correction. Name the direction, implement required states, and verify rendered locales. Use `prototype` while direction is open, `debug` for render failures, and `qa` for browser acceptance evidence.

5 Updated 3 days ago
panda850819
Web & Frontend Listed

impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks. 中文:用户想要设计、重设计、塑造、批判、审查、打磨、澄清、蒸馏、加固、优化、适配、动效、上色、提取或以��他方式改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用壳、组件、表单、设置、引导页、空状态。处理 UX 审查、视觉层级、信息架构、认知负荷

1 Updated 4 weeks ago
Culeot
Web & Frontend Listed

ui-design-craft

Static visual judgment for generated or restyled UI. Load when you are about to produce or modify any user-facing surface - a landing/marketing page, product screen, mockup, or component styling - when a brief says "make it look good/premium/modern" with no design system attached, or when you notice generated UI converging on default AI aesthetics. NOT for motion decisions (motion-craft), for running a measured design review (design-review-gate), for charts (the environment's dataviz tooling), or for native mobile idiom questions (Apple HIG / Material directly).

2 Updated 2 days ago
F-e-u-e-r