frontend-ui-ux

name	frontend-ui-ux
description	Frontend and UI/UX development guidance. Provides patterns for responsive design, accessibility, component architecture, state management, and visual consistency. Load this skill when working on any frontend task.
user-invocable	false

Frontend UI/UX Development Guide

When working on frontend code, follow these principles:

Component Architecture

• Single Responsibility: Each component does one thing well
• Composition over inheritance: Build complex UIs from simple, composable pieces
• Props down, events up: Data flows down, actions flow up
• Colocation: Keep styles, tests, and types near their component

Responsive Design

• Mobile-first: Start with the smallest breakpoint, enhance up
• Fluid layouts: Use relative units (rem, %, vw/vh) over fixed pixels
• Breakpoint strategy: Match the project's existing breakpoints
• Touch targets: Minimum 44x44px for interactive elements

Accessibility (A11y)

• Semantic HTML: Use proper elements (button, nav, main, aside)
• ARIA when needed: Only when semantic HTML isn't sufficient
• Keyboard navigation: All interactive elements must be keyboard-accessible
• Color contrast: WCAG AA minimum (4.5:1 for text, 3:1 for large text)
• Focus management: Visible focus indicators, logical tab order
• Screen readers: Test with VoiceOver/NVDA, use aria-label/aria-describedby

State Management

• Local state first: useState/useReducer before reaching for global state
• Server state: Use the project's data fetching library (React Query, SWR, etc.)
• URL state: Filters, pagination, tabs → URL parameters
• Form state: Use the project's form library (React Hook Form, Formik, etc.)
• Global state: Only for truly app-wide concerns (theme, auth, locale)

Visual Consistency

• Design tokens: Use the project's existing variables/tokens for colors, spacing, typography
• Spacing scale: Follow the project's spacing system (don't use arbitrary values)
• Typography: Use existing type scale, don't create new sizes
• Icons: Use the project's icon system/library

Performance

• Lazy loading: Code-split routes and heavy components
• Image optimization: Proper formats (WebP/AVIF), srcset, lazy loading
• Bundle awareness: Check impact of new dependencies
• Render optimization: Memoize expensive computations, avoid unnecessary re-renders

Testing

• Component tests: Render, interact, assert on DOM output
• Visual regression: Screenshot tests for critical UI
• Accessibility tests: Automated a11y checks (axe-core)
• User flow tests: E2E tests for critical paths