Verify and present
The /better-ui Skill
Tighten the visual design of a working UI against eleven concrete rules.
Read the agent instructions ↗On this page
When to use it
A screen, component, or page works but looks rough, and you want a disciplined polish pass rather than a redesign.
Try it with your agent
/better-ui Audit the settings panel against the rules and fix what you find. Show before and after.What you get
- A per-rule list of violations, each with file, line, and fix.
- The fixes applied in rule order, with before and after screenshots when the surface renders.
Requirements and boundaries
- An existing UI that already functions: source files plus, where possible, a rendered surface such as a Storybook story or a dev URL.
- Access to the colour system in use so colours can move to Radix UI Colors.
The eleven rules cover separators, redundant text, audience-fit copy, Radix UI Colors with the scale role convention, optical alignment and concentric radii, 0.5px borders, ease-out 250ms motion only where needed, at most four type sizes with a 12px minimum, fewer forced decisions, radius and shadow by function, and no decorative eyebrows.
The pass changes appearance only. It does not add features, copy, or decoration, and it is not a substitute for a new visual direction.
Install with the official skills CLI. Version 1.7.0 requires Node.js 22.20.0 or later, npm/npx, Git, and network access. The command pins this catalogue’s source branch to master; @latest may change CLI requirements.
Installation defaults to the current project. The CLI lets you select agents and symlink or copy files; add --global only when you want a user-wide installation. Update with npx skills update. Review local changes before updating; this catalogue does not provide a backup guarantee.
Install better-ui
Choose your agent, then run the command in your terminal. Read the installation guide for package setup and update notes.
npx skills@latest add https://github.com/MrCoder/mrcoder.github.io/tree/master --skill better-ui