Frontend Component Architecture

Component Design

• Atomic design: atoms (button) -> molecules (search bar) -> organisms (header) -> templates -> pages
• Prefer composition over inheritance
• Props down, events up
• Co-locate styles, tests, and stories with components

State Management

Scope	Solution
Local	useState/useReducer (React), ref/reactive (Vue)
Shared	Zustand, Pinia, signals
Server	TanStack Query, SWR
Global	Redux Toolkit (only if truly needed)

Accessibility (WCAG 2.2 AA)

• Semantic HTML: <button> not <div onClick>
• ARIA labels for interactive elements
• Keyboard navigation: focus management, tab order