UI/UX Best Practices Frontend Design

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.

When to Apply

Reference these guidelines when:

• Structuring HTML for accessibility and semantics

• Writing CSS for responsive layouts and visual hierarchy

• Optimizing images and fonts for Core Web Vitals

• Designing forms with proper validation and error handling

• Adding animations and interactive elements

Rule Categories by Priority

Priority

Category

Impact

Prefix

1

Accessibility & WCAG Compliance

CRITICAL

access-

2

Core Web Vitals Optimization

CRITICAL

cwv-

3

Visual Hierarchy & Layout

HIGH

layout-

4

Responsive & Mobile-First Design

HIGH

resp-

5

Typography & Font Loading

MEDIUM-HIGH

typo-

6

Color & Contrast

MEDIUM

color-

7

Forms & Validation UX

MEDIUM

form-

8

Animation & Performance

LOW-MEDIUM

anim-

Quick Reference

1. Accessibility & WCAG Compliance (CRITICAL)

• access-semantic-html - Use semantic HTML elements for screen readers

• access-keyboard-navigation - Ensure full keyboard navigation

• access-focus-indicators - Provide visible focus indicators

• access-alt-text - Provide meaningful alt text for images

• access-aria-labels - Use ARIA labels for icon-only controls

• access-target-size - Ensure minimum touch target size (24×24px)

• access-heading-hierarchy - Maintain logical heading hierarchy

2. Core Web Vitals Optimization (CRITICAL)

• cwv-optimize-lcp - Optimize Largest Contentful Paint under 2.5s

• cwv-minimize-cls - Minimize Cumulative Layout Shift under 0.1

• cwv-improve-inp - Improve Interaction to Next Paint under 200ms

• cwv-responsive-images - Serve responsive images with srcset

• cwv-lazy-load-offscreen - Lazy load offscreen images and iframes

• cwv-critical-css - Inline critical CSS and defer the rest

3. Visual Hierarchy & Layout (HIGH)

• layout-visual-hierarchy - Establish clear visual hierarchy

• layout-whitespace - Use whitespace to improve readability

• layout-f-pattern - Design for F-pattern reading behavior

• layout-grid-system - Use a consistent grid system

• layout-single-cta - Limit to one primary CTA per screen

• layout-proximity-grouping - Group related elements with proximity

4. Responsive & Mobile-First Design (HIGH)

• resp-mobile-first - Design mobile-first with min-width queries

• resp-fluid-typography - Use fluid typography with clamp()

• resp-container-queries - Use container queries for components

• resp-touch-targets - Size touch targets for mobile (44×44px)

• resp-viewport-meta - Configure viewport meta tag correctly

5. Typography & Font Loading (MEDIUM-HIGH)

• typo-font-display - Use font-display to control loading behavior

• typo-preload-fonts - Preload critical web fonts

• typo-readable-line-length - Constrain line length (45-75ch)

• typo-line-height - Set appropriate line height (1.5-1.7)

• typo-system-font-stack - Use system font stack for UI elements

6. Color & Contrast (MEDIUM)

• color-contrast-ratio - Meet WCAG contrast ratio requirements (4.5:1)

• color-not-only-indicator - Never use color alone to convey information

• color-dark-mode - Support dark mode with prefers-color-scheme

• color-semantic-palette - Use semantic color names in design tokens

7. Forms & Validation UX (MEDIUM)

• form-inline-validation - Use inline validation after field blur

• form-error-messages - Write actionable error messages

• form-labels-above - Place labels above input fields

• form-input-types - Use correct HTML input types for mobile

• form-autocomplete - Enable browser autocomplete with correct attributes

8. Animation & Performance (LOW-MEDIUM)

• anim-gpu-properties - Animate only GPU-accelerated properties

• anim-will-change - Use will-change sparingly for animation hints

• anim-reduced-motion - Respect user motion preferences

• anim-duration-easing - Use appropriate animation duration and easing

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels

• Rule template - Template for adding new rules

• Example: access-semantic-html

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md