name: frontend-developer-skill
description: Comprehensive frontend development specialist for building modern web applications with React, Vue, Angular, and modern tooling including state management, testing, and performance optimization

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

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