---
title: "Nuxtアプリの環境構築・初期化を自動化：AIエージェントのスキルが従来のシェルスクリプトに代わる理由"
description: "Cloudflare Workers上にNuxtアプリを自動構築する方法を徹底解説。従来の壊れやすいシェルスクリプトを、開発者の意図を組んで柔軟に判断・動作するインテリジェントなAIエージェントのスキルに置き換えるメリットや、npx skillsコマンドを用いた実用的なセットアップ手順を紹介します。"
canonical_url: "https://techvoyage.dev/ja/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts"
last_updated: "2026-10-20T09:53:48.267Z"
---

Nuxtフレームワークを使って新しいアプリケーションの開発を始めるとき、モジュールのインストールや、`nuxt.config.ts`、`wrangler.jsonc`などの設定ファイルのセットアップといった、退屈で煩雑な手順を踏む必要があります。シェルスクリプトを使えばこのプロセスを自動化できますが、プロジェクトの要件や構成のバリエーションが増えるにつれて、スクリプトによる対応はすぐに限界を迎えます。

そこで私たちは、従来の「スクリプト」によるアプローチを見直し、AIエージェントの**「スキル（Agent Skill）」**へと置き換える検証を行いました。

## 従来のシェルスクリプトが得意なこと

スクリプトは、あらかじめ決定された固定の処理手順を、コード内に直接ハードコードされたロジックに従って順番に実行することに長けています。

```bash
#!/usr/bin/env bash
set -e

npx nuxi@latest init "$1" --template minimal --packageManager pnpm --no-gitInit -M @nuxt/ui,@nuxthub/core,@vueuse/nuxt

cd "$1"

cp ~/templates/nuxt.config.ts .
cp ~/templates/wrangler.jsonc .
```

しかし、このスクリプトは以下のような課題に直面すると、途端に機能しなくなります。

- **固定されたデフォルト設定。** 上記のスクリプトでは UIモジュールとして `Nuxt UI` がハードコードされています。もし `Ant Design UI` モジュールを使いたい場合はどうすればよいでしょうか？モジュールの選択肢が増えるたびに、ユーザーが指定しなければならないコマンド引数は増え続けます。
- **ユーザーの「意図」を読み取れない。** 「ブログを作りたい」という要望には `@nuxt/content` が必要ですが、「ニュースレター機能付きのWebサイトを作りたい」という要望には `Cloudflare D1` と `Drizzle` が必要です。スクリプト単体ではこの要件の違いを自律的に判断できず、構成のパリエーションごとに個別のスクリプトを作成しなければなりません。
- **気づかないうちに風化・形骸化する。** Nuxtなどのフレームワークは、メジャーアップデートの際に設計 convention が大きく変更されます。たとえば、Nuxt 4 ではソースディレクトリが `app/` に変更されました。Nuxt 3 向けに書かれたスクリプトをそのまま使い続けると、誤ったディレクトリ構造で静かにスキャフォールディングが実行され、エラーを引き起こすまでユーザーは問題に気づきません。

**アプリケーションの初期構築（App Scaffolding）**は、「単純な処理の実行」ではなく「高度な意思決定」が求められる課題です。そのため、考慮すべき決定事項が増えれば増やすほど、スクリプトによる自動化はスケールしなくなります。

## なぜ従来のスクリプトではなく「AIエージェントスキル」を使うのか？

エージェントスキル（Agent Skill）とは、単に実行されるプログラムのコードではなく、**「AIエージェントが動作するために従う知識の体系」**です。スキルは `SKILL.md` という設計書ファイルを中心に構成され、タスクの実行に必要な関連リファレンスドキュメント、テンプレート、および実行スクリプトなどを柔軟に同梱できます。

エージェントスキルの具体的な仕組みについては、解説記事 [AIエージェントのスキルとは？その基本概念から作成方法、再利用可能なワークフローの構築までを徹底解説](/article/ai-agent-skills-what-they-are-how-to-create-them) で詳しく紹介しています。

AIエージェントのスキルは、シェルスクリプトとしての確実な実行力を維持しつつ、スクリプトにはない「自律的で合理的な判断力」をプロセスに追加してくれます。

- ユーザーの曖昧な指示（自然言語）から意図を推測し、データベースが必要かどうかを賢く判断します。
- 指定されたオプションリストから、本当に必要なオプションモジュールだけをインテリジェントに選択・導入します（例：`Nuxt Content`、`i18n`、分析ツールなどは、ユーザーの要件に応じてオプトインで追加されます）。
- 最新の `Nuxt` フレームワーク、Cloudflare 連携用の `NuxtHub`、およびデプロイ用の `Wrangler` など、目まぐるしく変化するエコシステムの最新仕様に自律的に適応します。
- 実行途中でエラーが発生した場合、エージェント自身でエラー原因を分析して自己修復・リトライを試みます。
- プロジェクトの構築完了前に、事前に定義されたチェックリストに沿って動作確認と品質チェックを自律的に実施します。

## Nuxt & Cloudflare スキャフォールディングスキルの裏側

私たちが作成した [`scaffold-nuxt-cloudflare-app-skill`](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) は、以下のステップに沿って、本番環境を見据えた高品質な初期構築を自律的に実行します。

1. **曖昧な要件の具体化**:

  - UIキットの選択（デフォルトは **Nuxt UI** または **Antdv Next**）
  - データベースの要否（例：**Cloudflare D1** の有無）
  - CMS用の `@nuxt/content` や多言語化用の `@nuxtjs/i18n` などの追加モジュールの要否
2. **ベースアプリケーションの構築**: `pnpm dlx nuxi@latest init` を実行して、最新バージョンの Nuxt フレームワークを `pnpm` パッケージマネージャー構成で初期化します。さらに、Cloudflare のビルド環境で `better-sqlite3` や `sharp` などのネイティブライブラリが正常にビルドできるよう、環境変数や設定を適切に構成します。
3. **意思決定マトリクスによるモジュール導入**: `@nuxt/ui` / `@antdv-next/nuxt`、`@nuxt/image`、`@nuxtjs/seo`、`@nuxthub/core`、`@vueuse/nuxt` などの必須・推奨モジュールに加え、ユーザーの要望に応じて Drizzle / D1、Nuxt Content、i18n を条件分岐でインストールします。
4. **最適なディレクトリ構造の展開**:

  - `app/` （Nuxt 4 準拠）
  - `server/`
  - `shared/`
  - `tests/`
  - ルート直下の各種設定ファイル
5. **nuxt.config.ts の詳細設定**:

  - SEO向上のための `site.url` や `site.name` の設定
  - Cloudflare バインディング用の NuxtHub `hub` ブロックの記述
  - ルーティングとキャッシュの制御を行う `routeRules` の生成
  - 最新の `compatibilityDate` の指定
6. **wrangler.jsonc の自動生成とバインディング**
7. **開発環境の堅牢化とテスト**: `Vitest` と `ESLint` をセットアップし、最後に自律的に `pnpm install` および `pnpm dev` を実行して動作確認を行います。すべての正常動作が確認された段階で、初めて初期構築作業の完了を宣言します。

## シェルスクリプト vs AIエージェントスキル：機能対比

<table>
<thead>
  <tr>
    <th>
      比較項目
    </th>
    
    <th>
      シェルスクリプト
    </th>
    
    <th>
      エージェントスキル
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      ユーザーの意図の理解
    </td>
    
    <td>
      ❌ 固定された挙動のみ
    </td>
    
    <td>
      ✅ 要件に応じて柔軟に適応
    </td>
  </tr>
  
  <tr>
    <td>
      柔軟な意思決定
    </td>
    
    <td>
      ❌ コマンド引数による事前定義のみ
    </td>
    
    <td>
      ✅ 実行時に状況から自律判断
    </td>
  </tr>
  
  <tr>
    <td>
      フレームワークの更新
    </td>
    
    <td>
      ❌ 手動でコードを書き換える必要あり
    </td>
    
    <td>
      ✅ 現在の最新エコシステムを検証し適応
    </td>
  </tr>
  
  <tr>
    <td>
      エラー発生時の復旧
    </td>
    
    <td>
      ❌ 処理がそこで停止する
    </td>
    
    <td>
      ✅ エラー原因を特定し自律的に自己修復
    </td>
  </tr>
  
  <tr>
    <td>
      成果物の品質検証
    </td>
    
    <td>
      ❌ チェック機能なし
    </td>
    
    <td>
      ✅ 最終チェックリストによる自動テスト
    </td>
  </tr>
  
  <tr>
    <td>
      メンテナンスコスト
    </td>
    
    <td>
      ❌ 引数や分岐ロジックの肥大化
    </td>
    
    <td>
      ✅ マークダウン（設計書）の修正だけで完結
    </td>
  </tr>
</tbody>
</table>

## npx skills CLI を使った AIエージェントスキルのインストール方法

エージェントスキルの導入は、オープンソースの [skills CLI](https://github.com/vercel-labs/skills) を使うことで、たった1つのコマンドで完了します。

```bash
npx skills add https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill.git -g
```

このコマンドを実行すると、CLI がリポジトリを自動的にクローンし、検出されたスキルを現在あなたの環境に導入されているどのエージェントに紐付けるかを尋ねてきます。
![npx skills add コマンドを実行して、ターミナル上でNuxt環境構築用のスキルをグローバルにインストールする様子](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-add-scaffold-nuxt-installation.webp)

今回は、推奨されるインストール方法である **Symlink（シンボリックリンク）** を選択します。これにより、スキルは `~/.agents/skills` に一度だけダウンロードされ、選択したすべてのエージェントがその同一のオリジナルファイルを参照するようになります。
![シンボリックリンク（Symlink）を利用して、~/.agents/skills に一度だけスキルをインストールするセットアップ完了画面](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp)

- *複数の異なるAIエージェントにスキルを一元管理して配布する手法の詳細は、解説記事 npx skillsを使ってAIエージェントのスキルフラグメンテーション（機能の断片化）を解消する方法 をご参照ください。*

インストール完了後、Claude Code を起動すると、新しいコマンドとして認識されていることが確認できます。

![Claude Code のターミナル画面上に新しく追加された環境構築用の /scaffold-nuxt スラッシュコマンドが表示されている様子](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp)

あとは、普段の自然言語で指示を出すだけで、完璧な環境が数秒で構築されます。

> "Scaffold a new Nuxt app deployed to Cloudflare Workers — Nuxt UI, a blog section, and a D1 database"
> （Cloudflare Workers にデプロイ可能な Nuxt アプリの雛形を作って。UI は Nuxt UI で、ブログセクションと D1 データベースも含めてほしい）

このスキャフォールディングスキルはオープンソースとして公開されています。ぜひ [GitHub リポジトリ](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) をチェックして、その劇的な効率化を体験してみてください。