claude-nuxt-fullstack-scaffold은(는) 무엇을 하나요?
설명: 프로덕션 준비가 완료된 Nuxt 3 앱을 선택적 i18n, SQLite(Drizzle) 또는 Supabase와 함께 스캐폴딩하기 위한 Claude 스킬입니다. 3개의 실행 가능한 예제를 포함합니다.
개요
이 스킬은 Claude가 Nuxt 3 풀스택 애플리케이션을 빠르게 스캐폴딩할 수 있게 해줍니다. 개발자는 몇 가지 옵션을 선택하여 국제화(i18n), 데이터베이스 통합(SQLite with Drizzle ORM 또는 Supabase)과 같은 기능을 갖춘 프로덕션 준비가 완료된 앱을 생성할 수 있습니다. 이 스킬은 AI 에이전트 플랫폼(Claude Code, Cursor, Codex 등)과 함께 사용하도록 설계되어, 반복적인 보일러플레이트 설정을 없애줍니다.
주요 기능
- Nuxt 3: 최신 Vue.js 프레임워크를 기반으로 한 빠르고 확장 가능한 애플리케이션.
- 선택적 i18n: 다국어 지원을 위한 국제화 설정.
- SQLite (Drizzle): 로컬 개발 및 간단한 배포를 위한 경량 데이터베이스.
- Supabase: 클라우드 기반 백엔드 솔루션(인증, 데이터베이스, 스토리지).
- 3개의 실행 가능한 예제: 다양한 구성을 보여주는 실제 예제.
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 플랫폼
사용 방법
- Claude에게 새 Nuxt 3 앱을 스캐폴딩해 달라고 요청합니다.
- 필요한 옵션을 지정합니다:
- i18n 포함/제외
- 데이터베이스: SQLite (Drizzle) 또는 Supabase
- Claude가 지침을 생성하고 설정을 안내합니다.
- 제공된 예제를 실행하여 스캐폴드가 작동하는지 확인합니다.
예제
예제 1: 기본 Nuxt 3 앱 (i18n 및 데이터베이스 없음)
npx nuxi init my-basic-app
cd my-basic-app
npm install
npm run dev
예제 2: i18n 및 SQLite (Drizzle) 포함
npx nuxi init my-i18n-sqlite-app
cd my-i18n-sqlite-app
npm install nuxt-i18n drizzle-orm better-sqlite3
# 추가 설정 코드는 생성된 파일 참조
예제 3: Supabase 통합
npx nuxi init my-supabase-app
cd my-supabase-app
npm install @supabase/supabase-js
# Supabase 프로젝트 연결 및 환경 변수 설정
환경 변수
| 변수명 | 설명 | 필수 여부 |
|---|---|---|
NUXT_PUBLIC_SUPABASE_URL | Supabase 프로젝트 URL | Supabase 사용 시 필수 |
NUXT_PUBLIC_SUPABASE_ANON_KEY | Supabase 익명 키 | Supabase 사용 시 필수 |
DATABASE_URL | SQLite 데이터베이스 경로 | SQLite 사용 시 선택 사항 (기본값: ./data.db) |
참고 사항
- 모든 예제는
npm run dev로 개발 서버를 실행하여 테스트할 수 있습니다. - Supabase 예제는 유효한 Supabase 프로젝트와 자격 증명이 필요합니다.
- SQLite 예제는 추가 데이터베이스 서버 없이 로컬에서 실행됩니다.