/frontend

name: frontend
description: |
  빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에.
  트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI"
  안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"
user-invocable: true
disable-model-invocation: false
context: fork
agent: frontend-developer
allowed-tools: Read, Write, Edit, Bash, Glob, Grep

프론트엔드 UI 개발

빅테크 스타일(Stripe, Vercel, Apple)의 프론트엔드 UI를 **플래닝 → 구현**까지 한 번에 진행합니다.

워크플로우

/frontend [요청사항]
    ↓
1. 디자인 규격 작성 (플래닝)
    ↓
2. 사용자 확인
    ↓
3. frontend-developer 컨텍스트에서 구현
    ↓
4. 결과 검증

Phase 1: 플래닝

디자인 스타일 선택

| 스타일 | 특징 | 적합한 용도 | |--------|------|------------| | **Stripe** | 그라데이션, 밝은 톤, 미묘한 애니메이션 | 결제, SaaS, 랜딩 | | **Vercel** | 다크모드, 미니멀, 모노톤 | 개발자 도구 | | **Apple** | 넓은 여백, 타이포 강조 | 제품 소개 | | **Linear** | 다크, 보라색 악센트 | 생산성 앱 | | **Notion** | 밝은 톤, 아이콘 활용 | 문서/협업 |

규격서 템플릿

## [프로젝트명] 디자인 규격

### 스타일: [선택한 스타일]

### 컬러
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
- Border: #[hex]
- Accent: #[hex]

### 타이포
- Display: [폰트] / [크기]
- Body: [폰트] / [크기]

### 컴포넌트
1. [컴포넌트1]: [설명]
2. [컴포넌트2]: [설명]

### 레이아웃
- Max width: [px]
- 주요 구조: [설명]

Phase 2: 구현

이 스킬은 `frontend-developer` 컨텍스트로 실행됩니다 (frontmatter의 `context: fork` + `agent` 지정). 별도 에이전트를 다시 호출하지 않고 그대로 구현을 진행합니다.

구현 순서

1. CSS 변수 (globals.css) 2. 유틸리티 (lib/utils.ts) 3. UI 컴포넌트 (components/ui/) 4. 레이아웃 (components/layout/) 5. 기능 컴포넌트 6. 페이지 조립 7. 애니메이션

필수 의존성

npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init

Phase 3: 검증

구현 완료 후:

• [ ] TypeScript 에러 없음
• [ ] 빌드 성공
• [ ] 반응형 확인
• [ ] 접근성 확인

사용 예시

/frontend 로그인 페이지 만들어줘. Vercel 스타일로, 이메일/비밀번호 입력 폼과 소셜 로그인 버튼 포함.

/frontend 대시보드 만들어줘. Stripe 스타일로, 사이드바 + 메인 콘텐츠 영역 + 차트 카드들.