KIMJINWOO4
- 10 skills
- 0 followers
- 1 day ago last updated
- ▌ Vue · kimjinwoo4 bundleUnified Vue 3 ecosystem guide. Composition API, Vue 3.6 Vapor Mode, Pinia state management, Vue Router 5, VueUse composables, testing. Use when working with Vue SFCs, .vue files, defineProps/defineEmits/defineModel, watchers, Transition/Teleport/Suspense/KeepAlive, state management, or routing. MUST be used for Vue.js tasks.
- ▌ Nuxt · kimjinwoo4 bundleNuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
- ▌ Design · kimjinwoo4 bundleFrontend design & UI guide. Production-grade interface building, Web Interface Guidelines compliance review, UnoCSS semantic token system (antfu-design). Use when building web components, pages, dashboards, landing pages, or when reviewing UI/accessibility/design quality.
- ▌ Vue A11Y · kimjinwoo4 bundleAccessibility (a11y) for Vue 3 apps. Semantic templates, ARIA component patterns (modal, tabs, menu, combobox), focus management with Teleport and router navigation, accessible forms and errors, automated testing with axe. Use when building UI components, reviewing for accessibility, WCAG compliance, keyboard navigation, or screen reader support.
- ▌ Vue Data · kimjinwoo4 bundleServer-state and data fetching for Vue 3. Pinia Colada (useQuery/useMutation, caching, invalidation, optimistic updates), Vue Router Data Loaders, choosing between fetch layers, race conditions, SSR concerns. Use when fetching API data, caching server responses, handling loading/error states, or wiring mutations in Vue apps.
- ▌ Vitepress · kimjinwoo4 bundleVitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
- ▌ Vue Forms · kimjinwoo4 bundleForms and validation in Vue 3. v-model/defineModel patterns, custom form controls, schema validation with VeeValidate 4 + Zod, async validation, multi-step wizards, submission states, unsaved-changes guards, accessible error messaging. Use when building or reviewing forms, inputs, validation, or file uploads in Vue.
- ▌ Build Tooling · kimjinwoo4 bundleUnified frontend build tooling guide. Vite 8 (Rolldown bundler / dev server), Vitest 4 (testing), tsdown (library bundling), pnpm 11 (package management), Turborepo (monorepos), TypeScript 7 native compiler. Use when working with vite.config.ts, vitest, tsdown.config.ts, pnpm-workspace.yaml, turbo.json, or tsconfig.
- ▌ Vue Performance · kimjinwoo4 bundleDiagnose and fix Vue 3 performance problems. Profiling workflow (DevTools, render tracking), rendering optimization (shallowRef, v-memo, virtual lists, Vapor Mode), bundle size (code splitting, async components, Rolldown analysis), memory leak hunting. Use when a Vue app is slow, janky, large, or leaking memory — or when reviewing for performance.
- ▌ Vue Clean Components · kimjinwoo4 bundleRules for structuring Vue 3 components so humans can read and maintain them. Component level hierarchy (Page/Feature/Controller/Humble/Atomic), composable lifecycle cohesion, Core-Adapter separation, props drilling resolution, and store responsibility boundaries. Use when writing, splitting, or refactoring Vue components.