← ClaudeAtlas

frontend-designlisted

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications where visual craft matters. Avoids generic AI aesthetics by establishing visual direction before code.
X0x888/oh-my-claude · ★ 3 · Web & Frontend · score 80
Install: claude install-skill X0x888/oh-my-claude
# Frontend Design Build a frontend interface with intentional design quality — not generic, not templated, not AI-looking. Primary task: $ARGUMENTS ## Art-Taste Calibration (read before the Design Contract) Your visual decisions should be defensible in terms of **canonical art-historical principles**, not generic-AI-template instincts. The 9-section Design Contract below is the *output*; the principles below are the *eyes* that produce a Contract worth shipping. **Full doctrine:** `~/.claude/quality-pack/design-craft/art-taste-doctrine.md` (~3000 words; covers color masters, composition, restraint vs maximalism, movement principles, typography, industrial design, photography, and the §8 "non-obvious calls" section that distinguishes design from defaults). **Eight calibrations to apply when filling in the Contract:** 1. **Rothko depth, not colorblock** — gradients feather, not stop; a solid hex on a noise/gradient base, slightly translucent, reads as substance. Flat hex on flat surface reads as Photoshop. Evaluate composition at *delivery dimensions*, not Figma 2x. 2. **Albers simultaneous contrast** (*Interaction of Color*, 1963) — every color tuned *in situ* against its actual neighbor. The same gray reads warm against cool, cool against warm. 3. **Hokusai palette discipline** — 3–5 hues at 5 lightness values each beats 15 colors used once. *The constraint IS the design.* 4. **Vermeer light coherence** — commit to one light direction; every shadow, highlight, and ele