GUIDE · Claude Skills

Vue 스킬 4개 설치 가이드

읽는 데 6분2026-10-03 공개

Vue 앱을 만들 때 화면 작성, 공유 상태 관리, 테스트, 빌드는 서로 다른 작업입니다. 이 가이드는 antfu/skills의 vue·pinia·vitest·vite를 프로젝트에 설치하고 작은 예제로 각 작업의 결과를 확인하는 순서를 정리했습니다.

Quick Start

스킬은 작업할 때 참고하는 지침과 관련 문서 묶음입니다. 이 가이드의 네 스킬은 antfu/skills 저장소에서 제공합니다. Vue 화면을 만들고 Pinia로 상태를 공유한 뒤 Vitest로 계산을 검사하고 Vite로 앱을 빌드하는 순서로 사용합니다.

빈 연습 폴더에 네 스킬을 설치합니다.
버튼과 장바구니 상태를 작은 예제로 만듭니다.
테스트 결과와 빌드된 앱을 각각 확인합니다.

STEP 1 · 2분프로젝트에 네 스킬을 설치한다

Node.js와 Claude Code를 준비하고 빈 연습 프로젝트에서 아래 명령을 실행합니다. 네 이름은 각각 화면, 상태 관리, 테스트, 빌드 작업에 대응합니다. 설치가 끝나면 현재 폴더의 .claude/skills 아래에 각 스킬 디렉터리가 생겼는지 확인합니다.

⚡ 01 · 프로젝트 범위 설치

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를 사용하도록 안내합니다. 같은 스토어를 읽는 컴포넌트 두 개를 두면 상태가 함께 갱신되는지 확인할 수 있습니다.

⚡ 02 · 앱 구현 예제

vue와 pinia 스킬을 참고해서 카운터 버튼과 장바구니 예제를 만들어줘. 카운터는 shallowRef로 관리하고, 장바구니 수량은 Pinia Setup Store에 둬. 상품 화면과 상단 메뉴 컴포넌트가 같은 수량을 보여주게 해줘.

실제 결과: 카운터 버튼을 누르자 0이 1로 바뀌었습니다. 장바구니 추가 버튼을 누르자 상품 화면과 상단 메뉴의 수량이 모두 1로 바뀌었습니다. 버튼을 누른 뒤 두 컴포넌트의 표시값을 각각 읽어 공유 상태를 확인했습니다.

STEP 3 · 3분Vitest로 계산을 검사한다

Vitest 스킬은 test와 expect로 기대하는 동작을 검사하는 방법을 안내합니다. 합계 함수라면 두 상품의 가격 합과 빈 배열의 결과를 함께 확인합니다. 정상 예제만 실행하지 말고 잘못된 초기값이 있을 때 검사가 실패하는지도 확인합니다.

⚡ 03 · 테스트 예제

vitest 스킬을 참고해 total([12000, 8000])은 20000, total([])은 0인지 검사하는 테스트를 작성해줘. 실패하면 원인을 확인하고 함수를 수정한 다음 다시 실행해줘.

실제 결과: 합산 초기값을 1로 둔 예제는 20001과 1을 반환해 두 검사가 실패했습니다. 초기값을 0으로 수정한 뒤 같은 테스트 두 개가 통과했습니다. 오류 전후의 실행 로그를 함께 보관했습니다.

STEP 4 · 2분Vite로 빌드하고 미리보기를 연다

Vite 스킬은 ESM 형식과 vite.config.ts 설정을 안내합니다. Vue 플러그인을 설정한 앱을 빌드하면 dist 폴더에 HTML과 자바스크립트, 스타일 파일이 만들어집니다. 빌드 로그만 보지 말고 미리보기에서 앱 동작도 확인합니다.

⚡ 04 · 빌드와 미리보기

npx vite build
npx vite preview

실제 결과: dist/index.html과 자산 파일이 생성됐습니다. 로컬 미리보기 주소를 열어 카운터와 장바구니 버튼을 눌렀고 앞 단계의 상태 변경을 확인했습니다. 앱 파일 생성과 브라우저 동작을 나누어 검사한 결과입니다.

알아 둘 한계

확인 기준은 2026년 10월 3일입니다. 스킬을 읽은 제작 에이전트가 예제를 작성하고 도구로 직접 실행했습니다. Claude 모델이 같은 프롬프트에서 자동으로 해당 스킬을 선택하는 과정은 검증하지 않았습니다.
네 스킬은 antfu/skills의 지침입니다. Vue·Pinia·Vitest·Vite 라이브러리 자체를 설치하는 명령은 별도로 필요합니다. 전역 Claude 설정은 변경하지 않았습니다.
테스트 두 개의 통과는 이 합계 예제의 결과입니다. 앱 전체의 오류나 보안을 보장하지 않습니다. 미리보기 확인은 공개 배포와 다릅니다.
영상의 화면은 공식 제품 페이지와 편집 그래픽입니다. 실제 실행 결과는 검증 자료로 보존했습니다. 단계의 분 표기는 실습 계획이며 실측 완료 시간이 아닙니다.

FAQ

네 개를 모두 써야 하나요? 화면만 만들 때는 Vue부터 시작하고, 상태 공유·테스트·빌드 작업에 맞춰 해당 스킬을 적용할 수 있습니다.

스킬만 설치하면 앱이 완성되나요? 요구사항과 앱 의존성을 준비하고 생성된 코드를 실행해야 합니다. 버튼 동작, 상태 변경, 테스트, 빌드 결과를 각각 확인합니다.

공식 참고 자료

설치 명령과 예제 결과는 2026년 10월 3일 직접 실행해 확인했습니다.

AI 수익화 정보는 카톡방에 먼저 올립니다 새 자료도 카톡방에 먼저 풀고, 막히는 부분은 거기서 바로 물어보실 수 있습니다. 카톡방 들어가기 →