sample-nuxt-project

fe-common-rules 공통 지침을 실제 프로젝트에서 어떻게 사용하는지 보여주는 샘플입니다.

💡 이 샘플은 실제로 실행 가능한 Nuxt 앱이 아니라, 디렉토리 구조와 CLAUDE.md 연동 방식을 보여주기 위한 최소 구성입니다.

구조

sample-nuxt-project/
├── CLAUDE.md                    # 공통 + 프로젝트 지침 @import 엔트리
├── .claude/
│   ├── common/                  # fe-common-rules submodule (샘플에서는 파일 복제)
│   │   ├── CLAUDE.md
│   │   ├── rules/
│   │   │   ├── coding-conventions.md
│   │   │   ├── framework-rules.md
│   │   │   ├── commit-pr.md
│   │   │   └── claude-workflow.md
│   │   └── scripts/
│   │       ├── install.sh
│   │       └── update.sh
│   └── project/                 # 프로젝트 고유 지침
│       ├── overview.md
│       ├── conventions.md
│       └── architecture.md
├── package.json                 # Nuxt 4 + Vue 3 + TS + Tailwind 의존성
├── nuxt.config.ts
├── tsconfig.json
├── tailwind.config.ts
├── app.vue
└── .gitignore

실제 프로젝트에서는 어떻게 만드나요?

실제 프로젝트에서는 .claude/common/ 을 submodule 로 연결합니다.

# 1) Nuxt 프로젝트 초기화 (이미 존재한다면 생략)
npx nuxi@latest init my-project
cd my-project
git init && git add . && git commit -m "chore: init"

# 2) fe-common-rules 를 submodule 로 추가
git submodule add git@github.com:<팀-조직>/fe-common-rules.git .claude/common
git submodule update --init --recursive

# 3) 프로젝트 CLAUDE.md 작성
#    (이 샘플의 CLAUDE.md 를 참고하세요)

또는 fe-common-rules 저장소의 scripts/install.sh 를 사용하면 submodule 추가와 CLAUDE.md 템플릿 생성을 한 번에 할 수 있습니다.

curl -fsSL https://<raw-url>/scripts/install.sh | bash -s -- git@github.com:<팀-조직>/fe-common-rules.git

공통 지침 업데이트

git submodule update --remote --merge .claude/common
git add .claude/common
git commit -m "chore: update fe-common-rules submodule"

또는

bash .claude/common/scripts/update.sh

Claude 가 읽는 순서

1. Nuxt 루트의 CLAUDE.md 를 먼저 읽습니다.
2. @.claude/common/CLAUDE.md 구문으로 공통 지침 엔트리가 로드됩니다.
3. 엔트리 내부의 @rules/*.md 가 차례로 로드됩니다.
4. 이어서 @.claude/project/*.md (overview, conventions, architecture) 가 로드됩니다.
5. Claude는 로드된 모든 지침을 참고하여 작업을 수행합니다.
6. 충돌이 있을 경우 프로젝트 지침이 우선합니다.