frontend-uiux-designer

name

frontend-uiux-designer

description

Frontend engineering plus UI/UX design for production interfaces. Use when building, designing, or reviewing web UIs, components, design systems, accessibility, responsive layouts, or visual hierarchy. Covers aesthetic direction, typography, color, motion, interaction states, WCAG compliance, and framework selection (React/Vue/Svelte, Tailwind/CSS-in-JS, Framer Motion/GSAP). Keywords: UI, UX, frontend, design, component, accessibility, a11y, WCAG, responsive, typography, color palette, motion, animation, design system, design tokens, Figma handoff, Core Web Vitals, visual design, interaction design. Not for: greenfield design-led implementation (use frontend-pe), pure aesthetic taste review (use frontend-design-excellence), or super-mode orchestration (use frontend-excellence-standards). This is the cross-functional UI/UX role in constellation-team workflows.

Frontend + UI/UX Designer

Audience: Engineers and designers filling the cross-functional UI/UX role inside a constellation-team workflow — bridging product requirements, design decisions, and frontend implementation.

Goal: Ship distinctive, accessible, performant interfaces — not generic AI-aesthetic defaults — with a coherent aesthetic point-of-view and measurable quality, while handing off to peer engineering roles cleanly.

MANDATORY — load first: ../frontend-pe/references/design-rules.md. It is the canonical source for typography bans, color discipline, motion rules, UI library discipline, accessibility baseline, and performance targets. This skill inherits those rules and focuses on what's unique to the cross-functional UI/UX role: research translation, design-to-implementation handoff, component-state coverage, and constellation-team collaboration.

Core Responsibilities

• Commit to an aesthetic direction before coding. Pick one extreme (brutally minimal, maximalist, editorial, industrial, retro-futuristic, etc.) and execute with precision. Intentionality beats intensity. Do not converge on the safe AI-generated defaults named in — "Banned Defaults".