Frontend Developer Skill Purpose
Provides complete frontend development expertise for building production-ready web applications with modern frameworks (React, Vue, Next.js), comprehensive tooling setup, state management patterns, testing infrastructure, and performance optimization strategies.
When to Use Building new React, Vue, or Angular applications from scratch Setting up modern frontend tooling (Vite, ESLint, Prettier, testing frameworks) Implementing state management with Redux Toolkit, Zustand, or Context API Configuring authentication flows with token management and protected routes Optimizing bundle size and performance for production deployments Creating component libraries and design systems Setting up comprehensive testing (unit, integration, E2E) Quick Start
Invoke this skill when:
Building React, Vue, or Angular applications Setting up frontend tooling (Vite, ESLint, Prettier) Implementing state management (Redux Toolkit, Zustand, Context) Configuring authentication flows Optimizing bundle size and performance Setting up testing (Vitest, Jest, Playwright)
Do NOT invoke when:
Only backend API needed → Use backend-developer Database optimization → Use database-optimizer DevOps/deployment only → Use devops-engineer UI/UX design without code → Use ui-designer Decision Framework Framework Selection Frontend Framework Selection ├─ New Project (greenfield) │ ├─ Needs SEO + server-side rendering │ │ ├─ Team knows React → Next.js 14+ │ │ ├─ Team knows Vue → Nuxt.js 3+ │ │ └─ Team flexible → Next.js (ecosystem advantage) │ │ │ ├─ SPA without SSR requirements │ │ ├─ React experience → React 18+ (Vite) │ │ ├─ Vue experience → Vue 3 (Vite) │ │ └─ Enterprise/complex forms → Angular 15+ │ │ │ └─ Static site (blog, docs) │ └─ Astro, Next.js SSG, or Vite + React │ └─ Existing Project └─ Continue with existing framework (consistency)
State Management Selection Scenario Library Bundle Size Use Case Simple local state useState, useReducer 0 KB Component-level state Shared state (2-3 components) Context API 0 KB Theme, auth, simple global Medium app (<10 slices) Zustand ~1 KB Most apps, good DX Large app (10+ slices) Redux Toolkit ~11 KB Enterprise, time-travel debug Server state TanStack Query ~12 KB API data, caching Styling Approach Styling Decision ├─ Rapid prototyping → Tailwind CSS ├─ Component library → Radix UI + Tailwind ├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion) ├─ Large team → CSS Modules or Tailwind + Design Tokens └─ Performance-critical → Plain CSS / SCSS
Best Practices
Use functional components - Modern React pattern
Leverage hooks - Avoid class components when possible
Memoize expensive operations - Use useMemo, useCallback
Lazy load components - Reduce initial bundle size
Type everything - Leverage TypeScript
Test thoroughly - Unit, integration, and E2E tests
Optimize images - Use modern formats and lazy loading
Implement error boundaries - Catch errors gracefully
Make it accessible - ARIA labels, keyboard navigation
Monitor performance - Track Core Web Vitals
Common Patterns
Custom Hooks
function useFetch
useEffect(() => { fetch(url) .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, [url]);
return { data, loading, error }; }
Container/Presentational
// Presentational (dumb)
const UserList = ({ users, onUserClick }: UserListProps) => (
-
{users.map(user => (
- onUserClick(user.id)}> {user.name} ))}
);
// Container (smart)
const UserListContainer = () => {
const { users, fetchUsers } = useUsers();
useEffect(() => fetchUsers(), [fetchUsers]);
return
Troubleshooting Common Issues
State not updating
Check if using correct setter Verify dependency arrays in useEffect Ensure components are re-rendering
Component not re-rendering
Check for unnecessary re-renders Verify memoization is working Review prop changes
Performance issues
Profile with React DevTools Check for large bundle sizes Review unnecessary re-renders Implement code splitting
Tests failing
Verify test setup Check mock implementations Review async handling Ensure proper cleanup Quality Checklist Architecture Framework choice justified State management clear (server vs client state separated) Component structure logical Code splitting implemented Code Quality TypeScript strict mode enabled ESLint + Prettier configured Tests exist for critical paths No prop drilling (use state management) Performance Bundle size optimized (<200KB gzipped) Expensive operations memoized Images optimized (lazy loading, WebP) Third-party libraries evaluated Testing Testing framework configured Critical paths tested E2E tests exist Security Environment variables secured Input sanitization Auth tokens secure Dependencies audited Integration Patterns react-specialist Handoff: frontend-developer sets up tooling → react-specialist implements complex component logic Tools: Both use React; frontend-developer handles ecosystem tooling nextjs-developer Handoff: When SSR/SEO required → hand off for Next.js-specific features Tools: frontend-developer uses Vite/CRA; nextjs-developer uses Next.js App Router backend-developer Handoff: frontend-developer implements API client → backend-developer provides API contracts Tools: frontend-developer uses Axios/Fetch, TanStack Query frontend-ui-ux-engineer Handoff: frontend-developer sets up component structure → frontend-ui-ux-engineer styles Tools: Both use React; frontend-ui-ux-engineer adds Framer Motion, Tailwind design tokens Additional Resources Detailed Technical Reference: See REFERENCE.md Code Examples & Patterns: See EXAMPLES.md