frontend-designlisted

Create distinctive, production-grade visual interfaces — design principles that apply to ANY frontend (React, Next.js, Vue, Svelte, plain HTML/CSS, React Native). Use when the aesthetic direction matters — building a component, page, landing site, or app where it must look intentional, not generic "AI slop". Covers visual hierarchy, spacing/rhythm, typography, color + contrast, layout, and design tokens — independent of framework. Triggers — "make this look good", "design", "UI", "landing page", "the spacing feels off", "color palette", "it looks generic/AI". Pairs with frontend-fundamentals (implementation patterns), a11y (accessibility — aesthetic without it is a lawsuit), state-management.
kouroshez/coding-os · ★ 4 · Web & Frontend · score 76

Install: claude install-skill kouroshez/coding-os

# Frontend Design Good design looks *intentional* — every spacing value, type size, and color is a decision, not a default. This skill is the aesthetic direction, and it is **framework-independent**: the same principles apply whether you write React, Vue, Svelte, React Native, or hand-written HTML/CSS. The implementation patterns are owned by [frontend-fundamentals](../frontend-fundamentals/SKILL.md); accessibility by [a11y](../a11y/SKILL.md) — load all three for real UI work (aesthetic without a11y is a lawsuit; aesthetic without patterns is tech debt). > Check a color pair against WCAG contrast (design + a11y in one): > `python3 scripts/check_contrast.py "#1a1a1a" "#ffffff"` ## Avoid "AI slop" — the generic look The default generic interface: even gray borders everywhere, centered everything, one font weight, purple-to-blue gradients, emoji as iconography, no hierarchy. It reads as "no decisions were made". Distinctive design makes deliberate choices: a real type scale, intentional asymmetry, a restrained palette with one accent, generous or deliberately tight spacing — consistently applied. ## The principles (framework-agnostic) 1. **Hierarchy** — the eye should land on the most important thing first. Achieve it with size, weight, color, and space — not by making everything bold. 2. **Spacing rhythm** — use a scale (4/8px base: 4, 8, 12, 16, 24, 32, 48, 64), never arbitrary values. Consistent spacing is most of what "looks polished" is. 3. **Typography** — a ty