Frontend Patterns

Overview

User interfaces exist to help users accomplish tasks. Every UI decision should make the user's task easier or the interface more accessible.

Core principle: Design for user success, not aesthetic preference.

This skill is advisory. Explicit user instructions, CLAUDE.md, repo standards, and approved plans override every suggestion here.

Read only the references needed for the current UI task:

references/ui-state-and-feedback.md for loading/error/empty/success ordering, skeleton vs spinner, and mutation feedback
references/accessibility-and-forms.md for WCAG-oriented checks, keyboard/focus, labels, form patterns, and mobile usability
references/performance-and-layout.md for responsive checks, motion, overflow, URL state, performance guardrails, and light/dark mode checks
references/design-md-authoring.md for creating or updating a spec-aligned project-local DESIGN.md from screenshots, existing UI, user preferences, or a selected inspiration style
references/design-md-inspiration-index.md only when the user asks for a style reference, brand-like direction, moodboard, or DESIGN.md-style examples