ui-craft-ruleslisted

# ui-craft-rules Senior judgment for interface work: how color earns its place, how layout survives narrow viewports, when motion helps, and which states ship. `ui-slop-remover` strips synthetic signatures. This skill decides what goes in their place. R13 loads both on design work. ## Scope Apply for React or Next screens, Tailwind v3/v4, CSS Modules, Framer Motion when installed, component state design, type hierarchy, spacing rhythm, palette, responsive behavior. Confirm which libraries resolve before assuming an import. Out of: token file pipelines (`design-token-pipeline`), Apple platform audits (`apple-ui-audit`), backend and data layers. ## Color with a job Cap the live palette at three hues plus neutrals: | Role | Share | Notes | |---|---|---| | Dominant | ~60% | Brand or product field | | Neutral ramp | ~30% | Surfaces and text, tinted warm or cool | | Accent | ~10% | Primary action and focus | Semantic colors (success, warning, danger, info) sit outside the brand three. Extend with tints and shades of the same hue; a fourth decorative hue is a smell. - Gradients only for direction or brand. Never as default wallpaper. - Check contrast on the real background pair. Prefer APCA for body/UI on dark or thin type (target roughly Lc ≥75 body, ≥45 large, ≥30 non-text); keep WCAG 2.2 AA (4.5:1 / 3:1) as the floor when APCA is unavailable. - Text over images or busy fields needs a scrim or a solid plate under the type. ## Type before decoration - One family, or two