frontend-design

Commit to a bold aesthetic direction before coding, avoid overused fonts like Inter and Roboto, use tinted neutrals instead of pure grays, and vary spacing rhythm instead of uniform card grids. The Skill's AI Slop Test checklist identifies common generic patterns to eliminate.

It requires target audience, use cases, and brand personality or tone. Context is checked in loaded instructions first, then a .impeccable.md project file, and if neither exists the teach-impeccable flow must run before any design work begins.

Use OKLCH instead of HSL because it is perceptually uniform, meaning equal lightness steps look equal across hues. Reduce chroma as colors approach white or black, and tint neutrals slightly toward your brand hue for cohesion.

Animate only transform and opacity, since other properties trigger layout recalculation. For height animations like accordions, transition grid-template-rows from 0fr to 1fr instead of animating height directly.

Yes. The motion reference mandates prefers-reduced-motion handling with crossfade alternatives, and the interaction reference covers focus-visible rings, 44px touch targets, keyboard navigation, and WCAG contrast ratios.

Avoid it when no design context is available and the user cannot provide audience or brand information, since the Skill explicitly refuses to infer context from existing code. It also does not fit pure backend or logic-only tasks with no visual interface.