Vue

nuxt4-patterns는 Nuxt 4에서 하이드레이션 안전성, route rules, 지연 로딩, SSR 안전 데이터 패칭을 다루는 스킬입니다. 이 nuxt4-patterns 스킬을 사용해 Frontend Development 의사결정을 더 잘 내리고, 불일치를 줄이며, 각 페이지나 컴포넌트에 맞는 패턴을 적용하세요.

ui-ux-pro-max는 AI 기반 UI/UX 디자인을 위한 종합 스킬입니다. 웹과 모바일 프로젝트의 레이아웃, 스타일, 컬러 시스템, 타이포그래피, UX 규칙에 대해 체계적으로 안내하며, React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, HTML/CSS 등 다양한 환경에서 실무 디자인 결정을 지원합니다. UI 기획, 리뷰, 개선에 활용할 수 있는 큐레이션된 디자인 인텔리전스를 제공합니다.

web-component-design 스킬은 팀이 React, Vue, Svelte에서 재사용 가능한 UI 컴포넌트를 설계할 수 있도록 돕습니다. 디자인 시스템에 맞는 탄탄한 API 패턴, 접근성 가이드, 스타일링 선택지별 트레이드오프 참고 정보를 제공합니다.

vue skill은 Composition API, `<script setup lang="ts">`, 매크로, 반응성, 내장 컴포넌트를 활용하는 Vue 3 코드 생성을 위한 가이드입니다. SFC, `defineProps`, `defineEmits`, `defineModel`, watchers, `Transition`, `Teleport`, `Suspense`, `KeepAlive` 사용을 개선하고 설치 판단에 참고할 때 유용합니다.

gsap-frameworks는 Vue, Nuxt, Svelte, SvelteKit 등 React가 아닌 프레임워크를 위한 GSAP 스킬입니다. 컴포넌트 애니메이션이 Frontend Development에서 올바르게 동작하도록, 라이프사이클에 안전한 애니메이션 초기화, 스코프가 지정된 셀렉터, 그리고 언마운트 시 정리를 다룹니다.

gsap-core 기술은 GSAP의 핵심 애니메이션 API 사용을 위한 공식 가이드로, `gsap.to()`, `from()`, `fromTo()`, 이징, 스태거, 기본값, 반응형 모션을 포함합니다. vanilla JS, React, Vue, Svelte, DOM, SVG, UI Design 워크플로에서 gsap-core를 사용할 때 유용하며, 특히 믿을 수 있는 gsap-core 가이드가 필요할 때 적합합니다.

vue-router-best-practices는 프런트엔드 앱에서 Vue Router 4의 navigation guard, route param 업데이트, 오래된 컴포넌트 상태, redirect loop, 그리고 더 이상 권장되지 않는 next() 패턴 문제를 바로잡는 데 초점을 맞춘 가이드입니다.

vue-pinia-best-practices는 Vue 3 팀이 Pinia를 더 안전하게 활용하도록 돕는 스킬로, 설치 시점, `storeToRefs` 사용, setup store 반환값, 그리고 URL과 store state를 어떻게 나눌지에 대한 명확한 가이드를 제공합니다.

vue-options-api-best-practices는 프런트엔드 팀이 Vue 3 Options API 모범 사례를 적용하고, `this` 바인딩 및 라이프사이클 관련 실수를 바로잡으며, Composition API로 전환하지 않고도 props, computed 값, events, inject 사용의 TypeScript 타이핑을 개선할 수 있도록 돕습니다.

vue-jsx-best-practices는 frontend 개발자가 Vue 3 TSX/JSX에서 `className`, `htmlFor` 같은 React 스타일 속성을 Vue에 맞는 HTML 속성으로 바꿔, 더 자연스럽고 타입 검사에 잘 맞는 Vue JSX 코드를 작성하도록 돕습니다.

vue-best-practices는 코드 생성, 리뷰, 리팩터링에 초점을 맞춘 Vue 3 스킬입니다. 에이전트가 Composition API, `<script setup lang="ts">`, 명시적인 데이터 흐름, SSR을 고려한 선택을 따르도록 안내하며, reactivity, SFC, composables, Router, Pinia, Vite 기반 앱의 핵심 레퍼런스까지 폭넓게 제공합니다.

vue-debug-guides는 Vue 3 디버깅에 특화된 스킬로, 런타임 오류, 경고, async 컴포넌트 실패, 반응성 문제, SSR 또는 hydration 불일치를 진단하고 참고 자료 기반의 구체적인 해결 방법을 제시합니다.

create-adaptable-composable는 Vue 3 및 Nuxt 3 개발자가 일반 값, ref, computed 값, getter를 모두 받을 수 있는 재사용 가능한 composable을 설계할 수 있도록 돕습니다. 예측 가능한 반응성을 위해 `MaybeRef` 또는 `MaybeRefOrGetter`를 선택하고, `watch()` 또는 `watchEffect()` 내부에서 `toValue()`나 `toRef()`로 값을 정규화하는 데 초점을 맞춥니다.

Netlify에서 HTML 폼을 다루는 netlify-forms 가이드입니다. 연락처 폼, 피드백 폼, 파일 업로드, 스팸 필터링, AJAX 제출, 서버사이드 코드 없이 커스텀 감사 페이지를 추가하는 데 활용할 수 있습니다. Backend Development 워크플로와, 빌드 시점의 폼 감지가 필요한 JS 렌더링 앱에 특히 유용합니다.