vue-skills – Vue 3 開発のための AI エージェントスキル

概要 – AI コーディングアシスタント（例：Claude Code）に読み込ませることで、Vue 3 のコード作成能力を向上させる、コミュニティ主導のスキルコレクションです。各スキルには、モデルが見落としがちなパターン、ベストプラクティス、エッジケースに関する知識がエンコードされています。

インストール

# 汎用インストーラー（互換性のあるエージェントで使用可能）
npx skills add vuejs-ai/skills

Claude Code ユーザー向けには、マーケットプレイスワークフローが用意されています：

/plugin marketplace add vuejs-ai/skills          # リポジトリの登録
/plugin install vue-skills-bundle@vue-skills      # すべてのスキルを一括インストール
# または個別のスキルをインストール
/plugin install vue-best-practices@vue-skills
/plugin install vue-router-best-practices@vue-skills

使用方法

アシスタントにプロンプトを送る際、先頭に use vue skill というフレーズを付けることで、モデルに関連するルールセットをアクティブにするよう指示します。

Use vue skill, create a todo app with Pinia and Vue Router

プレフィックスがない場合、キーワードマッチングの状況に応じてスキルが適用される場合とされない場合があります。

利用可能なスキル

スキル	使用タイミング	カバー範囲
vue-best-practices	Vue 3 + Composition API + TS	一般的なベストプラクティス、SSR のヒント、パフォーマンスのコツ
vue-options-api-best-practices	Options-API コード	`this` の扱い、ライフサイクル、Options API の TS 型定義
vue-router-best-practices	Vue Router 4	ナビゲーションガード、パラメータ、ルートコンポーネントのライフサイクル
vue-pinia-best-practices	Pinia 状態管理	ストアのセットアップ、リアクティブパターン
vue-testing-best-practices	ユニット/E2E テスト	Vitest, Vue Test Utils, Playwright ガイダンス
vue-jsx-best-practices	Vue での JSX	React JSX との構文の違い
vue-debug-guides	Vue 3 のデバッグ	ランタイムエラー、ハイドレーションの問題、非同期エラーハンドリング
create-adaptable-composable	再利用可能なコンポーザブルの作成	`MaybeRef` / `MaybeRefOrGetter` 入力パターン

出力例

`vue-best-practices` – Todo アプリのデモ

プロンプト: create a todo app 結果: アシスタントは、より読みやすいプロジェクト構造を作成し、コンポーネントを分割し、状態をコンポーザブル (useTodos.ts) に抽出し、プリミティブなリアクティブデータに shallowRef を使用します。完全なデモリンクは README に記載されています。

`create-adaptable-composable` – `useHidden`

プロンプト: create a reusable composable for controlling hidden for an element 結果: MaybeRef/MaybeRefOrGetter 引数を受け入れ、柔軟なリアクティビティを実現するコンポーザブルを生成します。生成された TypeScript シグネチャは README に示されています。

メソドロジー

スキルの種類 – Capability (機能)：スキルなしではモデルが処理できない問題（例：バージョン固有の癖）を解決します。 Efficiency (効率)：モデルがすでに生成できるものの、最適ではないソリューションを改善します。
検証 – 自動化された評価により、ベースライン（スキルなし）とスキルありの実行を比較します。スキルは、失敗したベースラインを合格結果に変える場合にのみ保持されます。

コントリビューション

開発は dev ブランチで行われます。main ブランチには公開され、精査されたスキルのみが含まれます。ワークフロー：dev からブランチを作成 → dev へ PR → マージ → GitHub Action が main に同期します。

ライセンス

MIT。

vuejs-ai/skills