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

1. Use functional components - Modern React pattern
2. Leverage hooks - Avoid class components when possible
3. Memoize expensive operations - Use useMemo, useCallback
4. Lazy load components - Reduce initial bundle size
5. Type everything - Leverage TypeScript
6. Test thoroughly - Unit, integration, and E2E tests
7. Optimize images - Use modern formats and lazy loading
8. Implement error boundaries - Catch errors gracefully
9. Make it accessible - ARIA labels, keyboard navigation
10. Monitor performance - Track Core Web Vitals

Common Patterns

Custom Hooks

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  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) => (
  <ul>
    {users.map(user => (
      <li key={user.id} onClick={() => onUserClick(user.id)}>
        {user.name}
      </li>
    ))}
  </ul>
);

// Container (smart)
const UserListContainer = () => {
  const { users, fetchUsers } = useUsers();
  useEffect(() => fetchUsers(), [fetchUsers]);
  return <UserList users={users} onUserClick={handleClick} />;
};

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