スキル 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)
Maintain this Skill? Claim it 🥈 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」を使用しています。 mounted hook이 arrow function을 사용하며 컴포넌트 데이터를 읽을 수 없습니다.

期待される結果:

해당 hook은 일반 함수 문법이나 method shorthand를 사용해야 합니다. 그러면 Vue가 this를 컴포넌트 인스턴스에 바인딩할 수 있습니다.

「vue-options-api-best-practices」を使用しています。 컴포넌트가 user object prop을 받으며 TypeScript가 넓은 object type으로 추론합니다.

期待される結果:

User interface를 정의하고 해당 prop에 Vue PropType을 사용하세요. object shape를 확인해야 한다면 런타임 validation을 추가하세요.

「vue-options-api-best-practices」を使用しています。 debounced method가 반복 생성되는 컴포넌트 인스턴스 간에 올바르게 동작하지 않습니다.

期待される結果:

lifecycle hook에서 인스턴스별로 debounced function을 생성하세요. 공유 상태와 누수를 피하려면 unmount 중에 timers를 취소하세요.

セキュリティ監査

安全
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 바인딩 오류 수정

lifecycle 및 methods 참조를 사용해 컴포넌트 인스턴스 접근을 깨뜨리는 arrow functions를 찾습니다.

TypeScript 컴포넌트 강화

기존 Options API 컴포넌트에 defineComponent, PropType, strict mode, 명시적 반환 타입을 적용합니다.

레거시 Vue 코드 검토

이전 Options API 컴포넌트에서 공유 상태 보유 메서드, 약한 이벤트 타이핑, 오래된 validator 패턴을 확인합니다.

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

This 바인딩 문제 찾기 
이 Vue Options API 컴포넌트를 검토하고 this가 undefined인 이유를 설명해 주세요. methods와 lifecycle hooks에 집중해 주세요. [Paste component]
TypeScript Props 추가 
이 Vue Options API props에 TypeScript 타입을 지정하도록 도와주세요. objects, arrays, functions에 대한 PropType 가이드를 포함해 주세요. [Paste props]
Event Handlers 개선 
이 Options API event handlers를 검토해 주세요. 명시적 event types와 더 안전한 target 처리를 추천해 주세요. [Paste methods and template]
컴포넌트 관행 감사 
이 Vue Options API 컴포넌트를 this 바인딩, strict TypeScript 지원, computed 반환 타입, 상태 보유 메서드 관점에서 감사해 주세요. [Paste component]

ベストプラクティス

  • Options API methods와 lifecycle hooks에는 method shorthand 또는 일반 함수를 사용하세요.
  • TypeScript Options API 컴포넌트를 defineComponent로 감싸고 strict checking을 활성화하세요.
  • 복잡한 props, events, computed values, injected properties에는 명시적 타입을 추가하세요.

回避

  • lifecycle hooks 또는 최상위 Options API methods로 arrow functions를 사용하는 것.
  • 타입이 지정되지 않은 event parameters와 넓은 object prop 추론에 의존하는 것.
  • methods option 안에서 공유 debounced 또는 throttled methods를 직접 생성하는 것.

よくある質問

arrow functions가 Options API this 바인딩을 깨뜨리는 이유는 무엇인가요?
Arrow functions는 주변 scope의 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을 사용하세요.
arrow functions를 methods 내부에서 사용할 수 있나요?
네. 일반 method 내부의 arrow callbacks는 method의 this 값을 안전하게 상속할 수 있습니다.
이 스킬은 commands를 실행하거나 files를 수정하나요?
아니요. 이는 Markdown 참조가 포함된 documentation skill이며 commands를 실행하지 않습니다.

開発者情報

ライセンス

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 のその他のスキル

関連スキル

すべて表示