Vue 스킬 4개 설치 가이드
Quick Start
스킬은 작업할 때 참고하는 지침과 관련 문서 묶음입니다.
이 가이드의 네 스킬은 antfu/skills 저장소에서 제공합니다.
Vue 화면을 만들고 Pinia로 상태를 공유한 뒤 Vitest로 계산을 검사하고 Vite로 앱을 빌드하는 순서로 사용합니다.
- 빈 연습 폴더에 네 스킬을 설치합니다.
- 버튼과 장바구니 상태를 작은 예제로 만듭니다.
- 테스트 결과와 빌드된 앱을 각각 확인합니다.
STEP 1 · 2분프로젝트에 네 스킬을 설치한다
Node.js와 Claude Code를 준비하고 빈 연습 프로젝트에서 아래 명령을 실행합니다.
네 이름은 각각 화면, 상태 관리, 테스트, 빌드 작업에 대응합니다.
설치가 끝나면 현재 폴더의 .claude/skills 아래에 각 스킬 디렉터리가 생겼는지 확인합니다.
npx skills add antfu/skills --skill vue pinia vitest vite -a claude-code -y
실제 결과: 빈 임시 폴더에 네 스킬이 모두 복사됐습니다.
각 SKILL.md를 읽고 프로젝트의 Vue 코드, Pinia 스토어, 테스트 파일, Vite 설정에 해당 지침을 적용했습니다.
스킬 설치와 앱 라이브러리 설치는 별개입니다.
STEP 2 · 3분Vue와 Pinia로 버튼과 공유 상태를 만든다
Vue 스킬은 Composition API와 TypeScript 기반 script setup을 안내합니다.
Pinia 스킬은 스토어를 정의하고 상태를 분리할 때 storeToRefs를 사용하도록 안내합니다.
같은 스토어를 읽는 컴포넌트 두 개를 두면 상태가 함께 갱신되는지 확인할 수 있습니다.
vue와 pinia 스킬을 참고해서 카운터 버튼과 장바구니 예제를 만들어줘. 카운터는 shallowRef로 관리하고, 장바구니 수량은 Pinia Setup Store에 둬. 상품 화면과 상단 메뉴 컴포넌트가 같은 수량을 보여주게 해줘.
실제 결과: 카운터 버튼을 누르자 0이 1로 바뀌었습니다.
장바구니 추가 버튼을 누르자 상품 화면과 상단 메뉴의 수량이 모두 1로 바뀌었습니다.
버튼을 누른 뒤 두 컴포넌트의 표시값을 각각 읽어 공유 상태를 확인했습니다.
STEP 3 · 3분Vitest로 계산을 검사한다
Vitest 스킬은 test와 expect로 기대하는 동작을 검사하는 방법을 안내합니다.
합계 함수라면 두 상품의 가격 합과 빈 배열의 결과를 함께 확인합니다.
정상 예제만 실행하지 말고 잘못된 초기값이 있을 때 검사가 실패하는지도 확인합니다.
vitest 스킬을 참고해 total([12000, 8000])은 20000, total([])은 0인지 검사하는 테스트를 작성해줘. 실패하면 원인을 확인하고 함수를 수정한 다음 다시 실행해줘.
실제 결과: 합산 초기값을 1로 둔 예제는 20001과 1을 반환해 두 검사가 실패했습니다.
초기값을 0으로 수정한 뒤 같은 테스트 두 개가 통과했습니다.
오류 전후의 실행 로그를 함께 보관했습니다.
STEP 4 · 2분Vite로 빌드하고 미리보기를 연다
Vite 스킬은 ESM 형식과 vite.config.ts 설정을 안내합니다.
Vue 플러그인을 설정한 앱을 빌드하면 dist 폴더에 HTML과 자바스크립트, 스타일 파일이 만들어집니다.
빌드 로그만 보지 말고 미리보기에서 앱 동작도 확인합니다.
npx vite build npx vite preview
실제 결과: dist/index.html과 자산 파일이 생성됐습니다.
로컬 미리보기 주소를 열어 카운터와 장바구니 버튼을 눌렀고 앞 단계의 상태 변경을 확인했습니다.
앱 파일 생성과 브라우저 동작을 나누어 검사한 결과입니다.
FAQ
네 개를 모두 써야 하나요? 화면만 만들 때는 Vue부터 시작하고, 상태 공유·테스트·빌드 작업에 맞춰 해당 스킬을 적용할 수 있습니다.
스킬만 설치하면 앱이 완성되나요? 요구사항과 앱 의존성을 준비하고 생성된 코드를 실행해야 합니다.
버튼 동작, 상태 변경, 테스트, 빌드 결과를 각각 확인합니다.
공식 참고 자료
이메일 남기고 전체 바로 보기