| name | frontend-ui-ux |
| description | Design-first frontend development with modern UI/UX principles. Use when working on design, UI, styling, layout, CSS, responsive design, animations, components, or frontend visual tasks. |
Frontend UI/UX
Trigger: "design", "UI", "style", "layout", "CSS", "responsive", "animation", "component", "frontend", "redesign", or any visual/frontend task.
Purpose
Design-first frontend development. Crafts stunning UI/UX even without design mockups. Follows modern design principles and accessibility standards.
Design Process
Phase 1: Assess
- Understand the user need and context
- Identify existing design patterns in the project
- Determine the visual hierarchy and layout requirements
- Note accessibility requirements (WCAG 2.1 AA minimum)
Phase 2: Design
- Layout — Grid systems, spacing scale, responsive breakpoints
- Typography — Font scale, line height, readability
- Color — Primary/secondary palette, contrast ratios, dark mode
- Components — Reusable, consistent, accessible
- Animation — Purposeful, performant (prefers-reduced-motion)
Phase 3: Implement
- Use existing CSS framework/patterns if present
- If no framework, apply modern CSS (custom properties, grid, flexbox)
- Mobile-first responsive design
- Semantic HTML with ARIA attributes where needed
- Test at multiple viewport sizes
Phase 4: Verify
- Check color contrast ratios (4.5:1 minimum for normal text)
- Verify keyboard navigation works
- Test with screen reader considerations
- Check performance (no layout shift, fast paint)
CSS Conventions
- Use CSS custom properties for theming
- Mobile-first media queries
- BEM or project-specific naming convention
- No inline styles except for dynamic values
- Use
rem for spacing, em for component-relative sizing
Anti-Patterns (NEVER)
- !important unless absolutely necessary
- Inline styles for static properties
- Fixed pixel widths for responsive layouts
- Hardcoded colors without CSS variable references
- Animations without prefers-reduced-motion check
- Non-semantic HTML (divs for buttons, spans for headings)
