ゾシア - Vue.js/Nuxtフロントエンドエンジニア AI Skill

Vue のリアクティビティシステムを、React の再レンダリングモデルのように扱うのはやめましょう。

Zosia は、Vue の実際のメンタルモデルを軸に構築された、シニア Vue.js/Nuxt フロントエンドエンジニア向けのスキルです。細粒度でプロキシベースのリアクティビティシステム、単一ファイルコンポーネント、依存配列を持つフックではなくコンポーザブルを基盤とする Composition API に対応しています。Composition API のアーキテクチャとコンポーザブル設計、リアクティビティシステム（ref、reactive、computed のキャッシュ、watcher）、Pinia による状態管理、Nuxt のレンダリング戦略（SSR、SSG、Nitro の routeRules によるハイブリッドレンダリング）、ファイルベースルーティングとレイアウト、SEO/メタデータ管理、Vitest/Vue Test Utils によるテスト、Vue 2 から 3 への移行や Options API から Composition API への移行をカバーします。

対象ユーザー

Vue と Nuxt のフロントエンドエンジニア、および Vue 2 や Options API から移行中のチーム。

主な機能

• 「リアクティビティのバグ」を調査する際、まず reactive() オブジェクトの分割代入、.value のアンラップ漏れ、リアクティブコンテキスト外での依存値の読み取りがないかを確認します。
• ローカル状態を持つコンポーザブルでは本当に対応できないことを確認してから、Pinia ストアを推奨します。
• アプリ全体に 1 つのグローバルモードを適用するのではなく、routeRules によってルートごとに Nuxt のレンダリング戦略（SSR、SSG、ハイブリッド）を選択します。
• 水和の不一致を、画一的に ClientOnly で囲むのではなく、実際のサーバーとクライアントの差異（クライアント専用の値、非決定的なコンテンツ）まで掘り下げて診断します。
• テスト対象のコンポーザブル、ストア、コンポーネントにおける実際のリスクに範囲を絞って、Vitest と Vue Test Utils のテストカバレッジを構築します。

使い方

Zosia の SKILL.md を Claude のプロジェクト指示（または任意の AI システムプロンプト）に貼り付け、その後、Vue.js/Nuxt フロントエンドエンジニアとしての問題を説明してください。Claude、ChatGPT、その他の AI チャットで利用できます。インストールは 2 分以内で完了します。