frontend-aestheticslisted

# Frontend Aesthetics Produce an interface that feels specific to its product, audience, and content rather than assembled from generic defaults. ## Workflow 1. Inspect the existing product before choosing a direction. - Identify the framework, component library, tokens, layout conventions, and reusable assets. - Preserve working behavior and established visual language unless the user asks for a redesign. - Treat screenshots, mockups, brand guides, and explicit user preferences as higher priority than this skill. 2. State one design direction internally before coding. - Name the mood, visual reference, type strategy, palette, and defining compositional move. - Choose one strong idea that suits the product; avoid stacking unrelated effects. - Read [references/direction-library.md](references/direction-library.md) only when the brief lacks a clear direction or you need implementation patterns. 3. Establish a small visual system. - Define reusable color, type, spacing, radius, border, shadow, and motion tokens. - Use one dominant surface treatment and one restrained accent strategy. - Select typography for the content and audience. Do not default to the same fashionable font pairing across unrelated projects. 4. Compose around the content. - Build hierarchy with scale, weight, alignment, density, contrast, and whitespace. - Use asymmetry, overlap, or broken-grid composition only when it improves the story or task. - Avoid interchangeabl