프론트엔드 AI 활용 지침 체계

gameservice-fe-agent — rules/ 4개 파일 요약

문서 목적

Claude AI가 프론트엔드 개발 업무를 지원할 때,
어떤 지침을 언제 자동으로 참조하는지 정의합니다.

rules/ 폴더의 4개 파일은 CLAUDE.md에서 @import로 불러오며, 모든 작업에 자동으로 적용됩니다. Vue 3 / Nuxt / TypeScript / Tailwind CSS 기반 프로젝트에서 일관성 있는 코드 작성과 협업을 지원합니다.

rules/ 4개 파일 개요

coding-conventions.md

코딩 컨벤션

포맷팅 · 네이밍 · 타입

  • 스페이스 2칸, 싱글 쿼터, 세미콜론 필수
  • camelCase / PascalCase / UPPER_SNAKE
  • any 사용 금지, 함수 반환 타입 명시
  • import 순서 (외부→절대→상대)

framework-rules.md

프레임워크 규칙

Vue 3 / Nuxt / Tailwind

  • <script setup lang="ts"> 기본
  • Pinia (공유 상태), useFetch (서버 상태)
  • Tailwind 유틸리티 우선, clsx 조건부 클래스
  • 라이브러리 도입 시 PR에 이유 기록

commit-pr.md

커밋 / PR 규칙

Conventional Commits + PR 템플릿

  • type(scope): subject 형식
  • subject 50자 이내, 명령형 현재 시제
  • Squash and merge 기본 전략
  • CI(Lint/Test/Build) + 1인 이상 승인

claude-workflow.md

Claude 작업 방식

탐색 → 계획 → 구현 → 검증

  • 기존 코드 존중, 최소 변경 원칙
  • 모호한 요구사항은 추측 말고 질문
  • 임의 기능 추가·대량 리팩토링 금지
  • 결론 먼저, 변경 파일 요약

파일별 핵심 규칙 상세

coding-conventions.md 포맷팅 & 네이밍

  • 들여쓰기스페이스 2칸 (탭 금지)
  • 문자열싱글 쿼터 ', JSX 속성은 더블 쿼터 "
  • 세미콜론항상 작성 (생략 금지)
  • 최대 길이한 줄 100자, 초과 시 줄바꿈
  • 변수/함수camelCase — userProfile, fetchUserData
  • 상수UPPER_SNAKE_CASE — MAX_RETRY_COUNT
  • 컴포넌트PascalCase.vue — UserCard.vue
  • Composableuse 접두사 camelCase — useAuth.ts
  • 불리언is / has / can / should 접두사
  • any 사용금지 — 불가피 시 주석 + unknown 우선 검토

framework-rules.md Vue 3 / Nuxt / Tailwind

  • 컴포넌트<script setup lang="ts"> 필수, Options API 금지
  • 컴포넌트 크기200줄 초과 시 분리 검토
  • PropsdefineProps<T>() 제네릭으로 타입 명시
  • EmitsdefineEmits<{ ... }>() 제네릭으로 선언
  • ref vs reactive원시값 · 단일 객체는 ref 우선
  • 공유 상태Pinia 사용
  • 서버 상태useFetch / useAsyncData (직접 fetch 지양)
  • 라우팅Nuxt 파일 기반 라우팅, [param].vue 동적 라우트
  • Tailwind유틸리티 우선, 조건부는 clsx / cn
  • 라이브러리도입 시 PR에 이유·번들 영향·대안 기록

commit-pr.md Conventional Commits

  • 형식type(scope): subject
  • subject50자 이내, 명령형 현재 시제, 마침표 없음
  • body"왜"를 설명, 72자 줄바꿈
  • 머지 전략Squash and merge 기본
  • 승인최소 1인 이상 + CI 전부 통과
  • Draft PR중간 피드백 필요 시 Draft 먼저 오픈
feat fix refactor style docs test chore perf ci

claude-workflow.md 작업 원칙

  • 작업 순서탐색 → 계획 → 구현 → 검증
  • 기본 원칙기존 코드 존중 · 최소 변경 · 근거 있는 수정
  • 모호한 요구추측 금지 → 사용자에게 확인
  • 커뮤니케이션결론 먼저, 변경 파일 요약
  • 검증린트 / 타입체크 / 빌드 통과 확인

claude-workflow.md — 해서는 안 되는 것

임의 기능 추가 금지 사용자가 요청하지 않은 기능을 추가하지 않습니다.
대량 리팩토링 금지 요청 범위를 벗어나는 코드 변경은 하지 않습니다.
주석·문서 임의 삭제 금지 불필요해 보여도 삭제 전 사용자에게 확인합니다.
비밀정보 하드코딩 금지 환경변수, 키, 토큰을 코드에 직접 작성하지 않습니다.
의존성 버전 임의 변경 금지 요청 없이 package.json 버전을 수정하지 않습니다.
강제 푸시·히스토리 재작성 금지 push --force, reset --hard는 명시적 요청 없이 실행하지 않습니다.

Claude 작업 단계별 참조 흐름

1

탐색 (Explore)

관련 파일 파악, 유사 패턴 확인

CLAUDE.md coding-conventions
2

계획 (Plan)

할 일 목록 공유, 아키텍처 변경 시 승인

coding-conventions framework-rules claude-workflow
3

구현 (Implement)

코드 작성, 공통·프로젝트 지침 준수

coding-conventions framework-rules
4

검증 (Verify)

린트·타입체크·빌드, 커밋·PR 작성

coding-conventions commit-pr claude-workflow