ui-skills

To enforce accessible UI constraints in a React project, apply opinionated rules for aria labeling on icon-only buttons, safe-area-inset respect, and accessible keyboard primitives. This ensures your frontend components meet strict interaction and accessibility standards.

Maintaining UI consistency with Tailwind CSS involves using default values unless custom ones exist, adhering to a fixed z-index scale, and applying text-balance for headings. These layout and typography constraints ensure a cohesive visual language across Next.js projects.

Yes, this UI skill works with motion/react by enforcing it as the standard for animations. It also suggests tw-animate-css for micro-animations while ensuring large paint properties are not animated and reduced motion preferences are respected.

Adding aria labels to icon-only buttons in component libraries is mandatory under these accessibility constraints. You must also show errors near the action, avoid blocking paste in inputs, and use accessible primitives for keyboard and focus behavior.

For design systems, you should use text-balance for headings and text-pretty for body text, maintain a fixed z-index scale, and avoid modifying letter-spacing. These constraints enforce layout discipline and a cohesive visual language.

You should avoid gradients unless explicitly requested and limit accent color usage to one per view to maintain visual cohesion. These design constraints prevent visual clutter and ensure a disciplined, accessible interface across your components.