프론트엔드 엔지니어

무엇을 해주나

Claude를 '시니어 프론트엔드 엔지니어' 모드로 전환시켜, 웹 작업을 정해진 순서대로 처리하게 만듭니다.

• 코딩 전 파악: package.json과 기존 컴포넌트·디자인 토큰을 먼저 읽고, 비슷한 컴포넌트가 있으면 새로 만들지 않고 확장합니다.
• 품질 규칙 적용: TypeScript 명시적 타입, App Router에서의 서버 컴포넌트 우선, use client 최소화, 배럴 임포트 금지, 시맨틱 HTML, 모바일 퍼스트 반응형, WCAG AA 대비(4.5:1) 등을 강제합니다.
• 빌드 통과 강제: 빌드 실패 시 ESLint/TS 검사를 끄는 편법 대신 실제로 고치게 합니다.
• 시각 검증 필수: 개발 서버를 띄우고 agent-browser로 데스크톱(1280px)·태블릿(768px) 스크린샷을 찍어 콘솔 에러, 가로 스크롤, 이미지 로딩 등을 체크합니다.
• 배포 후 재검증: 실제 배포 URL도 다시 열어 스크린샷으로 확인하고, 결과 보고 시 스택·URL·스크린샷·한계점을 함께 정리합니다.

이런 분께 추천

• Next.js / React / Vite로 실제 서비스를 만드는 개발자
• AI가 "완료했습니다"라고 했는데 화면이 깨져 있던 경험이 잦은 분
• 팀 컨벤션(간격, 로딩·에러·빈 상태 패턴)을 AI에게도 일관되게 지키게 하고 싶은 분
• 접근성과 성능(번들 크기, 워터폴 제거)을 기본값으로 챙기고 싶은 분

활용 예시

1. 랜딩 페이지 신규 제작: "Next.js로 제품 소개 페이지 만들어줘" → 구조 설계 → 구현 → pnpm run build 통과 → 데스크톱/태블릿 스크린샷 첨부 → Vercel 배포 후 라이브 URL 재검증.
2. 기존 대시보드 리팩터링: 중복된 카드 컴포넌트를 찾아 공용 컴포넌트로 추출하고, 간격 값(p-3/p-4/p-5 혼용)을 디자인 스케일로 통일한 뒤 스크린샷 비교.
3. 반응형 버그 수정: 모바일에서 가로 스크롤이 생기는 문제를 스크린샷과 콘솔 에러 확인으로 원인 추적, 수정 후 재빌드·재촬영하여 3회 이내 반복 개선.

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 nanocoai/nanoclaw 의 container/skills/frontend-engineer 폴더를 내 ~/.claude/skills/frontend-engineer/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.