vue

vue 스킬 개요

vue 스킬은 무엇에 쓰이나요

vue 스킬은 최신 모범 사례를 기준으로 Vue 3 코드를 생성하고 검토하기 위한 집중형 가이드입니다. 특히 Composition API, <script setup lang="ts">, compiler macros, reactivity APIs, 그리고 Transition, Teleport, Suspense, KeepAlive 같은 내장 컴포넌트 활용에 강점이 있습니다. AI 에이전트가 오래된 Options API 패턴으로 되돌아가지 않고, 처음부터 현대적인 Vue 스타일을 따른 Vue Single File Components를 만들게 하고 싶을 때 가장 유용한 vue 스킬입니다.

어떤 사람이 vue 스킬을 설치하면 좋나요

이 vue skill은 Vue 컴포넌트, composable, 리팩터링 작업을 자주 요청하는 프런트엔드 개발자, 풀스택 개발자, AI 활용 사용자에게 잘 맞습니다. 특히 TypeScript 우선, macro 이해 기반, 그리고 Vue 2/초기 Vue 3 습관이 섞인 결과물이 아니라 Vue 3.5 시기의 문서 기준에 맞는 출력을 원한다면 가치가 큽니다.

실제로 해결하는 일

대부분의 사용자는 프레임워크 개론이 아니라, 에이전트가 다음 기준에 맞는 Vue 코드를 안정적으로 작성해주길 원합니다.

• 기본적으로 Composition API를 사용한다
• <script setup lang="ts">를 우선한다
• defineProps, defineEmits, defineModel을 올바르게 다룬다
• ref, shallowRef, computed, watch를 더 신중하게 선택한다
• 고급 내장 기능은 실제로 맞는 상황에서만 꺼내 쓴다

이것이 vue for Frontend Development의 실질적인 가치입니다. 즉, AI가 생성한 코드의 뒷정리 시간을 줄여줍니다.

이 스킬이 실질적으로 다른 이유

가장 큰 차별점은 분명한 지향점이 있다는 점입니다. 원문 소스는 TypeScript, <script setup lang="ts">, Composition API를 명시적으로 선호하고, Reactive Props Destructure는 권장하지 않습니다. 또 다음 주제에 대한 집중형 레퍼런스도 포함합니다.

• script setup macros
• reactivity 및 최신 core APIs
• 고급 내장 컴포넌트와 directives

그래서 넓게 “Vue를 가르쳐줘”라고 묻는 프롬프트보다 실제 구현 작업에 더 잘 맞습니다.

이 스킬이 다루지 않으려는 범위

이 스킬은 Vue 생태계 전체를 정리한 지도는 아닙니다. routing, 상태 관리 라이브러리, SSR 프레임워크, 테스트, 빌드 도구에 대한 심화 문서를 대체하지도 않습니다. 주된 작업이 Nuxt 아키텍처, Vue Router 설정, Pinia 설계, 배포 파이프라인이라면, vue 스킬은 컴포넌트 수준의 코드 스타일에는 도움을 주지만 유일한 정보원으로 쓰기엔 부족합니다.

vue 스킬 사용 방법

vue 설치 맥락

다음 명령으로 skills-enabled 환경에 스킬을 설치할 수 있습니다.

npx skills add antfu/skills --skill vue

리포지토리 기준으로 보면 이 스킬은 antfu/skills의 skills/vue 아래에 있습니다. 여기서 Vue 자체를 위한 별도 패키지 설치가 이뤄지는 것은 아닙니다. 이 스킬은 프레임워크 런타임이 아니라, AI가 Vue 코드를 더 잘 생성하도록 돕는 가이드입니다.

먼저 읽어야 할 파일

vue skill을 쓰기 전에 가장 신호 대비 효율이 높은 경로만 먼저 보고 싶다면, 아래 순서로 읽는 것이 좋습니다.

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

이 순서를 권하는 이유:

• SKILL.md는 작동 방식의 선호도와 적용 범위를 보여줍니다.
• 세 개의 reference 파일은 에이전트가 실제로 적용할 가능성이 높은 실무 디테일을 담고 있습니다.
• GENERATION.md는 이 자료가 Vue docs를 바탕으로 생성되었고, 비교적 최근 시점의 스냅샷을 추적한다는 점을 알려줍니다.

vue 스킬이 필요로 하는 입력

vue usage의 품질은 어떤 요청을 넣느냐에 크게 좌우됩니다. 에이전트에게 다음 정보를 주는 것이 좋습니다.

• 컴포넌트의 목적
• props와 emitted events
• v-model 필요 여부
• 기대하는 state 형태
• async data 요구사항
• 결과물이 component인지, composable인지, pattern example인지
• 최신 Vue 3가 아니라면 Vue 버전 제약
• TypeScript 필요 여부
• UI 또는 성능 제약

약한 입력:

• “Make a Vue component for search.”

강한 입력:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

막연한 목표를 강한 vue 프롬프트로 바꾸는 법

vue 스킬을 제대로 활용하려면 구현 선택지를 명시적으로 요청하는 것이 좋습니다. 좋은 프롬프트 구조는 다음과 같습니다.

1. 무엇을 만들지 말한다
2. 어떤 Vue 관례를 따를지 지정한다
3. 입력과 출력을 정의한다
4. 동작과 제약을 추가한다
5. 트레이드오프가 있는 부분은 이유 설명을 요청한다

예시:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

이 방식이 단순한 “write Vue” 요청보다 잘 작동하는 이유는, 스킬이 기본으로 가진 선호와 정확히 맞물리기 때문입니다.

vue 스킬이 기본적으로 밀어주는 코딩 스타일

소스 자료는 에이전트를 강하게 다음 방향으로 유도합니다.

• Vue 3.5
• Composition API
• <script setup lang="ts">
• macro 기반 컴포넌트 정의
• typed props와 emits
• 성능 민감 데이터에 대한 선별적인 shallowRef 사용

Options API, plain JavaScript, 또는 레거시 Vue 패턴이 필요하다면 명시적으로 말해야 합니다. 이 스킬은 기본적으로 그 반대 방향으로 편향되어 있습니다.

vue 사용에 가장 잘 맞는 사례

이 vue guide가 특히 강한 영역은 다음과 같습니다.

• 새로운 Vue SFC 작성
• 오래된 컴포넌트를 <script setup>으로 리팩터링
• typed props, emits, models 정의
• ref, reactive, computed, watchers 사이의 선택
• Transition, Teleport, Suspense, KeepAlive 사용
• 최신 Vue 패턴을 따르는 composable 예시 생성

반면, 순수 시각 디자인 작업이나 프레임워크 비종속적인 프런트엔드 작업에는 상대적으로 덜 유용합니다.

첫 결과물을 뽑을 때의 실전 워크플로

신뢰도 높은 워크플로는 다음과 같습니다.

1. props, emits, state shape를 명시한 첫 번째 Vue SFC 초안을 요청한다.
2. 생성된 API가 실제 컴포넌트 계약과 맞는지 검토한다.
3. 그다음 반응성 선택, typing, edge case를 더 정교하게 다듬는 두 번째 패스를 요청한다.
4. 그 이후에야 transition이나 suspense boundary 같은 고급 기능을 추가한다.

이 순서가 중요한 이유는, 기본 state 흐름이 아직 불명확한 상태에서 고급 Vue 기능을 넣으면 과하게 사용되기 쉽기 때문입니다.

결과물 품질에 영향을 주는 리포지토리 기반 디테일

스킬 소스에서 확인되는 유용한 디테일은 다음과 같습니다.

• defineModel은 Vue 3.4+에서 사용 가능한 것으로 다뤄진다
• withDefaults는 Vue 3.4 이하에서 여전히 중요하다
• reactive()는 구조 분해 시 반응성을 잃는다
• 깊은 반응성이 필요 없을 때는 shallowRef를 선호한다
• Transition, Suspense 같은 built-ins는 실전 패턴과 함께 다뤄진다

이런 디테일이야말로 리포지토리를 겉핥기로 읽었을 때는 놓치기 쉽고, 실제 생성 코드의 질을 끌어올리는 요소입니다.

이 스킬에 잘 맞는 요청 예시

좋은 vue usage 요청 예시는 다음과 같습니다.

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

설치 전에 알아둘 흔한 미스매치

vue skill 하나만으로 다음 문제까지 해결되길 기대하면 안 됩니다.

• 프로젝트 스캐폴딩
• router 아키텍처
• 대규모 앱 전반의 state store 설계
• SSR 또는 Nuxt 전용 의사결정
• 테스트 러너 설정
• CSS 프레임워크 통합 디테일

이런 문제가 핵심 병목이라면, 이 스킬은 전체 Vue 스택 가이드가 아니라 컴포넌트 생성 품질을 높이는 용도로 설치하는 것이 맞습니다.

vue 스킬 FAQ

vue 스킬은 초보자에게도 좋은가요

그렇습니다. 다만 Vue 3로 이미 개발을 시작했고, AI 출력 결과를 더 깔끔하게 만들고 싶은 경우에 특히 좋습니다. 입문용 커리큘럼은 아니지만, Composition API와 <script setup lang="ts">라는 하나의 분명한 스타일을 우선하기 때문에 혼란을 줄여줍니다. 이런 일관성은 초보 사용자가 패턴이 뒤섞이는 문제를 피하는 데 도움이 됩니다.

vue 스킬은 예전 Vue 패턴도 지원하나요

1순위는 아닙니다. 소스는 Options API보다 Composition API를 항상 사용하라고 안내합니다. 코드베이스에 레거시가 많더라도 이 스킬을 사용할 수는 있지만, 호환성 제약을 명시적으로 요청하고 마이그레이션 결과를 더 꼼꼼히 검토해야 합니다.

일반적인 Vue 프롬프트와는 무엇이 다른가요

일반 프롬프트는 API가 섞이거나, typing이 약하거나, 오래된 macros를 쓰는 등 일관성 없는 Vue 코드를 내놓기 쉽습니다. vue skill은 에이전트에게 더 좁고 명확한 플레이북을 제공합니다. 여기에는 선호 스타일, 최신 macro 사용 방식, 목적별 reference가 포함됩니다. 그래서 보통 수동 수정량이 줄어듭니다.

Nuxt나 더 큰 스택에서 일해도 vue 설치만으로 충분한가요

아닙니다. vue install은 컴포넌트와 반응성 관련 가이드에는 도움이 되지만, 더 큰 스택의 문제는 여전히 Nuxt, routing, state, data fetching, deployment에 대한 이해가 필요합니다. 이 스킬은 전체 애플리케이션 아키텍처 스킬이 아니라 Vue 코드 생성 레이어로 보는 것이 맞습니다.

언제 vue 스킬을 쓰지 않는 편이 좋나요

다음 작업이 중심이라면 굳이 쓰지 않는 편이 낫습니다.

• 프레임워크 중립적인 UI 코드
• React/Angular/Svelte 작업
• 백엔드 전용 구현
• 순수 Vue 컴포넌트 작업이 거의 없는, Nuxt 전용 규칙이 강한 작업
• 현대 패턴이 허용되지 않는 엄격한 레거시 Options API 유지보수

고급 Vue 기능도 다루나요

그렇습니다. 다만 선택적으로 다룹니다. 포함된 reference는 Transition, Teleport, Suspense, KeepAlive, directives, reactivity APIs, lifecycle hooks, macros를 다룹니다. 덕분에 완전한 Vue 백과사전이 되지 않으면서도, 많은 실제 프런트엔드 작업에는 충분한 범위를 제공합니다.

vue 스킬을 더 잘 활용하는 방법

에이전트에 버전과 호환성 경계를 먼저 알려주세요

이 스킬은 Vue 3.5 시기의 가이드를 기준으로 합니다. 앱이 Vue 3.3, 3.4를 쓰거나, 예전 macro 지원 제약이 있다면 처음부터 그 사실을 밝혀야 합니다. 특히 defineModel 같은 기능이나 props 기본값 처리 방식에는 이 점이 중요합니다.

UI 아이디어가 아니라 컴포넌트 계약을 구체적으로 주세요

vue 결과물을 가장 빠르게 개선하는 방법은 다음 정보를 제공하는 것입니다.

• prop 이름과 타입
• emitted events
• model bindings
• async states
• empty state와 error state
• 부모와 자식의 책임 분리

이 스킬은 계약이 분명할 때 구현을 잘 해냅니다. 반대로 모호한 UI 설명만 주고 완전한 API를 추론하게 하면 상대적으로 약해집니다.

반응성 선택을 명시적으로 요청하세요

Vue에서 자주 발생하는 실수는 template 문법보다 state 모델링에서 나옵니다. 따라서 다음과 같은 트레이드오프를 직접 프롬프트에 넣는 것이 좋습니다.

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

이렇게 하면 reference의 핵심 강점과 정렬되고, 추상적인 “best practices” 요청보다 코드 품질 개선 효과가 큽니다.

흔한 실패 패턴을 초반에 잡아내세요

첫 결과물에서는 다음 문제를 먼저 확인하세요.

• Composition API를 원했는데 Options API가 나온다
• <script setup lang="ts"> 대신 plain <script>가 나온다
• defineProps나 defineEmits에 타입이 없다
• 불필요하게 깊은 반응성을 사용한다
• computed로 더 단순하게 풀 수 있는데 watchers를 남용한다
• 고급 built-ins를 실제 필요 없이 붙여 넣는다

이런 항목이야말로 범용 생성이 스킬의 의도한 품질 기준에서 가장 흔하게 벗어나는 지점입니다.

한 번에 하나의 관심사만 개선하세요

첫 답변 이후에는 모든 것을 한꺼번에 고쳐 달라고 하지 않는 편이 좋습니다. 다음 순서로 패스를 나눠 개선하세요.

1. API shape
2. typing과 macros
3. reactivity correctness
4. rendering states
5. advanced UX patterns

이 방식이 각 변경 사항을 검증하기 쉽고, 에이전트가 vue guide의 방향을 유지한 채 전체 컴포넌트를 예측 불가능하게 다시 생성하는 일을 줄여줍니다.

reference 파일을 상위 에스컬레이션 경로로 활용하세요

첫 결과물이 아주 틀리진 않았지만 아직 부족하다면, 에이전트를 스킬 내부 reference로 직접 유도하세요.

• references/script-setup-macros.md: props, emits, models, slots, macro 문법
• references/core-new-apis.md: reactivity, watchers, composables
• references/advanced-patterns.md: built-in components와 directives

이 방법은 프롬프트를 처음부터 다시 쓰지 않고도 vue for Frontend Development 결과물을 개선하는 가장 실용적인 수단 중 하나입니다.

최소 버전과 프로덕션 버전을 나눠 요청하세요

효율이 높은 패턴은 다음과 같습니다.

• 첫 요청: 최소 동작 SFC
• 두 번째 요청: typing, states, accessibility, performance 선택까지 반영한 production pass

이렇게 하면 첫 초안이 불필요하게 비대해지는 것을 막고, 실제로 어디에서 Vue 특유의 결정이 중요한지도 더 잘 드러납니다.

스킬 기본값을 팀 코드베이스 규칙에 맞춰 주세요

팀 규칙이 스킬의 기본 선호와 다르다면 직접 명시하세요. 예를 들면:

• JavaScript only
• no defineModel
• avoid Suspense
• type-only declarations 대신 명시적 prop objects 사용
• 요청이 없는 한 advanced built-ins 사용 금지

vue skill은 분명한 지향이 있는 스킬이라 유용하지만, 실제 리포지토리 제약에 맞게 기본값을 조정해줄 때 가장 좋은 결과가 나옵니다.