From bear2u-my-skills
Initializes Next.js 15 App Router projects interactively for Todo, Blog, Dashboard, E-commerce, or custom domains using ShadCN, Zustand, TanStack Query, Tailwind, TypeScript, and stack presets.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin bear2u-my-skillsThis skill uses the workspace's default tool permissions.
도메인 기반 Next.js 15 프로젝트를 생성하고 현대적인 스택으로 자동 설정합니다.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
도메인 기반 Next.js 15 프로젝트를 생성하고 현대적인 스택으로 자동 설정합니다. Todo, Blog, Dashboard, E-commerce 또는 Custom 도메인을 선택하여 App Router 기반의 완전한 CRUD 앱을 즉시 생성할 수 있습니다.
스킬 실행 시 다음 정보를 입력받습니다:
그 후 자동으로 다음 단계가 실행됩니다:
# 1. Next.js 15 프로젝트 생성 (App Router, TypeScript, Tailwind)
npx create-next-app@latest [폴더명] --typescript --tailwind --app --use-npm
# 2. 패키지 설치
npm install
# 3. 도메인별 App Router 구조 자동 생성
# - app/[domain]/ (페이지)
# - components/[domain]/ (컴포넌트)
# - lib/stores/[domain].ts (Zustand 스토어)
# - lib/api/[domain].ts (API 로직)
# - lib/validations/[domain].ts (Zod 스키마)
# 4. 코드 품질 검증 (필수)
npm run lint
# 5. 개발 서버 실행
npm run dev
IMPORTANT: 이 스킬은 대화형으로 진행됩니다.
먼저 사용자에게 이렇게 물어보세요:
"Next.js 15 앱을 생성합니다. 다음 정보를 알려주세요:
1. 도메인(엔티티) 선택
어떤 도메인의 앱을 만드시겠습니까?
A) Todo (할 일 관리)
B) Blog (블로그/CMS)
C) Dashboard (대시보드/어드민)
D) E-commerce (쇼핑몰)
E) Custom (직접 정의)
2. 프로젝트 정보
3. 스택 프리셋 선택
다음 중 하나를 선택해주세요:
A) Essential (권장)
B) Minimal (가장 단순)
C) Full Stack (모든 기능)
D) Custom (직접 선택)
어떤 도메인과 프리셋을 선택하시겠습니까? (도메인: A/B/C/D/E, 프리셋: A/B/C/D)"
다음 질문들을 순차적으로 하세요:
Next.js 15 프로젝트 생성:
npx create-next-app@latest [폴더명] --typescript --tailwind --app --use-npmname 필드를 수정선택된 패키지 설치: npm install [패키지들]
폴더 구조 생성: App Router 기반 구조
app/
├── (auth)/
├── [domain]/
├── api/[domain]/
├── layout.tsx
└── page.tsx
components/
├── ui/ (ShadCN)
├── [domain]/
└── layouts/
lib/
├── db/ (Prisma)
├── stores/ (Zustand)
├── api/
├── utils/
└── validations/ (Zod)
도메인별 보일러플레이트 생성:
A) Todo: title, description, completed, createdAt, updatedAt
B) Blog: title, content, excerpt, slug, published, createdAt, updatedAt
C) Dashboard: 통계, 차트, 사용자 관리
D) E-commerce: name, price, description, images, stock, category
E) Custom: 사용자 정의 필드
ShadCN 설치 및 구성 (Essential 이상):
npx shadcn@latest init
npx shadcn@latest add button card input form table
코드 검증 및 오류 수정:
a. npm run lint 실행
b. 발견된 오류 수정:
c. npm run build 또는 pnpm build 실행
d. 빌드 오류 수정:
e. 재검증: lint와 build 모두 성공할 때까지 반복
f. 목표:
npm run lint 결과가 "0 errors"npm run build 또는 pnpm build 성공✅ CRITICAL: 이 단계는 필수입니다. lint와 build 모두 성공해야 다음 단계로 진행할 수 있습니다.
✅ CRITICAL: 이 단계는 프로젝트 완료의 필수 조건입니다. lint와 build 모두 성공해야 합니다.
ESLint 검증:
npm run lint
✅ 성공 예시:
✔ No ESLint warnings or errors
❌ 실패 예시 (error가 있으면 반드시 수정):
Error: 'useState' is defined but never used
Error: Missing return type on function
프로덕션 빌드 검증:
npm run build
또는 pnpm 사용 시:
pnpm build
✅ 성공 예시:
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages
❌ 실패 예시 (빌드 에러 발생 시 반드시 수정):
Type error: Property 'xyz' does not exist on type 'ABC'
Error: Module not found: Can't resolve '@/...'
중요: 빌드가 실패하면 TypeScript 타입 오류나 import 경로 문제를 수정하고 다시 빌드해야 합니다.
검증 결과 요약 (lint와 build 모두 성공 시):
✅ Next.js 15 프로젝트 생성 완료!
✅ 패키지 설치 완료 (ShadCN, Zustand, Tanstack Query 등)
✅ ESLint 검증 통과 (0 errors)
✅ TypeScript 빌드 성공
✅ 프로덕션 빌드 완료
프로젝트 정보 제공:
실행 방법 안내:
cd [폴더명]
npm run dev
# http://localhost:3000 에서 확인
다음 단계 제안 (선택사항, 도메인별):
references/setup-guide.md - 완전한 가이드
npm run lint 통과 필수