스킬

Nuxt UI: v4에서 컴포넌트 라이브러리를 넣고 Agent가 AGENTS.md를 따르게 하기

Nuxt 프로젝트에 이 Vue UI를 넣거나, 코딩 대리가 저장소 규범으로 컴포넌트를 바꾸게 하려는 사람에게 맞다. 현재 페이지는 v4 브랜치다. v3/v2와 섞지 말 것.

Official source · Nuxt UI

Install

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에게 컴포넌트 구조나 테마 약속만 설명하게 한다. 아직 파일을 바꾸지 않는다.

사용 사례

사례 1: Nuxt 앱에 v4를 넣는다. 위의 pnpm 명령으로 @nuxt/ui와 tailwindcss를 설치한 뒤 @nuxt/ui 모듈을 등록하고 ~/assets/css/main.css를 가리킨다. 페이지에 npm/yarn 동등 명령은 없고 Vue 단일 파일에서 첫 컴포넌트를 어떻게 가져오는지도 쓰지 않았다. 확인할 수 있는 것은 의존성과 모듈 등록 두 걸음뿐이다. CSS 파일에 무엇을 쓸지, 페이지에 어떤 컴포넌트를 둘지는 이 발췌 밖이다. 이미 가진 로컬 문서나 소스를 따로 봐야 한다. 여기서 이미 주었다고 가장하지 말 것.

사례 2: 코딩 대리가 저장소 규범으로 일하게 한다. 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에게 바꿀 파일을 되말하게 하고 당신이 확인한 뒤 이어간다.