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 se

...