클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

프론트엔드 엔지니어

빌드·테스트·브라우저 시각 검증을 끝내기 전에는 '완료'를 선언하지 않게 만드는 프론트엔드 작업 규율 스킬.

개발·코딩중급★ 30,471⑂ 12,865AI 점수 9/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

Claude를 시니어 프론트엔드 엔지니어처럼 행동하게 만드는 규율 스킬입니다.

  • 작업 순서 고정: 코드 파악 → 구현 → 빌드 → 브라우저 시각 검증 → 배포 → 배포본 재검증
  • 코드 품질 규칙: TypeScript 타입 규칙, App Router 기준 서버 컴포넌트 우선, 배럴 파일 임포트 금지, 동적 임포트/번들 최적화
  • 마크업·스타일 규칙: 시맨틱 태그, alt 속성, h1 1개, 모바일 퍼스트, WCAG AA 대비(4.5:1), 일관된 여백·로딩·에러·빈 상태
  • 필수 검증 체크리스트: 콘솔 에러 없음, 가로 스크롤 없음, 데스크톱/태블릿 스크린샷 확보
  • 안티패턴 목록: 중복 컴포넌트 신규 작성, lint 규칙 비활성화로 빌드 통과, console.log 방치 등

이런 분께 추천

  • Next.js/React/Vite로 웹을 만들며 AI에게 실제로 동작하는 결과물을 원하는 개발자
  • "됐다"고 했는데 화면이 깨져 있는 경험을 반복한 분
  • 팀 내 프론트엔드 코드 일관성 기준을 에이전트에게 강제하고 싶은 리드

활용 예시

  1. 랜딩 페이지 신규 제작: Claude가 Vite/Next 중 선택 → 구현 → pnpm run build 통과 → 1280px·768px 스크린샷 첨부 후 보고
  2. 기존 앱에 대시보드 추가: 먼저 코드베이스를 검색해 유사 카드 컴포넌트를 확장, 새로 만들지 않음
  3. 배포 후 확인: Vercel 배포 URL을 실제로 열어 스크린샷을 찍고 로컬과 다르면 수정 후 재배포

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/nanocoai/nanoclaw/HEAD/container/skills/frontend-engineer/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

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

직접 명령으로 설치하기

git clone https://github.com/nanocoai/nanoclaw.git && mkdir -p ~/.claude/skills && cp -r nanoclaw/container/skills/frontend-engineer ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/nanocoai/nanoclaw.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 스킬을 복사합니다: cp -r nanoclaw/container/skills/frontend-engineer ~/.claude/skills/
  5. (권장) 스크린샷 검증용 agent-browser CLI와 pnpm을 설치합니다. 없다면 SKILL.md의 명령을 npm/Playwright 등으로 바꿔 사용하세요.
  6. Claude Code를 재시작하고 "이 웹 프로젝트를 프론트엔드 엔지니어 스킬대로 만들어줘"처럼 요청합니다.
GitHub에서 원본 보기 ↗라이선스: MIT