vue-creater

Vue Web アーティファクトビルダー

データフローとコンテキスト管理（重要）

ファイルパスを保存するために、セッションコンテキストを維持する必要があります。必要な変数を設定するまで、後続のステップに進まないでください。

• $SKILL_DIR：このスキルのディレクトリの絶対パス（vue-creater/SKILL.md がある場所）。
• $PROJECT_ROOT：ステップ 1 で作成したプロジェクトの絶対パス。
• $DSL_PATH：ステップ 2 で生成された dsl.json ファイルの絶対パス（デフォルトテンプレートのワークフローのみ）。

重要：このドキュメントに記載されているすべてのスクリプトパスは、$SKILL_DIR からの相対パスです。スクリプトを実行するときは、必ず完全なパスを使用してください：$SKILL_DIR/scripts/script-name.py

クイックスタート

ステップ 0：プロジェクトタイプを選択

最初のステップ — 必須：ユーザーにプロジェクトタイプを選択するよう尋ねてください：

Please select the project type:

    1. **Default** (shadcn + tailwindcss + vite)
    2. **Nuxt Admin Dashboard** (shadcn + tailwindcss + nuxt)
    3. **Electron** (shadcn + tailwindcss + electron + vite)

    Choice [1/2/3]:

停止してユーザーの入力を待ちます — メニュー項目を自動的に実行しないでください。番号、コマンドのトリガー、または曖昧一致したコマンドを受け付けます。

ユーザーの入力に基づくアクション：

• 選択肢「1」（デフォルト）の場合：

  1. ステップ 1 に進み、デフォルトのワークフロー（ステップ 1〜4）に従います。

• 選択肢「2」（Nuxt Admin Dashboard）の場合：

  1. スクリプトを実行します：python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]
     • 条件：コンテキストでプロジェクト名が指定されている場合は、引数として渡します。指定されていない場合は省略し、デフォルト名を使用します。
  2. 出力を取得：スクリプトの出力からディレクトリパスを確認します（成功メッセージの前の最終行）。
  3. 割り当て：このパスを変数 $PROJECT_ROOT に設定します。
  4. 残りのステップをすべてスキップ — Nuxt ダッシュボードは設定済みで、すぐに使用できます。
  5. 次のコマンドを実行するようユーザーに伝えます：cd $PROJECT_ROOT && bun run dev
  6. ワークフローを終了 — ステップ 1〜4 に進まないでください。

• 選択肢「3」（Electron）の場合：

  1. スクリプトを実行します：python3 $SKILL_DIR/scripts/electron_vue_init.py [project-name]
     • 条件：コンテキストでプロジェクト名が指定されている場合は、引数として渡します。指定されていない場合は省略し、デフォルト名を使用します。
  2. 出力を取得：スクリプトの出力からディレクトリパスを確認します（成功メッセージの前の最終行）。
  3. 割り当て：このパスを変数 $PROJECT_ROOT に設定します。
  4. ステップ 1 とステップ 4 をスキップ — プロジェクトのスキャフォールディングは完了しています。
  5. ステップ 2 に進み、デザインデータ（DSL）を同期します。

---

デフォルトテンプレートのワークフロー（選択肢 1）

Vue エコシステムを使用して、強力な claude.ai アーティファクトを構築するには、次のステップに従います：

1. スクリプトを使用してプロジェクトのスキャフォールディングを初期化します：$SKILL_DIR/scripts/shadcn_vue_init.py
2. ツールを使用してデザインデータを取得します：get_dsl
3. ツールを使用してデザイントークンとスタイルを適用します：get_token
4. 開発サーバーを起動します

スタック：

• コア：Vue 3（Script Setup）+ TypeScript + Vite v8.0.0
• スタイリング：Tailwind CSS v4 + shadcn-vue（Radix-vue ベース）
• 状態管理とロジック：Pinia（ストア）+ Vue Router + TanStack Query（vue-query）

ステップ 1：プロジェクトのスキャフォールディングを初期化

手順：

1. スクリプトを実行します：python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]
   • 条件：コンテキストでプロジェクト名が指定されている場合は、引数として渡します。指定されていない場合は省略し、デフォルト名を使用します。
2. 出力を取得：スクリプトの出力からディレクトリパスを確認します（成功メッセージの前の最終行）。
3. 割り当て：このパスを変数 $PROJECT_ROOT に設定します。
4. 検証：$PROJECT_ROOT が空の場合は停止し、インストールを確認するようユーザーに尋ねます。

このスクリプトの処理内容：

• ✅ Vue 3 + Vite 8.0.0 をセットアップします
• ✅ Tailwind CSS 4 を設定します（CSS ファーストの設定、汎用的な config js は使用しません）
• ✅ shadcn-vue をインストールし、components.json を設定します
• ✅ Pinia、Vue Router、Vue Query のプラグインをセットアップします

Step 2: デザインデータを同期する（DSL）

次の質問をしてください： デザインソースの設定を選択してください：

1. **カスタムデザイン DSL**（デザイントークンの URL またはファイルパスを指定）
2. **TOKEN_URL_LIGHT を使用する**（.env の TOKEN_URL_LIGHT 変数から DSL URL を読み取る）
3. **デフォルトを使用する**（デザイントークンをスキップし、デフォルトのテーマを使用）

選択 [1/2/3]：

ここで停止してユーザーの入力を待つ — メニュー項目を自動的に実行してはいけません — 数字、コマンドトリガー、または曖昧なコマンド一致を受け付けます ソースからデザイン構造とレイアウトデータを取得します：

ユーザー入力に基づくアクション：

• 選択肢「1」（カスタム）の場合：

  1. URL が指定されていない場合は、URL を尋ねます。
  2. URL を指定して get_dsl を実行します。
  3. 出力を取得：保存された JSON のファイルパス（例：.../dsl.json）を探します。
  4. 割り当て：このパスを変数 $DSL_PATH に設定します。

• 選択肢「2」（TOKEN_URL_LIGHT）の場合：

  1. .env ファイルの存在を確認します：
     • 現在の作業ディレクトリまたはプロジェクトのルートディレクトリに .env ファイルがあるか確認します。
     • .env ファイルが存在しない場合：
       • ここで停止してユーザーの入力を待ちます
       • 次の内容で .env ファイルを作成するようユーザーに促します：

         TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json
         

       • .env ファイルの配置場所と必要なパラメーターをユーザーに説明します。
       • ユーザーが .env ファイルを作成して設定したことを確認するまで待ちます。
  2. .env ファイルの存在が確認されたら、.env ファイルから TOKEN_URL_LIGHT 変数を読み取ります。
  3. TOKEN_URL_LIGHT が .env に定義されていない場合：
     • ここで停止してユーザーの入力を待ちます
     • .env ファイルに TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json を追加するようユーザーに促します。
     • ユーザーが変数を追加したことを確認するまで待ちます。
  4. TOKEN_URL_LIGHT が定義されている場合：TOKEN_URL_LIGHT の URL を指定して get_dsl を実行します。
  5. 出力を取得：保存された JSON のファイルパス（例：.../dsl.json）を探します。
  6. 割り当て：このパスを変数 $DSL_PATH に設定します。

• 選択肢「3」（デフォルトを使用）の場合：

  1. 「デフォルトのテーマを使用し、DSL の取得をスキップします。」と記録します。
  2. 割り当て：カスタムデザイントークンがないことを示すため、$DSL_PATH を空または null に設定します。

Step 3: デザイントークンを適用する

前提条件：

• $PROJECT_ROOT が定義されていることを確認します（Step 1 で設定）。
• $DSL_PATH が定義されていることを確認します（Step 2 で設定）。

指示： 前の手順で取得した正確なパスを使用して、get_token ツールを呼び出してください。

厳密な実行ロジック：

$DSL_PATH が有効な場合（ユーザーがカスタムを選択）： 実行：get_token(project_path=$PROJECT_ROOT, dsl_path=$DSL_PATH)

それ以外の場合（ユーザーがデフォルトを選択）： 「デフォルトのテーマのため、トークンの適用をスキップします。」と記録します。

目標：$DSL_PATH にある DSL ファイルからデザイントークンを抽出し、$PROJECT_ROOT 内にある Tailwind 4 の設定に適用します。

Step 4: 開発サーバーを起動する

指示：

1. 以下のコマンドを直ちに実行します。
2. 重要：ディレクトリのコンテキストを維持するため、必ず連結コマンド形式（&&）を使用してください。

cd "$PROJECT_ROOT" && bun run dev

注：このプロジェクトでは、依存関係のインストールと開発サーバーの起動を高速化するため、パッケージマネージャーとして bun を使用します。

スクリプトのリファレンス

shadcn_vue_init.py

場所：$SKILL_DIR/scripts/shadcn_vue_init.py

使用方法：

python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]

機能：

• Vue 3 + Vite 8.0.0 プロジェクトを作成します
• CSS ファーストの設定で Tailwind CSS 4 を構成します
• shadcn-vue コンポーネントをインストールして構成します
• Pinia、Vue Router、TanStack Query をセットアップします
• スキーマ検証用に Zod をインストールします
• コンポジションユーティリティ用に VueUse をインストールします
• ユーティリティファイル（lib/utils.ts、composables/useApi.ts）を作成します
• 包括的な README.md を生成します
• 不要なテンプレートファイルをクリーンアップします

setup_nuxt_dashboard.py

場所：$SKILL_DIR/scripts/setup_nuxt_dashboard.py

使い方：

python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]

機能：

• 事前設定済みの Nuxt 3 管理ダッシュボードテンプレートを zip ファイルから展開します
• Shadcn UI コンポーネントと Tailwind CSS の設定が含まれています
• bun を使用して必要な依存関係をすべてインストールします
• すぐに使える管理ダッシュボードの構成を提供します

参考資料

• shadcn-vue: https://www.shadcn-vue.com/
• Tailwind CSS v4: https://tailwindcss.com/docs/v4-beta（CSS 中心の設定）
• Vite: https://vitejs.dev/