スキル vue-options-api-best-practices
📦

vue-options-api-best-practices

v2.0.0 コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

Vue Options API コンポーネントを改善する

Vue Options API プロジェクトでは、型安全性や正しい this バインディングが失われることがあります。このスキルは、より安全な Vue コンポーネントのための実践的なパターンを提供します。

対応: Claude Codex Code(CC)
🥈 81 シルバー

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "vue-options-api-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-options-api-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/vuejs-ai-vue-options-api-best-practices.md 署名済み manifest GET /api/skills/vuejs-ai-vue-options-api-best-practices/manifest 署名済み lockfile GET /api/skills/vuejs-ai-vue-options-api-best-practices/lockfile

テストする

「vue-options-api-best-practices」を使用しています。 A mounted hook uses an arrow function and cannot read component data.

期待される結果:

The hook should use regular function syntax or method shorthand. Vue can then bind this to the component instance.

「vue-options-api-best-practices」を使用しています。 A component accepts a user object prop and TypeScript infers a broad object type.

期待される結果:

Define a User interface and use Vue PropType for the prop. Add runtime validation if the object shape must be checked.

「vue-options-api-best-practices」を使用しています。 A debounced method behaves incorrectly across repeated component instances.

期待される結果:

Create the debounced function per instance in a lifecycle hook. Cancel timers during unmount to avoid shared state and leaks.

セキュリティ監査

安全
v4 • 2026/7/7 バージョン別レポートを開く

The static alerts are false positives caused by Markdown code fences, TypeScript template literals, Vue documentation links, and DOM event property names. No prompt injection, secret handling, command execution, or executable network behavior was found in the reviewed skill content.

11
スキャンされたファイル
1,509
解析済み行数
0
レビュー項目
0
誤検知を無視

リスク要因

⚙️ 外部コマンド (8)
reference/no-arrow-functions-in-lifecycle-hooks.md:27-44 reference/no-arrow-functions-in-lifecycle-hooks.md:68-74 reference/no-arrow-functions-in-methods.md:28-38 reference/no-arrow-functions-in-methods.md:60-65 reference/ts-options-api-computed-return-types.md:79-84 reference/ts-options-api-computed-return-types.md:84-88 reference/ts-options-api-computed-return-types.md:106-116 reference/ts-strict-mode-options-api.md:120-124
🌐 ネットワークアクセス (1)
reference/no-arrow-functions-in-methods.md:57
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

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

Markdownバッジ

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

HTMLバッジ

<a href="https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-options-api-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-options-api-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形式の引用

github.com/vuejs-ai. (2026). vue-options-api-best-practices security audit report (audit version 4) [Author version 2.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4

BibTeX形式の引用

@techreport{github-com-vuejs-ai-vuejs-ai-vue-options-api-best-practices-2026, author = {github.com/vuejs-ai}, title = {vue-options-api-best-practices security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4}, note = {Author version 2.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-options-api-best-practices security audit report (audit version 4)" version: "2.0.0" type: report authors: - name: "github.com/vuejs-ai" date-released: "2026-07-07" url: "https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4" identifiers: - type: other value: "skillstore:vuejs-ai-vue-options-api-best-practices:audit:4" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
55
アーキテクチャ
100
保守性
87
コンテンツ
69
コミュニティ
91
仕様準拠

作成できるもの

This バインディングエラーを修正する

ライフサイクルとメソッドのリファレンスを使って、コンポーネントインスタンスへのアクセスを壊すアロー関数を見つけます。

TypeScript コンポーネントを強化する

既存の Options API コンポーネントに defineComponent、PropType、strict mode、明示的な戻り値の型を適用します。

レガシー Vue コードをレビューする

古い Options API コンポーネントについて、共有された状態を持つメソッド、弱いイベント型付け、古いバリデーターパターンを確認します。

これらのプロンプトを試す

This バインディングの問題を見つける 
Review this Vue Options API component and explain why this is undefined. Focus on methods and lifecycle hooks. [Paste component]
TypeScript Props を追加する 
Help me type these Vue Options API props with TypeScript. Include PropType guidance for objects, arrays, and functions. [Paste props]
イベントハンドラーを改善する 
Review these Options API event handlers. Recommend explicit event types and safer target handling. [Paste methods and template]
コンポーネントの実践を監査する 
Audit this Vue Options API component for this binding, strict TypeScript support, computed return types, and stateful methods. [Paste component]

ベストプラクティス

  • Options API のメソッドとライフサイクルフックには、メソッド省略記法または通常の関数を使用します。
  • TypeScript の Options API コンポーネントを defineComponent でラップし、strict checking を有効にします。
  • 複雑な props、events、computed values、injected properties には明示的な型を追加します。

回避

  • ライフサイクルフックまたはトップレベルの Options API メソッドとしてアロー関数を使用すること。
  • 型付けされていないイベントパラメーターや広すぎるオブジェクト prop 推論に依存すること。
  • methods オプション内で共有された debounced または throttled メソッドを直接作成すること。

よくある質問

なぜアロー関数は Options API の this バインディングを壊すのですか？
アロー関数は周囲のスコープの this を保持します。Vue はそれをコンポーネントインスタンスに置き換えることができません。
このスキルは Vue 3 Composition API を対象にしていますか？
いいえ。Options API をまだ使用している Vue 3 プロジェクトを含め、Options API コンポーネントに焦点を当てています。
defineComponent はいつ使用すべきですか？
TypeScript の Options API コンポーネントでは defineComponent を使用します。props、data、computed values、methods の推論が改善されます。
複雑な props はどのように型付けすべきですか？
TypeScript interfaces を定義し、objects、arrays、functions、union values には Vue PropType を使用します。
アロー関数はメソッド内で使用できますか？
はい。通常のメソッド内のアローコールバックは、そのメソッドの this 値を安全に継承できます。
このスキルはコマンドを実行したりファイルを変更したりしますか？
いいえ。これは Markdown リファレンスを含むドキュメントスキルであり、コマンドは実行しません。

開発者情報

ライセンス

MIT

作者バージョン

v2.0.0

Skillstore リビジョン

r1

リポジトリ

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

参照

36e07d5e13068e5be64447e8f20b427cf2cbd21a

メンテナンスの新しさ

2026/7/18

利用状況

23 ダウンロード · 154 閲覧

ファイル構成

📁 reference/

📄 no-arrow-functions-in-lifecycle-hooks.md

📄 no-arrow-functions-in-methods.md

📄 stateful-methods-lifecycle.md

📄 ts-options-api-arrow-functions-validators.md

📄 ts-options-api-computed-return-types.md

📄 ts-options-api-proptype-complex-types.md

📄 ts-options-api-provide-inject-limitations.md

📄 ts-options-api-type-event-handlers.md

📄 ts-options-api-use-definecomponent.md

📄 ts-strict-mode-options-api.md

📄 SKILL.md

github.com/vuejs-ai のその他のスキル

📦

vue-pinia-best-practices

80

Vue Pinia ストアパターンの改善

Vue アプリケーションは、ストアのセットアップ、分割代入、URL 状態のルールを見落としやすいため、失敗することがよくあります。このスキルは、Claude、Codex、Claude Code に対して、信頼性の高いストアと予測可能なリアクティビティを実現するための Pinia に特化したガイダンスを提供します。

コーディング＆開発 表示

関連スキル

すべて表示