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
const UserList = ({ users, onUserClick }: UserListProps) => (
<ul>
{users.map(user => (
<li key={user.id} onClick={() => onUserClick(user.id)}>
{user.name}
</li>
))}
</ul>
);
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
Code Quality
Performance
Testing
Security
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
