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