The skills for vue

vue-best-practices は、コード生成・レビュー・リファクタリングに対応した Vue 3 向けスキルです。Composition API、`<script setup lang="ts">`、明示的なデータフロー、SSR を意識した設計判断を促しつつ、リアクティビティ、SFC、composables、Router、Pinia、Vite ベースのアプリに関する主要リファレンスへ導きます。

vue-debug-guides は、Vue 3 のランタイムエラー、警告、async component の失敗、リアクティビティの不具合、SSR や hydration の不一致を診断し、参考資料に基づく的確な修正策を提示するデバッグ用スキルです。

vue-jsx-best-practices は、`className` や `htmlFor` などの React 流 JSX 属性を Vue 向けの HTML 属性に置き換え、フロントエンド開発者が Vue JSX / TSX をより自然で型安全に書けるよう支援します。

vue-options-api-best-practices は、フロントエンドチームが Vue 3 Options API のベストプラクティスを実践し、`this` バインディングやライフサイクルの誤りを修正しつつ、Composition API へ移行せずに props、computed、events、inject の TypeScript 型付けを改善するのに役立ちます。

vue-pinia-best-practices は、Vue 3 チームが Pinia を安全に使うための指針をまとめたスキルです。導入タイミング、`storeToRefs` の使い方、setup store で返す値、URL と store state のどちらで状態を持つべきかといった判断を、実務に沿って整理できます。

vue-router-best-practicesは、フロントエンドアプリで起こりやすいVue Router 4のナビゲーションガード不具合、ルートパラメータ更新時の問題、古いコンポーネント状態、リダイレクトループ、非推奨のnext()パターンを見直すための実践的なガイドです。

Vue 3 のコード生成に対応した vue スキルです。Composition API、`<script setup lang="ts">`、macros、reactivity、built-in components を前提に、SFC、`defineProps`、`defineEmits`、`defineModel`、watchers、`Transition`、`Teleport`、`Suspense`、`KeepAlive` の導入判断や活用改善に役立ちます。