vue-options-api-best-practices
81Vue Options API コンポーネントを改善する
Vue Options API プロジェクトでは、型安全性や正しい this バインディングが失われることがあります。このスキルは、より安全な Vue コンポーネントのための実践的なパターンを提供します。
Vue 3 のコード品質を向上
Vue プロジェクトでは、時間の経過とともに reactivity、component、performance に関するミスが蓄積しがちです。このスキルは、より安全なパターンと明確なコードのために、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」を使用しています。 component が props を変更し、template 内で直接 filtering を行っている。
期待される結果:
response は read-only prop rules を強調し、emitted updates を推奨し、予測可能な rendering のために filtering を computed state に移します。
「vue-best-practices」を使用しています。 page が deep watchers、大規模な lists、動作が遅く感じられる transitions を使用している。
期待される結果:
response は watcher scope、list virtualization、stable props、transform-based animations を優先度付きの修正に分けます。
「vue-best-practices」を使用しています。 team が shared state と async components で SSR を使いたい。
期待される結果:
response は 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.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_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><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>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@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}
}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"
各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
vuejs-ai-vue-best-practices
2026-09-09
pull request がマージされる前に、reactivity、prop、emit、slot、template の問題を見つけます。
project behavior を維持しながら、Options API コードを Composition API と script setup に移行します。
watcher の誤用、大規模な list rendering、transition cost、SSR hydration の懸念を診断します。
Use vue-best-practices to review this Vue component for Composition API, prop handling, and template issues. List the highest impact fixes first.
Use vue-best-practices to refactor this Options API component into Vue 3 script setup with TypeScript. Preserve behavior and explain compatibility risks.
Use vue-best-practices to diagnose reactivity, watcher, list rendering, and transition performance issues in this Vue feature. Recommend measured fixes.
Use vue-best-practices to plan Vue SSR improvements for hydration, async components, and request-isolated state. Include tests and rollout checks.
作成者
vuejs-aiライセンス
MIT
作者バージョン
v17.0.0
Skillstore リビジョン
r1
参照
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
メンテナンスの新しさ
2026/7/18
利用状況
103 ダウンロード · 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
Vue Options API コンポーネントを改善する
Vue Options API プロジェクトでは、型安全性や正しい this バインディングが失われることがあります。このスキルは、より安全な Vue コンポーネントのための実践的なパターンを提供します。
適応性の高い Vue Composables を作成する
Vue composables は、呼び出し側がプレーンな値、refs、ゲッターを混在させて渡すと失敗しがちです。このスキルは、Claude、Codex、Claude Code が予測可能な Vue リアクティビティを備えた再利用可能な composables を設計できるよう支援します。
Vue Pinia ストアパターンの改善
Vue アプリケーションは、ストアのセットアップ、分割代入、URL 状態のルールを見落としやすいため、失敗することがよくあります。このスキルは、Claude、Codex、Claude Code に対して、信頼性の高いストアと予測可能なリアクティビティを実現するための Pinia に特化したガイダンスを提供します。
Vueのテストプラクティスを改善する
Vueのテストスイートは、しばしば不安定で壊れやすく、設定が難しくなります。このスキルは、Vitest、Vue Test Utils、Pinia、非同期ヘルパー、Playwrightを使用して、信頼性の高いVue 3テストを作成するための実践的なガイダンスを提供します。
Vue Router のナビゲーションガードを改善する
Vue Router の問題は、古いデータ、壊れたリダイレクト、脆弱なルートチェックを引き起こす可能性があります。このスキルは、ガード、params、クリーンアップ、本番環境のルーティングに関する焦点を絞ったパターンを提供します。
より優れた Vue と Nuxt コンポーネントを構築する
Vue と Nuxt プロジェクトでは、状態が不明確で、コンポーネントが壊れやすく、データフローに一貫性がないことがよくあります。このスキルは、AI アシスタントを実践的な Vue 3 と Nuxt 3 のパターンへ導きます。
本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
Playwrightテストカバレッジの改善
作成者 C0ntr0lledCha0s
Playwrightスイートは、設定、ロケーター、フィクスチャに一貫性がないと不安定になることがあります。このスキルは、信頼性の高いブラウザテスト、デバッグ、再利用可能なページオブジェクトのための実践的なパターンを提供します。
starknet.js で Starknet アプリを構築
作成者 internet-court
Starknet 統合では、プロバイダー、アカウント、トランザクション、手数料を正確に処理する必要があります。このスキルは、Claude、Codex、Claude Code に実践的な starknet.js v9 パターンを提供します。
プロファイリングによる Go パフォーマンスの最適化
作成者 89jobrien
Go サービスは、明確な根拠がないまま低速化したりメモリ使用量が増えたりすることがあります。このスキルは、プロファイリング、割り当て分析、並行処理のチューニング、ベンチマーク主導の最適化をガイドします。
より優れたSwiftUI機能を構築する
作成者 avdlee
SwiftUIプロジェクトでは、非推奨API、壊れやすい状態管理、遅いビュー更新が蓄積することがあります。このスキルは、モダンで保守しやすいSwiftUIコードのための的確なガイダンスを提供します。
型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。