mcpField
V
vue

vue

github.com/uni-helper開発111709 回インストール39 週間前に更新
リポジトリ

vue について

UI を構築する開発者向けの Vue 3.5+ スキルです。リアクティビティ、コンポーネント、TypeScript、再利用可能なロジックに加え、依存性注入や非同期コンポーネントも扱います。

主な機能

  1. 01リアクティビティとライフサイクルフック
  2. 02コンポーネントの props、イベント、スロット
  3. 03Composition API と TypeScript
  4. 04コンポーザブルとカスタムディレクティブ
  5. 05依存性注入
  6. 06非同期コンポーネントと Suspense

活用シーン

  1. 01アプリのリアクティブな状態管理
  2. 02再利用可能な Vue コンポーネントの定義
  3. 03コンポーザブルによる状態付きロジックの共有
  4. 04非同期コンポーネントのフロー構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/uni-helper/skills --skill vue

インストール後、Claude Code で/vueを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
LICENSE.md
SYNC.md
references/
advanced-async-suspense.md
advanced-provide-inject.md
components-emits.md
components-lifecycle.md
components-props.md
components-slots.md
components-v-model.md
core-reactivity.md
features-composables.md
features-directives.md
features-script-setup.md
features-template-refs.md
features-typescript.md

詳細

Vue

このスキルは Vue 3.5+ に基づいており、2026-01-28 に生成されました。

Vue は、ユーザーインターフェースを構築するためのプログレッシブな JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を基盤とし、直感的な API と世界水準のドキュメントを備えています。Vue アプリケーションの構築には、<script setup> と TypeScript を使用する Composition API が推奨されます。

コアリファレンス

トピック説明リファレンス
リアクティビティシステムref、reactive、computed、watch、watchEffectcore-reactivity

コンポーネント

トピック説明リファレンス
PropsTypeScript でコンポーネントの props を宣言し、検証しますcomponents-props
イベント（Emits）コンポーネントからカスタムイベントを発行しますcomponents-emits
スロット子コンポーネントにテンプレートコンテンツを渡しますcomponents-slots
v-modelカスタムコンポーネントの双方向バインディングcomponents-v-model
ライフサイクルフックコンポーネントのライフサイクルの特定の段階でコードを実行しますcomponents-lifecycle

機能

Script Setup と TypeScript
トピック説明リファレンス
Script SetupSFC 向けの Composition API の構文糖features-script-setup
TypeScriptComposition API を使った型安全な Vue コンポーネントfeatures-typescript
再利用性
トピック説明リファレンス
Composables状態を持つロジックをカプセル化して再利用しますfeatures-composables
カスタムディレクティブ低レベルの DOM 操作を行うディレクティブfeatures-directives
テンプレート refsDOM やコンポーネントインスタンスに直接アクセスしますfeatures-template-refs

高度な機能

トピック説明リファレンス
Provide/Injectコンポーネントツリー全体で依存関係を注入しますadvanced-provide-inject
非同期処理と Suspenseトップレベルの await に関する注意点、非同期コンポーネント、Suspenseadvanced-async-suspense

主な推奨事項

  • すべてのコンポーネントで <script setup lang="ts"> を使用する
  • 状態の宣言には reactive() より ref() を優先する
  • インターフェースを使った型ベースの prop 宣言を使用する
  • v-model には defineModel() を使用する（3.4+）
  • コードをすっきりさせるため、props をリアクティブに分割代入する（3.5+）
  • 再利用可能な状態管理ロジックには composables を抽出する

コメント

Markdown 対応