# Frontend Component Architecture

> Frontend component design. State management, routing, accessibility, responsive design, performance.

- Skill: `aselimc/frontend-component-architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add aselimc/frontend-component-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aselimc/frontend-component-architecture/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aselimc (https://skillmd.com/u/aselimc)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/aselimc/frontend-component-architecture

---


# 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
- Color contrast: 4.5:1 minimum for text

## Performance
- Code splitting: lazy load routes and heavy components
- Virtual scrolling for long lists (>100 items)
- Image optimization: next/image, srcset, lazy loading
- Monitor Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1

## Key Libraries
React, Angular, Vue 3, Tailwind CSS, shadcn/ui