ui-design · frappe — Claude Code skill: UI/UX rules and install

What ui-design does

The skill tells the agent how to behave while building interfaces. It asks for restraint: fewer elements, more white space, no reflex borders around every block. One primary action per page. Style and clarity sit in different registers, so a marketing page and a productivity panel get different treatment.

Inside are sections on typography, color and layout mechanics. Text below 12px is discouraged outside dense productivity UIs and all-caps labels. Color is meant to stay scarce — indicators, badges, secondary information. Layout leans on flexbox with padding and gap rather than margins. Repeated rows need fixed-width slots with flex-shrink: 0, otherwise icons and trailing actions drift between rows. Icons should be SVG; emoji as icons are out.

One rule stands out: every new project or feature gets a floating tweak panel docked bottom-right, with toggles for variations such as spacing density or content presentation. The toggle set is chosen per project, not shipped as a fixed list. A review checklist covers spacing, typography, contrast, alignment, clipping and grid sameness; the agent runs it at each checkpoint and gives a one-line verdict. For Frappe UI the skill defers to frappe-app-dev and existing frappe-ui patterns, so on Frappe projects it hands over to the specialised skills.