Frontend

Skill jh941213/my-cc-harness/skills/frontend

빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에. 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI" 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"From its SKILL.md

Install

npx -y skills add jh941213/my-cc-harness --skill frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.7 KB, as published. Nobody here has run it

프론트엔드 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 지정). 별도 에이전트를 다시 호출하지 않고 그대로 구현을 진행합니다.

구현 순서

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

필수 의존성

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 스타일로, 사이드바 + 메인 콘텐츠 영역 + 차트 카드들.