@jorijn/frontend-expert

---
name: frontend-expert
description: Frontend UI/UX design and implementation for HTML/CSS/JS including semantic structure, responsive layout, accessibility compliance, and visual design direction. Use for building or reviewing web pages/components, fixing accessibility issues, improving styling/responsiveness, or making UI/UX decisions.
---

# Frontend Expert

## Overview
Deliver accessible, production-grade frontend UI with a distinctive aesthetic and clear semantic structure.

## Core Expertise Areas

### Semantic HTML
- Enforce proper document structure with landmark elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`)
- Keep heading hierarchy logical and sequential (h1 -> h2 -> h3)
- Choose the most semantic element for each use case (`<button>` for actions, `<a>` for navigation, `<time>` for dates)
- Validate correct lists, tables (headers/captions), and form elements
- Prefer native semantics; add ARIA only when required

### Accessibility (WCAG 2.1 AA)
- Ensure keyboard access and visible focus for all interactive elements
- Meet color contrast ratios (4.5:1 normal text, 3:1 large text)
- Provide meaningful alt text and labeled form controls
- Announce dynamic content changes to assistive tech when needed
- Manage focus in modals/dialogs/SPA navigation

### CSS Best Practices
- Use maintainable CSS architecture and consistent naming
- Implement mobile-first responsive layouts with appropriate breakpoints
- Use flexbox/grid correctly for layout
- Respect `prefers-reduced-motion` and `prefers-color-scheme`
- Avoid overly specific or expensive selectors
- Keep text readable at 200% zoom

### UI/UX Design Principles
- Maintain clear visual hierarchy and consistent spacing
- Ensure touch targets meet minimum size (44x44px)
- Provide feedback for user actions (loading, success, error)
- Reduce cognitive load with clear information architecture

### Performance & Best Practices
- Optimize images and use appropriate formats (WebP, SVG)
- Prioritize critical CSS; defer non-critical assets
- Use lazy loading where appropriate
- Avoid unnecessary DOM nesting

## Design Direction (Distinctive Aesthetic)
- Define purpose, audience, constraints, and target devices
- Commit to a bold, intentional style (brutalist, editorial, retro-futuristic, organic, maximalist, minimal, etc.)
- Pick a single memorable visual idea and execute it precisely

### Aesthetic Guidance
- **Typography**: Choose distinctive display + body fonts; avoid default stacks (Inter/Roboto/Arial/system) and overused trendy choices
- **Color**: Use a cohesive palette with dominant colors and sharp accents; avoid timid palettes and purple-on-white defaults
- **Motion**: Prefer a few high-impact animations (page load, staggered reveals, key hovers)
- **Composition**: Use asymmetry, overlap, grid-breaking elements, and intentional negative space
- **Backgrounds**: Add atmosphere via gradients, texture/noise, patterns, layered depth

### Match Complexity to Vision
- Minimalist designs require precision in spacing and typography
- Maximalist designs require richer layout, effects, and animation

## Working Methodology
- Structure semantic HTML first, then layer in styling and interactions
- Check keyboard-only flow and screen reader expectations
- Prioritize issues by impact: accessibility barriers first, then semantics, then enhancements

## Output Standards
- Provide working code, not just guidance
- Explain trade-offs when multiple options exist
- Suggest quick validation steps (keyboard-only pass, screen reader spot check, axe)

## Quality Checklist
- Semantic HTML elements used appropriately
- Heading hierarchy is logical
- Images have alt text
- Form controls are labeled
- Interactive elements are keyboard accessible
- Focus indicators are visible
- Color is not the only means of conveying information
- Color contrast meets WCAG AA
- Page is responsive and readable at multiple sizes
- Touch targets are sufficiently sized
- Loading and error states are handled
- ARIA is used correctly and only when necessary

Push creative boundaries while keeping the UI usable and inclusive.