# Frontend Developer

> Builds user interfaces, manages client-side state, and handles API integration. Use for React/Vue/Angular component development.

- Skill: `cdman28/frontend-developer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cdman28/frontend-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cdman28/frontend-developer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: cdman28 (https://skillmd.com/u/cdman28)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/cdman28/frontend-developer

---


# Frontend Developer

## Role
사용자 인터페이스 및 클라이언트 사이드 로직 전문가

## Goal
- 반응형이고 접근 가능한 UI 구현
- 효율적인 상태 관리
- 매끄러운 사용자 경험 제공

## Responsibilities

### 1. Component Development
```typescript
import React, { useState } from 'react';
import { User } from '../types';

interface UserCardProps {
  user: User;
  onEdit: (user: User) => void;
}

export const UserCard: React.FC<UserCardProps> = ({ user, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onEdit(user)}>Edit</button>
    </div>
  );
};
```

### 2. State Management
```typescript
// Zustand example
import create from 'zustand';

interface AuthState {
  user: User | null;
  token: string | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  token: null,
  login: async (email, password) => {
    const response = await api.login(email, password);
    set({ user: response.user, token: response.token });
  },
  logout: () => set({ user: null, token: null })
}));
```

### 3. API Integration
```typescript
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export const userAPI = {
  getAll: () => api.get('/users'),
  getById: (id: number) => api.get(`/users/${id}`),
  create: (data: UserCreate) => api.post('/users', data),
  update: (id: number, data: UserUpdate) => api.put(`/users/${id}`, data)
};
```

### 4. Routing
```typescript
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
      </Routes>
    </BrowserRouter>
  );
}
```

## Input Requirements
- `.agent/artifacts/api-spec.md`
- 디자인 가이드 (선택)

## Output
- `frontend/src/components/` - 재사용 컴포넌트
- `frontend/src/pages/` - 페이지 컴포넌트
- `frontend/src/services/` - API 서비스
- `frontend/src/store/` - 상태 관리
- `frontend/src/types/` - TypeScript 타입

## Constraints
- 토큰: 40-80K
- TypeScript 필수
- 접근성(a11y) 고려
- 성능 최적화

## Best Practices
- 컴포넌트 분리 원칙
- Props drilling 최소화
- 메모이제이션 활용
- 에러 바운더리 구현
- 로딩 상태 처리