Skills vue-best-practices
📦

vue-best-practices

v17.0.0 Content revision r1 Safe ⚙️ External commands⚡ Contains scripts🌐 Network access📁 Filesystem access

Improve Vue 3 Code Quality

Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.

Supports: Claude Codex Code(CC)
🥈 82 Silver

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
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.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/vuejs-ai-vue-best-practices.md Signed manifest GET /api/skills/vuejs-ai-vue-best-practices/manifest Signed lockfile GET /api/skills/vuejs-ai-vue-best-practices/lockfile

Test it

Using "vue-best-practices". A component mutates props and performs filtering directly inside a template.

Expected outcome:

The response highlights read-only prop rules, recommends emitted updates, and moves filtering into computed state for predictable rendering.

Using "vue-best-practices". A page uses deep watchers, large lists, and transitions that feel slow.

Expected outcome:

The response separates watcher scope, list virtualization, stable props, and transform-based animations into prioritized fixes.

Using "vue-best-practices". A team wants to use SSR with shared state and async components.

Expected outcome:

The response explains request-scoped stores, client-only API guards, hydration timing, and async component loading choices.

Security Audit

Safe
v6 • 7/9/2026 Open versioned report

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.

181
Files scanned
30,876
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (80)
reference/animation-state-driven-technique.md:26-56 reference/animation-state-driven-technique.md:71-108 reference/animation-state-driven-technique.md:117-148 reference/animation-state-driven-technique.md:158-200 reference/composition-api-vs-react-hooks-differences.md:90-96 reference/computed-no-side-effects.md:46-56 reference/computed-no-side-effects.md:85-93 reference/computed-properties-for-class-logic.md:54-67 reference/computed-properties-for-class-logic.md:85-94 reference/computed-return-value-readonly.md:143-156 reference/directive-cleanup-in-unmounted.md:203-215 reference/emit-validation-for-complex-payloads.md:91-97 reference/keepalive-no-cache-removal-vue3.md:101-105 reference/keepalive-router-fresh-vs-cached.md:190-195 reference/perf-ssr-ssg-for-page-load.md:131-133 reference/perf-virtualize-large-lists.md:101-113 reference/perf-virtualize-large-lists.md:113-114 reference/perf-virtualize-large-lists.md:114-144 reference/prop-composable-reactivity-loss.md:35-40 reference/prop-composable-reactivity-loss.md:55-61 reference/prop-validation-before-instance.md:159-163 reference/reactivity-computed-over-watcheffect-mutations.md:93-96 reference/reactivity-computed-over-watcheffect-mutations.md:96-106 reference/reactivity-computed-over-watcheffect-mutations.md:114-123 reference/render-function-functional-components.md:49-62 reference/render-function-functional-components.md:121-125 reference/render-function-functional-components.md:125-133 reference/render-function-functional-components.md:133-137 reference/render-function-v-for-keys-required.md:120-127 reference/rendering-excessive-rerenders-watch-vs-computed.md:31-41 reference/rendering-excessive-rerenders-watch-vs-computed.md:52-59 reference/rendering-excessive-rerenders-watch-vs-computed.md:59-71 reference/rendering-prefer-templates-over-render-functions.md:42-46 reference/rendering-prefer-templates-over-render-functions.md:117-121 reference/rendering-render-function-h-import-vue3.md:63-67 reference/rendering-render-function-return-from-setup.md:31-36 reference/rendering-render-function-return-from-setup.md:50-55 reference/rendering-render-function-return-from-setup.md:138-144 reference/rendering-render-function-slots-as-functions.md:79-81 reference/rendering-resolve-component-for-string-names.md:105-111 reference/sfc-recommended-for-build-projects.md:34-42 reference/sfc-separation-of-concerns-colocate.md:41-88 reference/ssr-custom-directive-getssrprops.md:115-121 reference/ssr-custom-directive-getssrprops.md:121-125 reference/style-binding-camelcase.md:61-62 reference/style-binding-camelcase.md:62-73 reference/suspense-events-for-state-tracking.md:34-58 reference/tailwind-dynamic-class-generation.md:26-36 reference/tailwind-dynamic-class-generation.md:36-40 reference/template-functions-no-side-effects.md:162-183 reference/ts-shallowref-for-dynamic-components.md:47 reference/ts-shallowref-for-dynamic-components.md:142-146 reference/v-html-xss-security.md:89-91 reference/watch-deep-performance.md:75-95 reference/watch-deep-performance.md:128-131 reference/watch-deep-same-object-reference.md:71-81 reference/watch-deep-same-object-reference.md:81-84 reference/watch-deep-same-object-reference.md:84-88 reference/watch-flush-timing.md:85-99 reference/watch-immediate-option.md:29-41 reference/watch-immediate-option.md:59-64 reference/watch-immediate-option.md:78-84 reference/watch-immediate-option.md:95-102 reference/watch-immediate-option.md:115-119 reference/watch-immediate-option.md:137-143 reference/watch-reactive-property-getter.md:31-36 reference/watch-reactive-property-getter.md:36-38 reference/watch-reactive-property-getter.md:50-58 reference/watch-reactive-property-getter.md:58-66 reference/watch-reactive-property-getter.md:66-69 reference/watch-reactive-property-getter.md:82-85 reference/watch-reactive-property-getter.md:97-105 reference/watch-vs-watcheffect.md:44-49 reference/watch-vs-watcheffect.md:63-74 reference/watch-vs-watcheffect.md:74-79 reference/watcheffect-async-dependency-tracking.md:33-54 reference/watcheffect-async-dependency-tracking.md:72-86 reference/watcheffect-async-dependency-tracking.md:86-98 reference/watcheffect-async-dependency-tracking.md:118-123 SKILL.md:3
⚡ Contains scripts (31)
reference/async-component-hydration-strategies.md:23 reference/async-component-hydration-strategies.md:29 reference/async-component-hydration-strategies.md:45 reference/async-component-hydration-strategies.md:51 reference/async-component-hydration-strategies.md:67 reference/async-component-hydration-strategies.md:73 reference/async-component-hydration-strategies.md:89 reference/async-component-hydration-strategies.md:95 reference/async-component-hydration-strategies.md:116 reference/async-component-loading-delay.md:19 reference/async-component-loading-delay.md:34 reference/async-component-loading-delay.md:49 reference/async-component-suspense-control.md:19 reference/async-component-suspense-control.md:40 reference/async-component-vue-router.md:24 reference/async-component-vue-router.md:31 reference/async-component-vue-router.md:50 reference/async-component-vue-router.md:55 reference/async-component-vue-router.md:102 reference/computed-array-mutation.md:125 reference/keepalive-component-name-requirement.md:153 reference/rendering-resolve-component-for-string-names.md:58 reference/ssr-platform-specific-apis.md:242 reference/ssr-platform-specific-apis.md:185 reference/suspense-revert-only-on-root-change.md:48 reference/suspense-revert-only-on-root-change.md:49 reference/suspense-revert-only-on-root-change.md:50 reference/ts-shallowref-for-dynamic-components.md:142 reference/ts-shallowref-for-dynamic-components.md:157 reference/ts-shallowref-for-dynamic-components.md:158 reference/ts-shallowref-for-dynamic-components.md:159
🌐 Network access (46)
reference/composable-avoid-hidden-side-effects.md:184 reference/computed-no-side-effects.md:40 reference/computed-no-side-effects.md:74 reference/computed-no-side-effects.md:100 reference/keepalive-memory-management.md:85 reference/plugin-symbol-injection-keys.md:24 reference/plugin-symbol-injection-keys.md:44 reference/plugin-symbol-injection-keys.md:60 reference/prop-composable-reactivity-loss.md:131 reference/reactivity-markraw-for-non-reactive.md:66 reference/reactivity-markraw-for-non-reactive.md:78 reference/shallow-ref-for-performance.md:34 reference/ssr-platform-specific-apis.md:160 reference/ssr-platform-specific-apis.md:203 reference/ssr-platform-specific-apis.md:162 reference/ssr-platform-specific-apis.md:163 reference/ssr-platform-specific-apis.md:164 reference/state-ssr-cross-request-pollution.md:11 reference/template-functions-no-side-effects.md:61 reference/template-functions-no-side-effects.md:125 reference/transition-unmount-hook-timing.md:112 reference/transition-unmount-hook-timing.md:39 reference/transition-unmount-hook-timing.md:89 reference/transition-unmount-hook-timing.md:43 reference/transition-unmount-hook-timing.md:95 reference/updated-hook-performance.md:33 reference/updated-hook-performance.md:83 reference/updated-hook-performance.md:107 reference/v-html-xss-security.md:98 reference/v-html-xss-security.md:101 reference/v-html-xss-security.md:39 reference/v-html-xss-security.md:98 reference/v-html-xss-security.md:101 reference/v-html-xss-security.md:105 reference/watch-immediate-option.md:29 reference/watch-immediate-option.md:59 reference/watch-immediate-option.md:78 reference/watch-immediate-option.md:95 reference/watch-immediate-option.md:115 reference/watch-vs-watcheffect.md:43 reference/watch-vs-watcheffect.md:74 reference/watch-vs-watcheffect.md:44 reference/watcheffect-async-dependency-tracking.md:33 reference/watcheffect-async-dependency-tracking.md:72 reference/watcheffect-async-dependency-tracking.md:86 reference/watcheffect-async-dependency-tracking.md:117
📁 Filesystem access (7)
reference/composable-vs-utility-functions.md:143 reference/composable-vs-utility-functions.md:158 reference/mouse-button-modifiers-intent.md:4 reference/ssr-platform-specific-apis.md:191 reference/ssr-platform-specific-apis.md:199 reference/ssr-platform-specific-apis.md:191 reference/ssr-platform-specific-apis.md:199
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/vuejs-ai-vue-best-practices/security.svg)](https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge)

HTML badge

<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>

Embed card

<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>
Academic citations (APA · BibTeX · CFF)

APA citation

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/6

BibTeX citation

@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"

Compare variants

3 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
vuejs-ai Recommended Current

vuejs-ai-vue-best-practices

Skillstore Score 82
Evidence Confidence High
Skillstore usage 130
Updated

2026-08-21

hyf0

hyf0-vue-best-practices

Skillstore Score 81
Evidence Confidence High
Skillstore usage 38
Updated

2026-08-21

antfu

antfu-vue-best-practices

Skillstore Score 79
Evidence Confidence High
Skillstore usage 32
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
100
Maintainability
87
Content
82
Community
91
Spec Compliance

What You Can Build

Review Vue Components

Find reactivity, prop, emit, slot, and template issues before a pull request is merged.

Plan Vue 3 Migration

Move Options API code toward Composition API and script setup while preserving project behavior.

Improve App Performance

Diagnose watcher misuse, large list rendering, transition cost, and SSR hydration concerns.

Try These Prompts

Review One Component 
Use vue-best-practices to review this Vue component for Composition API, prop handling, and template issues. List the highest impact fixes first.
Refactor Options API 
Use vue-best-practices to refactor this Options API component into Vue 3 script setup with TypeScript. Preserve behavior and explain compatibility risks.
Diagnose Performance 
Use vue-best-practices to diagnose reactivity, watcher, list rendering, and transition performance issues in this Vue feature. Recommend measured fixes.
Plan SSR Architecture 
Use vue-best-practices to plan Vue SSR improvements for hydration, async components, and request-isolated state. Include tests and rollout checks.

Best Practices

  • Share the relevant Vue files and describe the current runtime behavior.
  • Ask for prioritized findings when reviewing large components or migrations.
  • Validate suggested changes with tests, type checks, and browser behavior.

Avoid

  • Do not ask it to enforce patterns without checking project conventions.
  • Do not copy examples without adapting them to your state model and routing setup.
  • Do not treat performance advice as proven without measuring the affected workflow.

Frequently Asked Questions

Does this skill support Vue 2?
It focuses on Vue 3. Some migration guidance covers Vue 2 differences, but Vue 3 patterns are the default.
Can it review TypeScript Vue components?
Yes. It includes guidance for defineProps, defineEmits, template refs, InjectionKey, and typed component refs.
Does it run linting or tests?
No. It provides guidance that should be verified with your project lint, type check, and test commands.
Can it help with SSR issues?
Yes. It covers shared state, platform-specific APIs, hydration timing, and server-rendered directive behavior.
Is it useful for performance work?
Yes. It covers large lists, watchers, computed values, transitions, scoped CSS, and rendering patterns.
Which AI tools can use it?
The metadata lists support for Claude, Codex, and Claude Code.

Developer Details

Author

vuejs-ai

License

MIT

Author version

v17.0.0

Skillstore revision

r1

Repository

https://github.com/vuejs-ai/skills/tree/main/skills/vue-best-practices/

Ref

26421118b848d9f1efc0aa169d8a7a9e7e0a877e

Maintenance freshness

7/18/2026

Usage

102 downloads · 981 views

File structure

📁 reference/

📄 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

📄 attrs-not-reactive.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-array-mutation.md

📄 computed-conditional-dependencies.md

📄 computed-no-parameters.md

📄 computed-no-side-effects.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

📄 mount-return-value.md

📄 mouse-button-modifiers-intent.md

📄 multiple-app-instances.md

📄 no-passive-with-prevent.md

📄 no-v-if-with-v-for.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

📄 prefer-ref-over-reactive.md

📄 prop-boolean-casting-order.md

📄 prop-composable-reactivity-loss.md

📄 prop-destructured-watch-getter.md

📄 prop-validation-before-instance.md

📄 props-are-read-only.md

📄 provide-inject-mutations-in-provider.md

📄 provide-inject-symbol-keys.md

📄 reactive-destructuring.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

📄 ref-value-access.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-name-reserved-prop.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

📄 style-binding-camelcase.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-mode-out-in.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-template-type-casting.md

📄 ts-withdefaults-mutable-factory-function.md

📄 updated-hook-performance.md

📄 v-for-use-computed-for-filtering.md

📄 v-html-xss-security.md

📄 v-if-vs-v-show-performance.md

📄 v-model-vue3-breaking-changes.md

📄 watch-deep-performance.md

📄 watch-deep-same-object-reference.md

📄 watch-flush-timing.md

📄 watch-immediate-option.md

📄 watch-reactive-property-getter.md

📄 watch-vs-watcheffect.md

📄 watcheffect-async-dependency-tracking.md

📄 watcheffect-flush-post-for-refs.md

📄 SKILL.md