---
name: frontend-patterns
description: Design or review interactive frontend code when state, accessibility, responsiveness, rendering, or user feedback patterns matter.
---

# Frontend Patterns

Fit the existing framework and design system. Treat accessibility and user-visible state as functional behavior, not polish.

## Component boundaries

Keep data loading, domain state, and presentation separated enough to test, but avoid wrappers that add no contract. Prefer local state until multiple consumers or persistence justify a shared store. Derive values instead of synchronizing duplicate state. Keep side effects explicit and cancel or ignore stale asynchronous work.

Represent loading, empty, partial, error, unauthorized, and success states deliberately. Preserve user input across recoverable failures. For optimistic updates, define rollback and duplicate-submission behavior.

## Accessible interaction

Use semantic HTML and the existing component primitives. Ensure every control has an accessible name, keyboard behavior, visible focus, appropriate error association, and sensible screen-reader announcements. Do not replace native behavior with ARIA unless necessary. Verify contrast and motion preferences when visual changes are in scope.

## Responsive and performant rendering

Start from content constraints, not device names. Prevent layout shift with stable dimensions where possible. Avoid unnecessary client-side rendering, global subscriptions, expensive work during render, and oversized dependencies. Measure before adding memoization or virtualization.

## Verification

Test public behavior through roles and labels. Add unit or component tests for state transitions and an E2E check for a critical cross-system journey when warranted. Inspect the result at representative widths and with keyboard navigation. If a design reference is unavailable, preserve the existing visual language and state the assumption.

Do not introduce a new state library, CSS system, analytics event, or design dependency without a concrete need and user scope.