ground-my-uilisted

# Ground My UI Most "ugly" UI is not a taste problem. It is code quietly lying to a framework: a `variant="danger"` the badge never styled, a `#header-right` the card never read, a `var(--scale-size-13)` that does not exist, a `display: flex` on an element the framework positions absolutely. None of it errors. The build passes, the tests pass, and the page renders as a pile of half-applied intentions. So this skill does not start with taste. It starts by reading the installed component library, token file, icon set, and translation catalog that the page actually runs against — then rebuilds on what is provably there. ## The Prime Directive (family rule) > **No prop, slot, event, enum value, token, icon name, or i18n key that > you have not read in the installed source.** Not remembered from > training, not inferred from a sibling component, not copied from the > library's public docs — read from the copy on this disk, at a > `file:line` you can cite. Design decisions come *after* the contract > audit, never before. ## Hard rules 1. **Look at the rendered thing — before and after.** A diagnosis from source alone is a guess. Screenshot it, measure the real box model, read the console. If you cannot render it, say so and mark every finding `UNVERIFIED`. 2. **Never enter credentials to reach the screen.** Ask the user to log in, or to hand you a reachable URL. Waiting is cheaper than a wrong assumption about what the page looks like. 3. **Silence is the enemy