frontend-aesthetics

> **AI-consumed reference.** Produce taste; do not re-implement enforcement. This skill *complements* `rules/agent/design-system-usage.md` + `rules/agent/theme-consistency.md` (which enforce token usage) and `rules/agent/accessibility-rules.md` (which enforces a11y) — cross-link, don't duplicate. # Frontend Aesthetics Raise output from *consistent & correct* to *distinctive*. **House-style hard constraint (global CLAUDE.md "12-year-old friendly"): flat, clean, accessible, ONE restrained accent — NO neon, NO glow, NO gradient-mesh, NO sparkle.** "Distinctive" = tasteful type + cohesive tokens + dominant color + sharp accent, NOT flashy maximalism. Any output that adds glow/neon fails. > **Why this matters (Anthropic, *Improving frontend design through skills*):** generic "AI-look" UI is > distributional convergence — safe choices dominate training data, so sampling drifts to them. A taste > layer + an explicit plan-then-critique step is the documented corrective. This skill is that layer. ## Two-pass process (do this BEFORE writing any UI code) **Pass 1 — compact design plan.** Write a short plan, not code: - **Color:** 4–6 named hex values with role names (derive from ONE hue — see `design-tokens`). - **Type:** ≥2 type roles (display / body / mono) + the deliberate scale jumps (e.g. 14→20→40). - **Layout:** a sentence of intent + a rough ASCII wireframe of the key screen. - **Signature element:** the ONE distinctive thing that makes this product not-generic (a specific ...