Claude Code Skills 정리하다가 만든 vue-skills

회사에서 Vue를 쓰게 됐다

입사하고 보니 프론트엔드 스택이 Vue + Nuxt였다. React만 주구장창 해왔던 나한테는 꽤 신선한 경험이었다.

처음엔 솔직히 좀 당황했다. Composition API? SFC? <script setup>? 뭔가 비슷한 것 같으면서도 다른 느낌. 특히 ref랑 reactive의 차이점에서 한참 헤맸다.

그래서 Claude Code를 적극적으로 활용하기 시작했는데, 여기서 문제가 생겼다.

스킬이 너무 많아졌다

antfu 형님의 skills 저장소에서 Vue 관련 스킬을 하나씩 설치하다 보니 .claude/skills/ 폴더가 이렇게 됐다:

.claude/skills/
├── vue/
├── vue-best-practices/
├── vue-router-best-practices/
├── vue-testing-best-practices/
├── vueuse-functions/
├── pinia/
├── vite/
├── vitest/
├── nuxt/
└── ... (총 17개)

스킬 하나당 name이랑 description이 시스템 프롬프트에 올라가는데, 17개나 되니까 컨텍스트 윈도우가 꽤 차지하더라. 실제로 긴 코드 리뷰할 때 가끔 잘리는 느낌도 받았다.

Progressive Disclosure 패턴

고민하다가 스킬들을 통합하기로 했다. 핵심 아이디어는 Progressive Disclosure - 필요한 정보만 그때그때 로드하는 방식이다.

기존에는 스킬 17개가 전부 시스템 프롬프트에 올라갔는데, 이걸 7개로 줄이고 세부 내용은 references/ 폴더에 넣었다.

skills/vue/
├── SKILL.md              # 얇은 진입점 (항상 로드됨)
└── references/
    ├── pinia-guide.md    # Pinia 관련 질문 시 로드
    ├── pinia/
    │   ├── core-stores.md
    │   └── ...
    ├── router-guide.md   # 라우터 관련 질문 시 로드
    └── ...

예를 들어 "Pinia store 만들어줘"라고 하면:

SKILL.md 읽음 (진입점)
pinia-guide.md 읽음 (중간 인덱스)
pinia/core-stores.md 읽음 (실제 가이드)

이렇게 단계적으로 필요한 것만 읽어서 컨텍스트 낭비를 줄였다.

결과

통합 전	통합 후
17개 스킬	7개 스킬
매번 17개 description 로드	7개만 로드
세부 내용도 전부 로드	필요할 때만 로드

체감상 확실히 응답이 빨라졌고, 긴 코드 작업할 때 잘리는 현상도 줄었다.

설치 방법

만들어둔 거 공유해뒀다. Vue 쓰는 사람들한테 도움이 됐으면 좋겠다.

bash

git clone https://github.com/KIMJINWOO4/vue-skills.git
cp -r vue-skills/skills/ your-project/.claude/skills/

전체 다 필요 없으면 필요한 것만 복사해도 된다:

bash

# Vue 생태계만
cp -r vue-skills/skills/vue/ .claude/skills/vue/

# 빌드 도구만
cp -r vue-skills/skills/build-tooling/ .claude/skills/build-tooling/

포함된 스킬들

vue/ - Vue 3, Pinia, Vue Router, VueUse, 테스팅 가이드 통합
build-tooling/ - Vite, Vitest, tsdown, pnpm, Turborepo 통합
design/ - 프론트엔드 디자인 가이드라인
nuxt/ - Nuxt 프레임워크
vitepress/ - VitePress 문서화 도구
antfu/ - Anthony Fu 코딩 컨벤션
find-skills/ - 스킬 검색

총 625개의 레퍼런스 파일이 있어서 웬만한 Vue 관련 질문은 다 커버된다.

마무리

React에서 Vue로 넘어오면서 Claude Code 스킬도 같이 정리하게 됐는데, 생각보다 재밌는 작업이었다. 스킬을 어떻게 구조화하느냐에 따라 AI 도구의 효율이 꽤 달라지는 걸 느꼈다.

Vue 입문하는 분들이나 Claude Code로 Vue 개발하는 분들한테 도움이 됐으면 좋겠다.

저장소: https://github.com/KIMJINWOO4/vue-skills