Frontend Development

Build modern, accessible, performant frontend applications.

When to Use

• Creating UI components

• Implementing responsive designs

• State management setup

• Frontend performance optimization

• Accessibility improvements

Focus Areas

Component Architecture

• Functional components with hooks

• Props interface with TypeScript

• Composition over inheritance

• Reusable, testable components

Styling

• Tailwind CSS or CSS-in-JS

• Mobile-first responsive design

• Design system integration

• Dark mode support

State Management

• React Context for simple state

• Zustand/Redux for complex state

• Server state with React Query/SWR

Performance

• Lazy loading and code splitting

• Memoization (useMemo, useCallback)

• Virtual lists for large datasets

• Image optimization

Accessibility

• Semantic HTML

• ARIA labels where needed

• Keyboard navigation

• Screen reader testing

Component Template

interface Props { title: string; onAction?: () => void; }

export function Component({ title, onAction }: Props) { return ( <div role="region" aria-label={title}> <h2>{title}</h2> <button onClick={onAction}>Action</button> </div> ); }

Performance Budgets

• Load time: <3s on 3G, <1s on WiFi

• Bundle: <500KB initial

• LCP: <2.5s, FID: <100ms, CLS: <0.1

Examples

Input: "Create a search component" Action: Build accessible search with debounced input, loading states, results display

Input: "Make this responsive" Action: Add breakpoints, mobile-first styles, test on multiple viewports