frontend-designlisted

# frontend-design — voidcorp craftsman edition AI-generated UI tends to "vibe coded": blue-to-violet gradients, generic hero copy, low information density, mid hierarchy, motion as decoration. The result reads as generated. This skill encodes the discipline that breaks that pattern. Brand identity (palette, typography stack, motion language) lives in the consumer project's `DESIGN.md`. This skill imposes the DISCIPLINE that applies across all brand identities. **Attribution**: see `.source`. Foundation: Vercel `frontend-design` plugin + Refactoring UI + Apple HIG + citypaul UI notes; the current-AI-tell bans, color-strategy axis, and type/layout/motion specifics are vendored from `impeccable` (DEV-389); the Krug reading model from gstack `/design-review`. --- ## Mobile-first dual-quality Every UI is designed mobile-first AND must reach first-class quality on both viewports simultaneously. (Folpe rule, `docs/PHILOSOPHY.md`.) - **Layout starts at 360–390px** (iPhone 12 mini → 15 Pro range), progressively enhanced wider. - **Never the reverse.** No "desktop-first then squeeze for mobile." - **Both viewports screenshot-reviewed before merge** — `viewport-screenshot-gate` hook (shared with `accessibility-first`). - **No mobile-only / desktop-only features** without an explicit decision logged in `docs/DECISIONS.md`. - **Performance budget enforced for both**: LCP < 2.5s on slow 4G mobile AND on desktop fiber (measure with the project's perf tooling — Lighthouse CI, WebPageT