ui-design

Avoid the named AI slop tells: overused fonts like Inter, cards inside cards, purple-to-blue gradients, and glassmorphism without purpose. Establish a deliberate visual direction first, including a tinted neutral palette, a modular type scale, and varied section layouts.

Pick at most two font families and generate sizes from a modular scale ratio like 1.25 or 1.333. Use a 4px base spacing unit, keep component interiors tighter than gaps between components, and match line height to line count.

Only animate transform and opacity, since animating width, height, or margin triggers layout recalculation. Keep UI transitions between 200 and 350 milliseconds, use ease-out for entrances, and respect prefers-reduced-motion.

Yes, the guidance is framework-agnostic and explicitly covers Tailwind utilities, breakpoint steps, and container queries. It also instructs checking for existing design tokens in Tailwind config or CSS custom properties before inventing a new system.

Meet WCAG AA contrast of 4.5:1 for body text and 3:1 for large text, give every interactive element an accessible name, ensure keyboard navigation and focus trapping in modals, and prefer native HTML elements over divs with click handlers.

This Skill is for creating new pages, components, or design systems from scratch, not for auditing an existing interface. For auditing or verifying changes to existing UI, a review or visual QA skill is the better fit.