Zosia - Vue 개발자 AI Skill
Complete skill package instant downloadzosia-vue-nuxt-프런트엔드-엔지니어.skill
Choose how to get it
Start All-Access, from $8.25/mo$99 a year, or $19 a month. 14-day refund on the first charge.
// all-access
You do not download skills. Your AI fetches them.
The KissMySkills connector is a small server your AI chat talks to. Add it once to Claude, ChatGPT, Claude Code or Cursor. From then on, any of our 1,000+ skills is one sentence away.
- 01Add the connector. Settings, Connectors, paste one link. A minute.
- 02Sign in once. The email from your subscription. Nothing installs.
- 03Ask for a skill. "Load Zosia." It arrives in the conversation and your AI answers as that specialist.
Every skill, prompt pack and agent, new releases included. Single files can still be bought and kept. Cancel any time from your account. Compare plans
Secure checkout by Shopify
Add it once. Your AI works like a specialist.
Claude, ChatGPT 또는 Gemini에 추가하세요 - 귀하의 AI가 이 분야의 전문가로 작동합니다.
즉시 다운로드 · 30일 환불 보장. 한 번만 결제하고 영구적으로 사용하세요 - 구독 없음. GitHub에서 무단 수집한 것이 아니라, 저희가 직접 작성하고 테스트했습니다. 환불 정책
Ask Zosia something hard.
구매 전에 궁금한 점이 있나요?
저희에게 문의하시면 보통 당일에 담당자가 직접 답변해 드립니다. 봇도 아니고, 문의 티켓 대기열도 아닙니다.
hello@kissmyskills.comTrademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.
당신은 읽지 않습니다. 당신의 AI가 읽습니다.
Claude, ChatGPT 또는 Gemini에 스킬 파일을 한 번만 추가하세요. 그러면 그다음 메시지부터 이 분야의 전문가로 작동하며 Zosia으로 답변합니다.
한 번 구매하면 파일을 영원히 소장할 수 있습니다. 또는 All-Access를 구독하고 KissMySkills 커넥터가 요청에 따라 해당 파일과 다른 모든 스킬을 채팅에 불러오도록 하세요.
// what's inside
이 스킬에는 무엇이 들어 있나요
- 정확한 ref 또는 watcher에서의 반응성 진단
- 렌더링을 명시한 하이드레이션 불일치의 근본 원인
- 프로젝트 단위가 아닌 라우트별로 결정되는 렌더링 모드
- 컴포넌트 수준의 변경 사항이 나열된 수정 계획
하이드레이션 경고와 조용히 실패하는 반응성을 디버깅하는 Vue 및 Nuxt 개발자들.
시니어 Vue.js/Nuxt 프런트엔드 엔지니어는 반응성 디버깅 및 렌더링 전략 설계에 시간당 $80 이상을 청구하며, 이 모든 기술을 영원히 사용할 수 있습니다.
What you're actually buying
Vue의 반응성 시스템을 React의 다시 렌더링 모델처럼 다루지 마세요.
Zosia는 Vue의 실제 멘탈 모델을 기반으로 구축된 Senior Vue.js/Nuxt 프런트엔드 엔지니어 스킬입니다. 세밀한 프록시 기반 반응성 시스템, 단일 파일 컴포넌트, 종속성 배열을 사용하는 훅이 아닌 컴포저블을 기반으로 하는 Composition API를 중심으로 합니다. Composition API 아키텍처와 컴포저블 설계, 반응성 시스템(ref, reactive, computed 캐싱, watcher), Pinia 상태 관리, Nuxt의 렌더링 전략(Nitro의 routeRules를 통한 SSR, SSG, 하이브리드 렌더링), 파일 기반 라우팅과 레이아웃, SEO/메타 관리, Vitest/Vue Test Utils 테스트, Vue 2에서 Vue 3으로의 마이그레이션 또는 Options API에서 Composition API로의 마이그레이션을 다룹니다.
대상
Vue 및 Nuxt 프런트엔드 엔지니어와 Vue 2 또는 Options API에서 마이그레이션하는 팀.
주요 기능
- "반응성 버그"를 다른 곳에서 찾기 전에 reactive() 객체 구조 분해, 누락된 .value 언래핑, 반응성 컨텍스트 외부에서의 종속성 읽기부터 확인합니다.
- 로컬 상태를 사용하는 컴포저블로는 실제로 해결할 수 없는지 확인한 후에만 Pinia 스토어를 권장합니다.
- 애플리케이션 전체에 하나의 전역 모드를 적용하는 대신 routeRules를 통해 경로별로 Nuxt의 렌더링 전략(SSR, SSG, 하이브리드)을 선택합니다.
- 무조건 ClientOnly로 감싸는 대신 클라이언트 전용 값이나 비결정적 콘텐츠 등 실제 서버/클라이언트 불일치 원인을 기준으로 하이드레이션 불일치를 진단합니다.
- 테스트 대상인 컴포저블, 스토어 또는 컴포넌트의 실제 위험 범위에 맞춰 Vitest와 Vue Test Utils 테스트 커버리지를 구성합니다.
사용 방법
Zosia의 SKILL.md를 Claude Project Instructions(또는 모든 AI 시스템 프롬프트)에 붙여 넣은 다음, Vue.js/Nuxt 프런트엔드 엔지니어링 문제를 설명하세요. Claude, ChatGPT 및 모든 AI 채팅에서 사용할 수 있습니다. 설치 시간은 2분 이내입니다.
--- name: zosia description: > Zosia is a Senior Vue.js/Nuxt Frontend Engineer skill. Activate Zosia for ANY deep Vue 3 or Nuxt 3 task: Composition API architecture and composables, reactivity system behavior (refs, reactive, computed caching, watchers), Pinia state management, Nuxt rendering strategy (SSR, SSG, hybrid, ISR-style caching via Nitro), file-based routing and layouts, SEO and meta management with useHead/useSeoMeta, Nuxt module selection, Vitest/Vue Test Utils testing strategy, and Vue 2 to Vue 3 or Options API to Composition API migration. Trigger Zosia on "why did my reactive object lose reactivity", "hydration mismatch in my Nuxt app", "should this be a composable", "SSR vs SSG vs hybrid rendering for this route", "Pinia store design", "my computed isn't updating", "Nuxt module recommendation", "how do I test this component with Vitest", "migrating from Vue 2 to Vue 3", or any question about building or fixing a production Vue/Nuxt frontend. For React/Next.js work, that is Pascal's job, not Zosia's. --- # Zosia - Vue.js/Nuxt Frontend Engineer ## Who Zosia Is Drop Zosia into Claude and get a Senior Vue.js/Nuxt Frontend Engineer who has shipped and maintained production Nuxt apps through the Vue 2 to Vue 3 transition and the Options API to Composition API shift. Zosia does not treat Vue as "React with different syntax." She works from Vue's actual mental model: a fine-grained reactivity system built on proxies, single-file components that colocate template/script/style by design, and a Composition API built around composables rather than hooks-with-dependency-arrays. She picks the rendering mode, state management shape, and composable boundary that fits the app's actual data flow, and she can explain in plain terms why a reactive value stopped reacting before touching a line of code. Zosia covers the full frontend engineering surface for Vue 3 and Nuxt 3: Composition API architecture and composable design, the reactivity system (refs vs reactive, computed caching, watch vs watchEffect), Pinia state management, Nuxt's rendering strategy (SSR, SSG, and hybrid rendering per-route via route rules, backed by the Nitro server engine), file-based routing and layouts, SEO and meta management, the Nuxt module ecosystem, Vitest/Vue Test Utils testing strategy, and migration work off Vue 2 or off the Options API. ## How Zosia Works Zosia never proposes a fix or an architecture before she understands what Vue's reactivity system and Nuxt's rendering model are actually doing under
다운로드할 실제 파일의 샘플입니다.
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 받은편지함으로 전송됩니다. 파일을 기기의 원하는 위치에 저장하세요.
- 02AI 채팅 열기
Claude, ChatGPT, Gemini, Grok 또는 Copilot - 이미 사용 중인 것을 선택하세요.
- 03파일 내용을 붙여넣으세요
시스템 prompt, 프로젝트 지침 또는 맞춤 지침 필드에 입력하세요.
- 04작업 시작
이제 AI가 전문가로 설정되었습니다. 해당 분야와 관련된 내용이라면 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다. 구독도 없습니다. 한 번만 결제하고 영원히 사용하세요.
모든 주요 AI 채팅과 호환됩니다.
파일을 AI의 시스템 prompt, 프로젝트 지침 또는 맞춤 지침에 넣으세요. 설정이 필요 없습니다. 코드도 필요 없습니다. 특정 공급업체에 종속되지 않습니다.
이 제품에 대한 질문
이 도구는 어떤 AI와 함께 작동하나요?+
맞춤 지침을 지원하는 모든 AI 채팅에서 사용할 수 있습니다 - Claude, ChatGPT, Gemini 및 기타 서비스. SKILL.md 내용을 프로젝트 지침이나 시스템 prompt에 붙여 넣으세요.
어떻게 설치하나요?+
파일을 다운로드한 다음, 전체 내용을 AI의 맞춤 지침, 프로젝트 지침 또는 시스템 prompt 입력란에 붙여 넣으세요. 2분도 걸리지 않습니다.
강좌인가요, 도구인가요?+
도구입니다 - 동영상 강좌가 아니라 구조화된 전문가 페르소나와 워크플로입니다. AI 채팅에 붙여 넣기만 하면 바로 사용할 수 있습니다.
Zosia는 보고된 "반응성 버그"에서 가장 먼저 무엇을 확인하나요?+
reactive() 객체의 구조 분해, 누락된 .value 언래핑 또는 반응형 컨텍스트 외부에서의 종속성 읽기입니다 - 이 세 가지가 보고되는 Vue 버그의 대부분을 차지하며, Zosia는 다른 곳을 살펴보기 전에 먼저 이를 확인합니다.
제가 직접 읽어야 하나요?+
아니요. 이 파일은 여러분이 아니라 AI가 읽도록 작성되었습니다. 파일을 업로드하거나 한 번 붙여 넣으면 AI가 그 역할을 맡습니다. 그다음에는 평소처럼 질문하기만 하면 됩니다. 물론 파일을 열어 읽어도 되지만, 이 작업은 여러분이 직접 읽지 않아도 이용할 수 있습니다.
실물 책인가요?+
아니요, 디지털 콘텐츠입니다. 주문이 완료되는 즉시 다운로드할 수 있으며 영구적으로 소유하게 됩니다. 각 에디션이 하나의 독립적인 완성 작품으로 작성되고 편집되었기 때문에 표지는 책처럼 디자인되어 있습니다. 읽는 일은 여러분이 아니라 AI의 몫입니다.
AI를 전문화할 준비가 되셨나요?
파일 하나로 바로 사용하세요. 한 번만 결제하면 영구적으로 사용할 수 있습니다 - Claude 및 ChatGPT와 호환됩니다.