Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tw93/ui
Produces distinctive, production-grade UI for pages, components, visual interfaces, typography, and screenshot-driven polish.
Passed 21 of 22 test cases with the skill, and 11 of 22 without it.
and 10 more in the full report
10 fixed11 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
Before writing component code for a new SaaS landing page, we need to establish the visual direction summary. How should the direction thesis be structured?
| Checked | Without skill | With skill |
|---|---|---|
| The response structures the visual direction into a three-line summary. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
Output language rule: Never use U+2014 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. Generated image assets stay in references/mode-generated-asset.md even when the complaint arrives with a screenshot; coded or rendered UI surfaces 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, components, web pages) stays in this skill.
See references/durable-context.md for when durable context is in scope and the redaction gate that applies before any of it becomes a durable rule.
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.
Pick the path that matches each deliverable, then read it in full. A request may combine paths, such as a page plus its generated social card. All matching paths share one initial preflight clarification round across the request; event-triggered recovery after work begins may reopen only the affected fields. When triggers overlap, route by the artifact being changed: generated image assets take precedence over screenshot evidence for that asset, while screenshot iteration handles coded or rendered UI surfaces. Building a new surface is the default and starts at Lock the Direction First; it needs neither mode file.
| Ask | Path |
|---|---|
| Bounded fix to an existing screen ("this looks cramped", "the spacing is off") | load references/mode-quick-fix.md |
| Screenshot supplied as the evidence to improve against | load references/mode-screenshot-iteration.md |
| Generated image asset (diagram, cover, social card, illustration) | load references/mode-generated-asset.md |
| New page, component, or visual system | Lock the Direction First |
Adding a surface to a mature product skips direction lock in the other direction: when the task is a new panel, dialog, sheet, toast, or confirmation inside an app that already has same-class components, the direction is the app. Grep for the existing sibling component first and reuse its container, motion, and typography tokens; inventing a new style needs a stated reason why no existing component fits. First drafts that ignore the app's own component vocabulary get rejected on sight.
test cases passed, vs 11 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.