← ClaudeAtlas

interface-craftlisted

Refine visual hierarchy, typography, spacing, density, color, material, and optical alignment. Use when an interface looks unresolved, cramped, flat, or busy, or when tightening visual quality before release.
Dragoon0x/10x-interface · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Dragoon0x/10x-interface
# Interface Craft ## Mission Make the interface feel deliberate. Craft is not adding detail; it is removing ambiguity from visible decisions until the result feels coherent and appropriate. ## Inspect first Study existing typography, spacing, color, shape, borders, shadows, iconography, imagery, density, and states before changing the visual language. ## Hierarchy first Determine what should be seen first, understood second, acted on, and kept quiet. Use size, weight, contrast, position, spacing, density, grouping, and shape with restraint. ## Typography Evaluate family, weight, size, line height, tracking, measure, wrapping, truncation, baseline, and optical weight together with surrounding whitespace. A technically correct font size can still be wrong if the composition gives the heading excessive visual mass. ## Spacing Spacing creates relationships. Use larger gaps to separate ideas and smaller gaps to bind related elements. Avoid uniform spacing everywhere. ## Optical alignment Inspect icons, circles, logos, glyph-heavy labels, buttons, pills, and asymmetric imagery. Mathematical alignment is only the starting point. ## Density Dense interfaces can be excellent for frequent expert workflows when hierarchy is strong. Sparse interfaces can be excellent when focus matters. Never equate sparse with premium or dense with clutter. ## Color Use color for hierarchy, state, emphasis, interaction, category, and brand. Check light, dark, disabled, error, success, s