スキル

Nuxt UI:v4 でコンポーネントライブラリを入れ、Agent に AGENTS.md で働かせる

Nuxt プロジェクトにこの Vue UI を入れる人、またはコーディング代理にリポジトリ規範でコンポーネントを変えさせたい人向け。今見ているページは v4 ブランチ。v3/v2 と混ぜない。

公式ソース · Nuxt UI

インストール

pnpm add @nuxt/ui tailwindcss

誰向けか

Nuxt の界面を作っていて、ゼロからアクセシブルなコンポーネントを組む代わりに既製の Vue UI が欲しいなら、このリポジトリの方が合う。Reka UI、Tailwind CSS、Tailwind Variants を合わせ、複雑でアクセス可能で高性能な界面を作る。関連する上流はそれぞれ

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

nuxt.config を変えられる Nuxt プロジェクトが要る。pnpm で依存を入れることも受け入れる。コーディング代理にコンポーネント、テーマ、テストだけ手伝わせたい人は、先にリポジトリの AGENTS.md を読む。特定の Agent 製品だけを唯一の対応先とは書いていない。all AI coding agents が自動で拾う、とだけ言う。

3 分で最初の試行を終える

公式インストールコマンドはページ上この一本:

pnpm add @nuxt/ui tailwindcss

これはプロジェクト依存を変える。読み取り専用の閲覧ではない。先に今のディレクトリが自分の Nuxt アプリで、このマシンに pnpm があると確認してから実行する。入れたあとモジュールを設定へ書く。抜粋が示すのは:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

~/assets/css/main.css という CSS 入口があることを求める。そのファイル内容は書いていない。@import やコンポーネント用法を自分で足さない。成功の合図:依存が入っている、modules に @nuxt/ui が見える、アプリがいつもの起動方法で立ち上がり、このモジュール欠如でエラーにならない。Agent が抜粋に無いボタン見本を足し始めたり、テーマ token を変え始めたら先に止める。

より低リスクの照合:開く

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Agent にコンポーネント構造やテーマ約束だけ説明させる。まだファイルを変えない。

利用事例

事例一:Nuxt アプリに v4 を入れる。上の pnpm コマンドで @nuxt/ui と tailwindcss を入れ、@nuxt/ui モジュールを登録し ~/assets/css/main.css を指す。ページに npm/yarn 相当コマンドは無い。Vue 単一ファイルで最初のコンポーネントをどう引くかも書いていない。確認できるのは依存とモジュール登録の二歩だけ。CSS ファイルに何を書くか、ページにどのコンポーネントを置くかは、この抜粋の外。手元の既存文書やソースを別に見る。ここですでに渡したと装わない。

事例二:コーディング代理にリポジトリ規範で仕事させる。AGENTS.md は AI 助手へ貢献案内を出し、コンポーネント構造、テーマの型、テスト約束、文書案内を覆い、自動で拾われる。任務は読み取り専用の対照にする。例えば「AGENTS.md に沿い、このコンポーネントの構造/テーマ/テストが外れていないか見る」。具体的なテストコマンドは書いていない。文書サイトの公開方法も書いていない。最初は Agent に文書を一括で書き直させたりテストファイルを足させたりしない。先に根拠段落と変える経路を指させろ。

利用上の境界

今見ているのは v4 ブランチ。Nuxt UI v3 は

https://github.com/nuxt/ui/tree/v3

v2 は

https://github.com/nuxt/ui/tree/v2

旧ブランチのモジュール名、ディレクトリ、テーマの書き方を v4 に当てない。ページに v4 と v3 の移行表は無い。

インストール経路は pnpm add @nuxt/ui tailwindcss。別のパッケージマネージャコマンドを並列にしない。Reka UI と Tailwind Variants は能力の出所として書かれている。二本目のインストーラではない。

最初は依存を入れる、モジュールを登録する、または AGENTS.md を読むだけ、で止める。コンポーネントソースの変更、テスト追加、テーマ変更、CSS 入口の書き直しは、先に Agent に変えるファイルを言い返させ、あなたが確認してから続ける。