vue

vue skill の概要

vue skill は何のためのものか

vue skill は、Vue 3 のコード生成とレビューに特化したガイドです。特に Composition API、<script setup lang="ts">、compiler macro、reactivity API、さらに Transition、Teleport、Suspense、KeepAlive といった組み込みコンポーネントの現行ベストプラクティスを前提にしています。AI エージェントに Vue Single File Components を作らせる際、古い Options API パターンに戻らず、最初からモダンな Vue スタイルで出力させたい場合にとても有効です。

どんな人に vue skill は向いているか

この vue skill は、Vue コンポーネント、composable、リファクタ依頼を日常的に AI に出すフロントエンド開発者、フルスタック開発者、AI 活用ユーザーに向いています。特に、TypeScript 前提・macro を理解した出力を求めていて、Vue 2 や初期 Vue 3 の癖が混ざったコードではなく、Vue 3.5 世代のドキュメントに沿った結果が欲しい場合に価値があります。

実際に解決してくれる仕事

多くのユーザーが必要としているのは、汎用的なフレームワーク解説ではありません。必要なのは、AI が次のような Vue コードを安定して書けることです。

• デフォルトで Composition API を使う
• <script setup lang="ts"> を優先する
• defineProps、defineEmits、defineModel を正しく扱う
• ref、shallowRef、computed、watch を状況に応じて使い分ける
• 高度な組み込み機能を、本当に必要な場面でだけ使う

これこそが vue for Frontend Development の実務的な価値です。つまり、AI 生成コードの後片付けを減らせます。

この skill がはっきり差別化されている理由

最大の違いは、方針が明確なことです。元のソースでは TypeScript、<script setup lang="ts">、Composition API を明確に推奨し、Reactive Props Destructure は非推奨としています。さらに、次のテーマに絞ったリファレンスも用意されています。

• script setup macros
• reactivity と新しめの core API
• 高度な組み込みコンポーネントと directives

そのため、広く浅く「Vue を教えて」と尋ねるより、実装作業ではこの skill のほうが役立ちます。

この skill がカバーしようとしていないこと

これは Vue エコシステム全体を網羅する地図ではありません。routing、state ライブラリ、SSR フレームワーク、テスト、build tooling まで深く置き換えるものでもありません。Nuxt のアーキテクチャ、Vue Router の設計、Pinia の構成、デプロイパイプラインが主題なら、vue skill はコンポーネント単位のコード品質には効きますが、それだけを唯一の情報源にするべきではありません。

vue skill の使い方

vue skill の導入コンテキスト

skills 対応環境には、次のコマンドでインストールします。

npx skills add antfu/skills --skill vue

リポジトリを見ると、この skill は antfu/skills の skills/vue 配下にあります。ここで入るのは Vue 本体の package ではなく、AI による Vue 生成を改善するためのガイドです。フレームワーク runtime そのものを追加するものではありません。

最初に読むべきファイル

vue skill を使う前に、最短で要点をつかみたいなら次の順で読むのがおすすめです。

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

この順番がよい理由:

• SKILL.md で、この skill の動作方針と適用範囲が分かる
• 3 つの reference ファイルに、エージェントが実際に使いやすい実務的な情報がまとまっている
• GENERATION.md で、この内容が Vue docs 由来であり、比較的新しいスナップショットに基づくことが確認できる

vue skill が必要とする入力

vue usage の品質は、渡す依頼内容に大きく左右されます。エージェントには次の情報をできるだけ渡してください。

• コンポーネントの目的
• props と emit するイベント
• v-model が必要かどうか
• 想定している state の形
• async data の要件
• 出力が component、composable、pattern example のどれか
• もし最新の Vue 3 ではないなら、そのバージョン制約
• TypeScript 必須かどうか
• UI やパフォーマンス上の制約

弱い入力:

• “Make a Vue component for search.”

強い入力:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

曖昧な要望を強い vue プロンプトに変える

vue skill をうまく使うには、実装上の判断ポイントを明示して依頼することが重要です。良いプロンプト構成は次の通りです。

1. 何を作るかを示す
2. Vue の流儀・規約を指定する
3. 入出力を定義する
4. 振る舞いと制約を加える
5. トレードオフがある箇所では理由説明も求める

例:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

単に “write Vue” と頼むより効果的なのは、この skill がもともと持っている方針に依頼内容が合っているからです。

この skill がデフォルトで寄せていくコーディングスタイル

ソースを見る限り、この skill はエージェントを次の方向へかなり強く誘導します。

• Vue 3.5
• Composition API
• <script setup lang="ts">
• macro ベースの component 定義
• 型付き props と emits
• パフォーマンスに敏感なデータでは shallowRef を選ぶ

Options API、素の JavaScript、レガシーな Vue パターンを使いたいなら、明示的にそう伝える必要があります。この skill はそちらをデフォルトにはしていません。

vue usage が特に活きるユースケース

この vue guide が特に強いのは、次のような場面です。

• 新しい Vue SFC を書く
• 古いコンポーネントを <script setup> にリファクタする
• 型付き props、emits、models を定義する
• ref、reactive、computed、watcher の使い分けを決める
• Transition、Teleport、Suspense、KeepAlive を使う
• モダンな Vue パターンに沿った composable 例を生成する

一方で、純粋に見た目中心のデザイン作業や、フレームワーク非依存のフロントエンド作業にはそこまで向きません。

最初の出力を得る実践的な進め方

信頼しやすい進め方は次の流れです。

1. props、emits、state shape を明記して、まず Vue SFC の初稿を出させる
2. 生成された API が、実際の component contract に合っているか確認する
3. その後で、reactivity の選択、型付け、エッジケースを詰める第 2 版を依頼する
4. Transition や suspense boundary のような高度機能は、そのあとで追加する

この順序が大事なのは、基本の state flow が固まっていない段階で高度な Vue 機能を入れると、過剰設計になりやすいからです。

出力品質に影響する、リポジトリ由来の具体情報

skill のソースから拾える有用なポイントは次の通りです。

• defineModel は Vue 3.4+ で使える前提になっている
• withDefaults は Vue 3.4 以下では引き続き重要
• reactive() は destructuring すると reactivity を失う
• 深い reactivity が不要なら shallowRef が推奨される
• Transition や Suspense などの built-ins には実践的なパターン解説がある

この手の情報こそ、リポジトリをざっと見ただけでは出てこない、生成コードの質を一段上げる材料です。

この skill に合うリクエスト例

相性のよい vue usage の依頼例:

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

インストール前に確認したいミスマッチ

vue skill だけで次まで解決できると期待しないでください。

• project scaffolding
• router architecture
• 大規模アプリ全体の state store 設計
• SSR や Nuxt 固有の意思決定
• test runner のセットアップ
• CSS framework 連携の詳細

こうした点が主な課題なら、この skill は「コンポーネント生成の品質向上用」として導入するのが適切で、Vue スタック全体の完全ガイドにはなりません。

vue skill FAQ

vue skill は初心者にも向いていますか？

はい。Vue 3 ですでに開発していて、AI の出力をもっときれいにしたい初心者には有効です。初心者向けカリキュラムそのものではありませんが、Composition API と <script setup lang="ts"> という一貫した流儀に寄せてくれるため、パターンが混在する混乱を減らせます。

vue skill は古い Vue パターンにも対応していますか？

第一選択ではありません。ソースでは、Options API より Composition API を常に使う方針が示されています。レガシー色の強いコードベースでも利用はできますが、互換性制約を明示し、マイグレーションの扱いは慎重に確認する必要があります。

普通に Vue についてプロンプトを書くのと何が違いますか？

通常のプロンプトだと、Vue コードがぶれやすくなります。API が混ざる、型が弱い、macro の使い方が古い、といったことが起こりがちです。vue skill は、方針・モダンな macro 運用・絞り込まれた reference を含む、より狭く明確なプレイブックをエージェントに与えます。その結果、手修正が減ることが多いです。

Nuxt や大きめのスタックで作業している場合、vue install だけで足りますか？

いいえ。vue install は component や reactivity に関するガイドには役立ちますが、より大きなスタックでは Nuxt、routing、state、data fetching、deployment などの知識が引き続き必要です。これは Vue コード生成レイヤーとして使うもので、アプリ全体のアーキテクチャ skill ではありません。

どんなときは vue skill を使わないほうがよいですか？

次のようなタスクなら、使わない判断も妥当です。

• framework-neutral な UI コード
• React / Angular / Svelte の作業
• backend-only の実装
• 生の Vue component 作業がほとんどない、Nuxt 固有規約中心の案件
• モダンパターンが許されない、厳格な legacy Options API 保守

高度な Vue 機能もカバーしていますか？

はい。ただし、必要な範囲に絞っています。含まれている reference では、Transition、Teleport、Suspense、KeepAlive、directives、reactivity API、lifecycle hooks、macros を扱っています。Vue 全百科事典ではない一方、実務的なフロントエンド作業の多くには十分な範囲です。

vue skill を改善する方法

Vue のバージョンと互換性境界を最初に伝える

この skill は Vue 3.5 世代のガイダンスを前提にしています。アプリが Vue 3.3 や 3.4 を使っている、あるいは古い macro 制約があるなら、最初にそれを伝えてください。特に defineModel の可否や、props の default の扱いに影響します。

UI の雰囲気だけでなく component contract を指定する

vue の出力を最も手早く改善する方法は、次を具体的に渡すことです。

• prop 名と型
• emit するイベント
• model binding
• async state
• empty state と error state
• 親子コンポーネントの責務分担

この skill は contract が明確なら実装に強いです。逆に、曖昧な UI 説明から API 全体を推測させる使い方は得意ではありません。

reactivity の選択を明示的に求める

Vue のミスは template 構文より、state 設計で起こることが多いです。たとえば次のような観点をプロンプトに入れてください。

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

これは references の中でも特に強い部分と噛み合っており、抽象的に “best practices” を求めるよりコード品質を上げやすくなります。

よくある失敗パターンを早めに潰す

最初の出力では、次の点を重点的に確認してください。

• Composition API を望んでいるのに Options API が出てくる
• <script setup lang="ts"> ではなく通常の <script> になっている
• defineProps や defineEmits に型が付いていない
• 不要に深い reactivity を使っている
• computed で十分な箇所に watcher を使っている
• 必要性がないのに高度な built-ins が追加されている

このあたりが、汎用生成がこの skill の品質基準から外れやすい代表例です。

一度に全部ではなく、論点ごとに改善する

最初の回答のあと、すべてを一気に直させないことも大切です。次のように段階的に改善すると精度が上がります。

1. API shape
2. typing と macros
3. reactivity の正しさ
4. rendering states
5. 高度な UX パターン

こうすると各変更点を検証しやすく、エージェントも vue guide の方針から逸れずに済みます。コンポーネント全体を毎回予測不能に再生成させるのを防げます。

reference ファイルをエスカレーション先として使う

最初の結果が惜しいけれど十分ではない場合は、skill 付属の reference に寄せて指示すると効果的です。

• references/script-setup-macros.md は props、emits、models、slots、macro syntax 用
• references/core-new-apis.md は reactivity、watchers、composables 用
• references/advanced-patterns.md は built-in components と directives 用

これは、プロンプトを一から書き直さずに vue for Frontend Development の出力品質を上げる、かなり実践的な方法です。

最小構成の案と本番向けの案を分けて依頼する

効果の高い進め方として、次の 2 段階があります。

• 1 回目の依頼: 最小限で動く SFC
• 2 回目の依頼: typing、states、accessibility、performance 判断を含む本番向けの改善版

こうすると初稿が無駄に膨らまず、どこで Vue 固有の判断が重要になるかも見えやすくなります。

自分のコードベース規約に合わせて skill を補正する

チームの規約がこの skill のデフォルトと違うなら、必ず明示してください。たとえば次のようなものです。

• JavaScript only
• no defineModel
• avoid Suspense
• type-only 宣言ではなく、明示的な prop object を使う
• 要求されない限り advanced built-ins は使わない

vue skill には明確な方針があるので、それ自体は強みです。ただし、実際のリポジトリ制約に合わせて前提を上書きしたほうが、最終的な結果は良くなります。