vue-best-practices
Vue 3 코드 품질 개선
Vue 프로젝트에는 시간이 지나면서 반응성, 컴포넌트, 성능 관련 실수가 쌓이는 경우가 많습니다. 이 스킬은 더 안전한 패턴과 더 명확한 코드를 위한 맞춤형 Vue 3 가이드를 제공합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "vue-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"vue-best-practices" 사용 중입니다. 컴포넌트가 props를 변경하고 template 내부에서 직접 filtering을 수행합니다.
예상 결과:
응답은 읽기 전용 prop 규칙을 강조하고, emitted updates를 권장하며, 예측 가능한 렌더링을 위해 filtering을 computed state로 이동합니다.
"vue-best-practices" 사용 중입니다. 페이지가 느리게 느껴지는 deep watchers, 대규모 목록, transitions를 사용합니다.
예상 결과:
응답은 watcher scope, list virtualization, stable props, transform-based animations를 우선순위가 지정된 수정 사항으로 분리합니다.
"vue-best-practices" 사용 중입니다. 팀이 shared state 및 async components와 함께 SSR을 사용하려고 합니다.
예상 결과:
응답은 request-scoped stores, client-only API guards, hydration timing, async component loading 선택지를 설명합니다.
보안 감사
안전All static findings reviewed as false positives from Markdown reference examples, Vue template literals, or defensive security guidance. No prompt injection attempt, exfiltration intent, command execution path, or executable malware behavior was found in the reviewed skill content.
위험 요인
⚙️ 외부 명령어 (80)
⚡ 스크립트 포함 (31)
🌐 네트워크 접근 (46)
📁 파일 시스템 접근 (7)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
vuejs-ai. (2026). vue-best-practices security audit report (audit version 6) [Author version 17.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6BibTeX 인용
@techreport{vuejs-ai-vuejs-ai-vue-best-practices-2026,
author = {vuejs-ai},
title = {vue-best-practices security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6},
note = {Author version 17.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-best-practices security audit report (audit version 6)"
version: "17.0.0"
type: report
authors:
- name: "vuejs-ai"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-best-practices:audit:6"
description: "Skillstore immutable audit report identifier"
변형 비교
설치 가능한 변형 3개각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
vuejs-ai-vue-best-practices
2026-09-09
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
Vue 컴포넌트 검토
pull request가 병합되기 전에 반응성, prop, emit, slot, template 문제를 찾습니다.
Vue 3 마이그레이션 계획
프로젝트 동작을 유지하면서 Options API 코드를 Composition API 및 script setup으로 이동합니다.
앱 성능 개선
watcher 오용, 대규모 목록 렌더링, transition 비용, SSR hydration 우려 사항을 진단합니다.
이 프롬프트를 사용해 보세요
vue-best-practices를 사용하여 이 Vue 컴포넌트를 Composition API, prop 처리, template 문제 관점에서 검토하세요. 영향이 가장 큰 수정 사항을 먼저 나열하세요.
vue-best-practices를 사용하여 이 Options API 컴포넌트를 TypeScript가 포함된 Vue 3 script setup으로 리팩터링하세요. 동작을 유지하고 호환성 위험을 설명하세요.
vue-best-practices를 사용하여 이 Vue 기능의 반응성, watcher, 목록 렌더링, transition 성능 문제를 진단하세요. 측정 기반 수정 사항을 권장하세요.
vue-best-practices를 사용하여 hydration, async components, request-isolated state를 위한 Vue SSR 개선 사항을 계획하세요. tests 및 rollout checks를 포함하세요.
모범 사례
- 관련 Vue 파일을 공유하고 현재 runtime behavior를 설명하세요.
- 대규모 컴포넌트나 마이그레이션을 검토할 때 우선순위가 지정된 findings를 요청하세요.
- 제안된 변경 사항을 tests, type checks, browser behavior로 검증하세요.
피하기
- 프로젝트 관례를 확인하지 않고 패턴을 강제하도록 요청하지 마세요.
- state model과 routing setup에 맞게 조정하지 않고 예제를 그대로 복사하지 마세요.
- 영향을 받는 workflow를 측정하지 않고 성능 조언을 입증된 것으로 간주하지 마세요.
자주 묻는 질문
이 스킬은 Vue 2를 지원하나요?
TypeScript Vue 컴포넌트를 검토할 수 있나요?
linting이나 tests를 실행하나요?
SSR 문제에 도움이 되나요?
성능 작업에 유용한가요?
어떤 AI 도구에서 사용할 수 있나요?
개발자 세부 정보
작성자
vuejs-ai라이선스
MIT
작성자 버전
v17.0.0
Skillstore 리비전
r1
참조
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
유지보수 최신성
2026. 7. 18.
사용량
102 다운로드 · 981 조회
파일 구조
📄 animation-class-based-technique.md
📄 animation-key-for-rerender.md
📄 animation-state-driven-technique.md
📄 animation-transitiongroup-performance.md
📄 async-component-hydration-strategies.md
📄 async-component-loading-delay.md
📄 async-component-suspense-control.md
📄 async-component-vue-router.md
📄 attrs-hyphenated-property-access.md
📄 avoid-prop-drilling-use-provide-inject.md
📄 component-events-dont-bubble.md
📄 component-naming-pascalcase.md
📄 composable-avoid-hidden-side-effects.md
📄 composable-composition-pattern.md
📄 composable-naming-return-pattern.md
📄 composable-options-object-pattern.md
📄 composable-readonly-state.md
📄 composable-vs-utility-functions.md
📄 composition-api-bundle-size-minification.md
📄 composition-api-code-organization.md
📄 composition-api-mixins-replacement.md
📄 composition-api-not-functional-programming.md
📄 composition-api-options-api-coexistence.md
📄 composition-api-vs-react-hooks-differences.md
📄 computed-conditional-dependencies.md
📄 computed-properties-for-class-logic.md
📄 computed-return-value-readonly.md
📄 computed-vs-methods-caching.md
📄 definemodel-hidden-modifier-props.md
📄 definemodel-value-next-tick.md
📄 directive-arguments-read-only.md
📄 directive-avoid-on-components.md
📄 directive-cleanup-in-unmounted.md
📄 directive-function-shorthand.md
📄 directive-naming-v-prefix.md
📄 directive-prefer-declarative-templating.md
📄 directive-vs-component-decision.md
📄 directive-vue2-migration-hooks.md
📄 dynamic-component-registration-vite.md
📄 dynamic-components-with-keepalive.md
📄 emit-kebab-case-in-templates.md
📄 emit-validation-for-complex-payloads.md
📄 event-once-modifier-for-single-use.md
📄 exact-modifier-for-precise-shortcuts.md
📄 keepalive-component-name-requirement.md
📄 keepalive-memory-management.md
📄 keepalive-no-cache-removal-vue3.md
📄 keepalive-router-fresh-vs-cached.md
📄 keepalive-router-nested-double-mount.md
📄 keepalive-transition-memory-leak.md
📄 lifecycle-hooks-synchronous-registration.md
📄 mouse-button-modifiers-intent.md
📄 perf-avoid-component-abstraction-in-lists.md
📄 perf-computed-object-stability.md
📄 perf-props-stability-update-optimization.md
📄 perf-ssr-ssg-for-page-load.md
📄 perf-v-once-v-memo-directives.md
📄 perf-virtualize-large-lists.md
📄 plugin-prefer-provide-inject-over-global-properties.md
📄 plugin-structure-install-method.md
📄 plugin-symbol-injection-keys.md
📄 plugin-typescript-type-augmentation.md
📄 prefer-local-component-registration.md
📄 prefer-props-emit-over-component-refs.md
📄 prop-boolean-casting-order.md
📄 prop-composable-reactivity-loss.md
📄 prop-destructured-watch-getter.md
📄 prop-validation-before-instance.md
📄 provide-inject-mutations-in-provider.md
📄 provide-inject-symbol-keys.md
📄 reactivity-computed-over-watcheffect-mutations.md
📄 reactivity-external-state-integration.md
📄 reactivity-markraw-for-non-reactive.md
📄 reactivity-proxy-identity-hazard.md
📄 reactivity-same-tick-batching.md
📄 refs-in-collections-need-value.md
📄 render-function-avoid-internal-vnode-properties.md
📄 render-function-custom-directives.md
📄 render-function-event-modifiers.md
📄 render-function-functional-components.md
📄 render-function-v-for-keys-required.md
📄 render-function-v-model-implementation.md
📄 render-function-vnodes-must-be-unique.md
📄 rendering-excessive-rerenders-watch-vs-computed.md
📄 rendering-prefer-templates-over-render-functions.md
📄 rendering-render-function-h-import-vue3.md
📄 rendering-render-function-return-from-setup.md
📄 rendering-render-function-slots-as-functions.md
📄 rendering-resolve-component-for-string-names.md
📄 rendering-understand-vdom-block-structure.md
📄 self-referencing-component-name.md
📄 sfc-recommended-for-build-projects.md
📄 sfc-scoped-css-child-component-styling.md
📄 sfc-scoped-css-dynamic-content.md
📄 sfc-scoped-css-performance.md
📄 sfc-scoped-css-slot-content.md
📄 sfc-separation-of-concerns-colocate.md
📄 shallow-ref-for-performance.md
📄 slot-conditional-rendering-with-slots.md
📄 slot-define-slots-for-typescript.md
📄 slot-fallback-content-default-values.md
📄 slot-implicit-default-content.md
📄 slot-named-scoped-explicit-default.md
📄 slot-render-scope-parent-only.md
📄 slot-renderless-components-vs-composables.md
📄 slot-v-slot-on-components-or-templates-only.md
📄 ssr-custom-directive-getssrprops.md
📄 ssr-platform-specific-apis.md
📄 state-ssr-cross-request-pollution.md
📄 suspense-events-for-state-tracking.md
📄 suspense-experimental-api-stability.md
📄 suspense-fallback-not-immediate-on-revert.md
📄 suspense-nested-suspensible-prop.md
📄 suspense-nesting-order-with-router.md
📄 suspense-revert-only-on-root-change.md
📄 suspense-single-child-requirement.md
📄 tailwind-dynamic-class-generation.md
📄 teleport-css-positioning-issues.md
📄 teleport-disabled-for-responsive.md
📄 teleport-logical-hierarchy-preserved.md
📄 teleport-multiple-to-same-target.md
📄 teleport-scoped-styles-limitation.md
📄 template-functions-no-side-effects.md
📄 template-ref-unwrapping-top-level.md
📄 transition-animate-transform-opacity.md
📄 transition-group-flip-inline-elements.md
📄 transition-group-key-requirement.md
📄 transition-group-move-animation-position-absolute.md
📄 transition-group-no-default-wrapper-vue3.md
📄 transition-group-no-mode-prop.md
📄 transition-group-staggered-animations.md
📄 transition-js-hooks-done-callback.md
📄 transition-key-for-same-element.md
📄 transition-nested-duration.md
📄 transition-reusable-scoped-style.md
📄 transition-router-view-appear.md
📄 transition-single-element-slot.md
📄 transition-type-when-mixed.md
📄 transition-unmount-hook-timing.md
📄 ts-component-ref-typeof-instancetype.md
📄 ts-custom-directive-type-augmentation.md
📄 ts-defineemits-type-based-syntax.md
📄 ts-defineprops-boolean-default-false.md
📄 ts-defineprops-imported-types-limitations.md
📄 ts-defineprops-type-based-declaration.md
📄 ts-event-handler-explicit-typing.md
📄 ts-provide-inject-injection-key.md
📄 ts-reactive-no-generic-argument.md
📄 ts-shallowref-for-dynamic-components.md
📄 ts-template-ref-null-handling.md
📄 ts-withdefaults-mutable-factory-function.md
📄 v-for-use-computed-for-filtering.md
📄 v-if-vs-v-show-performance.md
📄 v-model-vue3-breaking-changes.md
📄 watch-deep-same-object-reference.md
📄 watch-reactive-property-getter.md
📄 watcheffect-async-dependency-tracking.md
📄 watcheffect-flush-post-for-refs.md
📄 SKILL.md