スキル vue-best-practices

📦

vue-best-practices

Name: vue-best-practices
Author: antfu

v18.0.0 コンテンツリビジョン r2 安全 ⚙️ 外部コマンド⚡ スクリプトを含む🌐 ネットワークアクセス

Vue 3 の型安全性を向上させる

Vue プロジェクトでは、template、Volar、router、TypeScript のエッジケースに遭遇し、レビューが遅くなることがよくあります。このスキルは、より安全な components、configs、tests のために、Vue 3 に特化したルールを提供します。

対応: Claude Codex Code(CC)

🥉 79 ブロンズ

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

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

エージェントリクエスト

Review the Skillstore skill "vue-best-practices" from https://skillstore.io/skills/antfu-vue-best-practices.md and its manifest at https://skillstore.io/api/skills/antfu-vue-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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

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

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

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

テストする

「vue-best-practices」を使用しています。 component wrapper で button attribute completion が失われます。

期待される結果:

このスキルは、fallthrough attribute support を有効にし、attributes が inner element にどのように転送されているかを確認することを推奨します。

「vue-best-practices」を使用しています。 route page で id が route params に存在しないと報告されます。

期待される結果:

このスキルは、限定的な type assertion にフォールバックする前に、route-specific typed useRoute pattern を使用することを提案します。

「vue-best-practices」を使用しています。 Vue SSR app で script setup の変更後に完全な再読み込みが発生します。

期待される結果:

このスキルは、Vite SSR configuration checks と、明示的な確認が必要な任意の cache cleanup steps を切り分けます。

セキュリティ監査

安全

v6 • 2026/7/23 バージョン別レポートを開く

All 102 static findings are false positives in documentation and inert Vue examples. Backticks are Markdown spans or JavaScript template literals, while key and reconnaissance matches are lexical collisions. Dynamic imports and relative API calls illustrate normal application patterns and are not executed by the skill.

スキャンされたファイル

4,593

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (37)

references/animation-state-driven-technique.md:26-56 references/animation-state-driven-technique.md:71-108 references/animation-state-driven-technique.md:117-148 references/animation-state-driven-technique.md:158-200 references/component-keep-alive.md:100-103 references/perf-virtualize-large-lists.md:101-113 references/perf-virtualize-large-lists.md:113-114 references/perf-virtualize-large-lists.md:114-144 references/reactivity.md:249-259 references/reactivity.md:338-344 references/render-functions.md:30-32 references/sfc.md:47-66 SKILL.md:3 SKILL.md:23 SKILL.md:24 SKILL.md:25 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:44 SKILL.md:48 SKILL.md:52 SKILL.md:53 SKILL.md:59 SKILL.md:60 SKILL.md:63 SKILL.md:71 SKILL.md:92 SKILL.md:94 SKILL.md:96 SKILL.md:100 SKILL.md:113 SKILL.md:114 SKILL.md:115 SKILL.md:117 SKILL.md:118

⚡ スクリプトを含む (5)

references/component-async.md:30 references/component-async.md:45 references/component-async.md:50 references/component-async.md:67 references/component-async.md:82

🌐 ネットワークアクセス (8)

references/plugins.md:124 references/plugins.md:133 references/plugins.md:145 references/reactivity.md:338 references/state-management.md:74 references/updated-hook-performance.md:33 references/updated-hook-performance.md:85 references/updated-hook-performance.md:109

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

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

バージョン別レポートを開く

レポートリンクをコピー

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

Markdownバッジ

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

HTMLバッジ

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

埋め込みカード

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

antfu. (2026). vue-best-practices security audit report (audit version 6) [Author version 18.0.0]. Skillstore. https://skillstore.io/skills/antfu-vue-best-practices/audits/6

BibTeX形式の引用

@techreport{antfu-antfu-vue-best-practices-2026,
  author = {antfu},
  title = {vue-best-practices security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/antfu-vue-best-practices/audits/6},
  note = {Author version 18.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: "18.0.0"
type: report
authors:
  - name: "antfu"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-vue-best-practices/audits/6"
identifiers:
  - type: other
    value: "skillstore:antfu-vue-best-practices:audit:6"
    description: "Skillstore immutable audit report identifier"

バリアントを比較

インストール可能なバリアント 3 件

各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。

このバリアントが首位の理由

Skillstore スコアが最高

作者 / ソース Skillstore スコア証拠の信頼度 Skillstore 利用状況更新済み

vuejs-ai 推奨

vuejs-ai-vue-best-practices

Skillstore スコア 82

証拠の信頼度高

Skillstore 利用状況 159

更新済み

2026-09-09

hyf0

hyf0-vue-best-practices

Skillstore スコア 81

証拠の信頼度高

Skillstore 利用状況 39

更新済み

2026-09-09

antfu 現在

antfu-vue-best-practices

Skillstore スコア 79

証拠の信頼度高

Skillstore 利用状況 33

更新済み

2026-09-09

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

Vue Components をレビューする

マージ前に props、emits、slots、template bindings、wrapper components の型付けの抜けを見つけます。

Vue Tooling を安定させる

依存関係のアップグレード後に発生する Volar、vue-tsc、Vite、module resolution の問題を解決します。

Test Coverage を改善する

Pinia store mocking、data attributes、strict template checks に型付きパターンを適用します。

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

1 つの Component を確認する

TypeScript と template typing の問題について、この Vue component をレビューしてください。props、emits、slots、strict template errors に焦点を当ててください。

vue-tsc Errors を修正する

私の Vue 3 project のこれらの vue-tsc errors の修正を手伝ってください。どのルールが適用されるか、最小限の config または code change を説明してください。

Wrapper をリファクタリングする

prop、emit、slot、fallthrough attribute types を維持するように、この wrapper component をリファクタリングしてください。広範な type assertions は避けてください。

Migration を監査する

Volar 3、Vite SSR HMR、typed router params、Pinia tests、module resolution について、この Vue app migration plan を監査してください。

ベストプラクティス

バージョン固有のガイダンスを適用する前に、Vue と language tool のバージョンを確認します。
広範なローカル type assertions よりも、プロジェクトレベルの typing と helper APIs を優先します。
cleanup commands や package changes を実行する前に確認を求めます。

回避

型付けされた component boundaries を修正せずに strict template checking を無効にする。
config files と inline build options の間で Vite Vue plugins を重複させる。
影響を受ける folders を説明せずに、破壊的な cache cleanup commands を実行する。

よくある質問

このスキルは Vue 2 をサポートしていますか？

いいえ。Vue 3、vue-tsc、Volar、Vite、modern TypeScript tooling に焦点を当てています。

エラーを自動的に修正できますか？

対象を絞ったガイダンスと例を提供します。アシスタントは、それでもプロジェクトを確認し、慎重に変更を適用する必要があります。

Claude または Codex は必要ですか？

このコンテンツは、marketplace skill format を通じて Claude、Codex、Claude Code と互換性があります。

どのような Vue の問題を扱いますか？

component typing、strict templates、Volar upgrades、router params、Pinia tests、CSS modules、Vite SSR HMR を扱います。

package install commands は含まれていますか？

一部のルールでは、例として package commands に言及しています。dependencies をインストールまたはダウングレードする前に、バージョンへの影響を確認してください。

チームはどのように適用すべきですか？

Vue TypeScript tooling が不明瞭なエラーを出す場合に、code review、migration planning、troubleshooting で使用します。

開発者情報

作成者

antfu

ライセンス

MIT

作者バージョン

v18.0.0

Skillstore リビジョン

リポジトリ

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

参照

89edfdc710d0846129dcee6a929477b04f08052c

メンテナンスの新しさ

2026/7/24

利用状況

29 ダウンロード · 272 閲覧

ファイル構成

📄 LICENSE.md

📁 references/

📄 animation-class-based-technique.md

📄 animation-state-driven-technique.md

📄 component-async.md

📄 component-data-flow.md

📄 component-fallthrough-attrs.md

📄 component-keep-alive.md

📄 component-slots.md

📄 component-suspense.md

📄 component-teleport.md

📄 component-transition-group.md

📄 component-transition.md

📄 composables.md

📄 directives.md

📄 perf-avoid-component-abstraction-in-lists.md

📄 perf-v-once-v-memo-directives.md

📄 perf-virtualize-large-lists.md

📄 plugins.md

📄 reactivity.md

📄 render-functions.md

📄 sfc.md

📄 state-management.md

📄 updated-hook-performance.md

📄 SKILL.md

React View Transitions を実装する

作成者 vercel-labs

React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。

コーディング＆開発表示

vue-best-practices

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

バリアントを比較

Skillstore スコア

作成できるもの

Vue Components をレビューする

Vue Tooling を安定させる

Test Coverage を改善する

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

ベストプラクティス

回避

よくある質問

開発者情報

antfu のその他のスキル

vue-router-best-practices

vue-testing-best-practices

vue

vite

vitest

unocss

関連スキル

vue-options-api-best-practices

senior-frontend

create-adaptable-composable

playwright-testing

starknet-js

vercel-react-view-transitions