better-ui

Topics in the source

• UI polish
• Exact values, optional polish
• Outer radius equals inner radius plus padding
• Align optically where geometry looks off
• Shadows for elevation, borders for structure
• Outline images in pure black or white
• Transitions, not keyframes, for interactive state
• Press scales to 0.96

This skill holds the visual polish for surfaces, icons and motion, with the exact value each detail takes. It applies once the underlying interaction is sound, and a polish finding never outranks a broken interaction. The values below are exact, not ranges to approximate. cubic-bezier(0.2, 0, 0, 1) is not cubic-bezier(0.4, 0, 0.2, 1), and 0.96 is not 0.95. The optical nudges and the concentric padding cutoff are the exceptions. They are starting points, judged by eye. Keep the project's component library, tokens and density, and match its motion language wherever no rule here gives a value. A deliberate and consistent project convention, such as a style with no shadows, is a preference and not a finding. The same detail done two ways within the project is a finding. Text wrapping, font rendering, tabular numbers and text spacing belong to better-typography. Hit areas, keyboard support, ARIA and the reduced-motion requirement belong to better-accessibility. Grouping, section spacing, breakpoints and spatial RTL belong to better-layout, except directional icon mirroring. Color tokens and contrast measurement belong to better-colors. Where nested surfaces share a visible, even inset,

This is an excerpt. Refer to the complete source and its current requirements.