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<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

frontend-developer-skill