Nuxtアプリの環境構築・初期化を自動化：AIエージェントのスキルが従来のシェルスクリプトに代わる理由

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

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

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

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

#!/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エージェントのスキルとは？その基本概念から作成方法、再利用可能なワークフローの構築までを徹底解説 で詳しく紹介しています。

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

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

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

私たちが作成した 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エージェントスキル：機能対比

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

エージェントスキルの導入は、オープンソースの skills CLI を使うことで、たった1つのコマンドで完了します。

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

このコマンドを実行すると、CLI がリポジトリを自動的にクローンし、検出されたスキルを現在あなたの環境に導入されているどのエージェントに紐付けるかを尋ねてきます。

今回は、推奨されるインストール方法である Symlink（シンボリックリンク） を選択します。これにより、スキルは ~/.agents/skills に一度だけダウンロードされ、選択したすべてのエージェントがその同一のオリジナルファイルを参照するようになります。

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

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

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

"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 リポジトリ をチェックして、その劇的な効率化を体験してみてください。