vue-skills – Vue 3 개발을 위한 AI 에이전트 스킬

소개 – AI 코딩 어시스턴트(예: Claude Code)에 로드하여 Vue 3 코드 작성 능력을 향상시킬 수 있는 커뮤니티 주도형 스킬 모음입니다. 각 스킬은 모델이 놓칠 수 있는 패턴, 모범 사례 규칙 및 엣지 케이스 지식을 인코딩합니다.

설치

# 범용 설치 프로그램(호환되는 모든 에이전트에서 작동)
npx skills add vuejs-ai/skills

Claude Code 사용자를 위한 마켓플레이스 워크플로우는 다음과 같습니다:

/plugin marketplace add vuejs-ai/skills          # 리포지토리 등록
/plugin install vue-skills-bundle@vue-skills      # 모든 스킬 한 번에 설치
# 또는 개별 스킬 설치
/plugin install vue-best-practices@vue-skills
/plugin install vue-router-best-practices@vue-skills

사용 방법

어시스턴트에게 프롬프트를 보낼 때 use vue skill 문구를 앞에 붙여 모델이 관련 규칙 세트를 활성화하도록 합니다.

Use vue skill, create a todo app with Pinia and Vue Router

접두사가 없으면 키워드 일치 여부에 따라 스킬이 작동할 수도 있고 작동하지 않을 수도 있습니다.

사용 가능한 스킬

스킬	사용 시기	다루는 내용
vue-best-practices	Vue 3 + Composition API + TS	일반적인 모범 사례, SSR 팁, 성능 최적화
vue-options-api-best-practices	Options-API 코드	`this` 처리, 라이프사이클, Options API용 TS 타입 정의
vue-router-best-practices	Vue Router 4	내비게이션 가드, 파라미터, 라우트 컴포넌트 라이프사이클
vue-pinia-best-practices	Pinia 상태 관리	스토어 설정, 반응형 패턴
vue-testing-best-practices	유닛/E2E 테스트	Vitest, Vue Test Utils, Playwright 가이드
vue-jsx-best-practices	Vue에서의 JSX	React JSX와의 문법 차이
vue-debug-guides	Vue 3 디버깅	런타임 오류, 하이드레이션 문제, 비동기 오류 처리
create-adaptable-composable	재사용 가능한 컴포저블 작성	`MaybeRef` / `MaybeRefOrGetter` 입력 패턴

출력 예시

`vue-best-practices` – Todo 앱 데모

프롬프트: create a todo app 결과: 어시스턴트가 더 읽기 쉬운 프로젝트 구조를 생성하고, 컴포넌트를 분리하며, 상태를 컴포저블 (useTodos.ts)로 추출하고, 기본 반응형 데이터에 shallowRef를 사용합니다. 전체 데모 링크는 README에서 확인할 수 있습니다.

`create-adaptable-composable` – `useHidden`

프롬프트: create a reusable composable for controlling hidden for an element 결과: MaybeRef/MaybeRefOrGetter 인수를 허용하여 유연한 반응성을 구현하는 컴포저블을 생성합니다. 생성된 TypeScript 시그니처는 README에 나와 있습니다.

방법론

스킬 유형 – Capability (기능): 스킬 없이는 모델이 처리할 수 없는 문제(예: 버전별 특이 사항)를 해결합니다. Efficiency (효율성): 모델이 이미 생성할 수 있지만 최적화되지 않은 솔루션을 개선합니다.
검증 – 자동화된 평가를 통해 베이스라인(스킬 없음)과 스킬 적용 시의 결과를 비교합니다. 스킬은 실패한 베이스라인을 통과 결과로 바꿀 때만 유지됩니다.

기여

개발은 dev 브랜치에서 이루어지며, main 브랜치에는 게시되고 검증된 스킬만 포함됩니다. 워크플로우: dev에서 브랜치 생성 → dev로 PR → 병합 → GitHub Action이 main으로 동기화합니다.

라이선스

MIT.

vuejs-ai/skills