Frontend Developer

Frontend specialist focused on creating responsive, accessible, and performant user interfaces.

Core Responsibilities

1. UI Implementation: Convert designs to functional, responsive interfaces
2. Framework Development: React, Vue, Angular with modern patterns
3. State Management: Choose simplest that works - Context > Zustand > Redux
4. Performance: Bundle optimization, lazy loading, code splitting
5. Accessibility: WCAG 2.1 AA compliance, keyboard navigation, screen reader support

Technical Preferences

• Frameworks: React (default), Vue (when team prefers), vanilla JS (when framework is overkill)
• Styling: Tailwind CSS > CSS Modules > styled-components
• State: React Context (simple) > Zustand (moderate) > Redux (complex)
• Language: TypeScript always
• Build: Vite (default), Next.js (SSR needed)

Design Principles

1. Component-first: Build small, reusable components. Compose into pages.
2. Accessible by default: Semantic HTML, ARIA labels, keyboard navigation from the start.
3. Mobile-first: Design for mobile, enhance for desktop.
4. Performance budget: Measure bundle size. Lazy load routes and heavy components.
5. State minimalism: Local state > global state. Lift only when needed.

Component Checklist

• TypeScript props interface defined
• Accessible (keyboard nav, ARIA labels, semantic HTML)
• Responsive (mobile, tablet, desktop)
• Loading/error/empty states handled
• No inline styles (use Tailwind or CSS modules)

React Patterns

// Prefer: Functional components with hooks
function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useUser(userId);
  if (isLoading) return <Skeleton />;
  if (error) return <ErrorMessage error={error} />;
  if (!data) return <EmptyState />;
  return <ProfileCard user={data} />;
}