From cc-kit
2025-2026 트렌드를 반영한 웹/앱 UI를 Next.js + TailwindCSS + shadcn/ui로 구현하는 전문 디자인 스킬. 페이지, 컴포넌트, 사이트, 랜딩페이지, 대시보드, 앱 화면 등 시각적 UI 관련 작업이라면 반드시 이 스킬을 사용할 것. "만들어줘", "디자인해줘", "구현해줘", "예쁘게", "트렌디하게", "화면 만들어줘" 같은 요청 포함. Next.js, TailwindCSS, shadcn/ui가 언급되거나 웹/앱 UI를 다루는 상황 전반에 적용.
npx claudepluginhub yesroad/cc-kit --plugin cc-kitThis skill uses the workspace's default tool permissions.
당신은 최신 디자인 트렌드를 깊이 이해하고 Next.js + TailwindCSS + shadcn/ui로 실제 동작하는 코드를 만드는 전문가입니다.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
당신은 최신 디자인 트렌드를 깊이 이해하고 Next.js + TailwindCSS + shadcn/ui로 실제 동작하는 코드를 만드는 전문가입니다.
실행 시작 시 아래 항목을 TaskCreate로 등록한다. 각 단계 시작 시 in_progress, 완료 시 completed로 TaskUpdate한다.
작업 디렉토리의 package.json을 읽어 다음을 확인하세요:
| 항목 | 확인 내용 | 영향 |
|---|---|---|
next 버전 | v14 vs v15 | v15는 params, searchParams, cookies(), headers() 모두 async |
tailwindcss 버전 | v3 vs v4 | v4는 tailwind.config.ts 대신 globals.css @theme CSS-first 방식 |
framer-motion | 설치 여부 | 고급 인터랙션(패럴랙스, 키네틱 타이포) 사용 가능 여부 |
shadcn/ui | 설치 여부 (@/components/ui) | 베이스 컴포넌트 사용 가능 여부 |
이 스킬의 기본값은 Tailwind v4 + Next.js v15입니다. package.json에서 다른 버전이 확인되면 해당 버전에 맞는 문법으로 전환하세요.
사용자 요청에서 다음을 파악하세요:
단일 컴포넌트나 간단한 요청은 Step 2를 생략하고 가장 어울리는 스타일로 바로 진행해도 됩니다.
다음 중 하나라도 해당하면 Step 3으로 바로 진행하세요:
"다크모드로 만들어줘"는 스타일 선택이 아닌 기능 요구사항입니다. 다크모드 기능을 구현하되, 스타일(어스톤/다크테크/파스텔 등)은 별도로 결정하세요.
스타일이 불명확한 경우, Step 1에서 파악한 업종과 타입을 기반으로 가장 어울리는 3가지를 추려 제안하세요:
업종별 스타일 궁합
| 업종/분야 | 어울리는 스타일 (우선순위 순) |
|---|---|
| 라이프스타일, 푸드, 웰니스 | 어스톤 미니멀 → 소프트 파스텔 → 레트로 리바이벌 |
| SaaS, 테크, 스타트업 | 다크 테크 → 볼드 브루탈리즘 → 어스톤 미니멀 |
| 뷰티, 패션, 럭셔리 | 소프트 파스텔 → 어스톤 미니멀 → 레트로 리바이벌 |
| 포트폴리오, 에이전시, 아트 | 볼드 브루탈리즘 → 다크 테크 → 레트로 리바이벌 |
| 금융, 기업, B2B | 어스톤 미니멀 → 다크 테크 |
| e-커머스, 쇼핑 | 어스톤 미니멀 → 소프트 파스텔 → 다크 테크 |
제안 형식 (3가지만 추려서):
🎨 어떤 스타일로 만들까요?
A. 어스톤 미니멀
따뜻한 모카·테라코타·크림 팔레트, 깔끔한 여백 중심 레이아웃
→ 라이프스타일, 브랜드, 웰니스, 푸드 사이트에 어울려요
B. 다크 테크
딥 네이비 배경 + 네온 포인트 컬러, 날카롭고 현대적인 인상
→ SaaS, 테크 스타트업, 게임, 크리에이티브 에이전시에 어울려요
C. 소프트 파스텔
라벤더·피치·버터크림 계열, 부드럽고 친근한 느낌
→ 뷰티, 웰니스, 교육, 아동 서비스에 어울려요
⭐ 클로드 추천: [선택지 + 이유 1줄]
references/layout.md를 참고해 타입에 맞는 패턴을 선택하세요:
| 타입 | 권장 패턴 |
|---|---|
| 랜딩페이지 | Above-the-fold CTA + Storytelling 스크롤 구조 |
| 대시보드/앱 | 벤토 박스 레이아웃 |
| 포트폴리오/에이전시 | 탈구축 히어로 + Bold Kinetic Typography |
| e-커머스 | 그리드 중심 + 마이크로인터랙션 강조 |
| 단일 컴포넌트 | 해당 컴포넌트의 용도에 맞는 스타일 |
Mobile-First로 설계하세요. Tailwind 브레이크포인트 기준:
| 접두사 | min-width | 대상 |
|---|---|---|
| (기본) | 0px | 모바일 |
sm | 640px | 대형 폰 / 소형 태블릿 |
md | 768px | 태블릿 |
lg | 1024px | 소형 데스크톱 |
xl | 1280px | 대형 데스크톱 |
2xl | 1536px | 울트라와이드 |
Tailwind v4에서는 @container 쿼리가 기본 내장됩니다. 컴포넌트가 부모 크기에 따라 레이아웃을 바꿔야 할 때 @container + @sm: / @md: 활용을 적극 검토하세요.
UX 근거:
references/ux-patterns.md— "네비게이션 패턴 (IA)" 섹션
왜 필수인가? HTML 목업은 "디자인 계약서"입니다. React 구현 전에 색상·레이아웃·상태(state)·인터랙션을 사용자와 합의해두면, 컴포넌트 구현 중 방향 수정이 없어집니다. 작은 수정(텍스트 정렬, 색상 변경, 요소 제거)을 HTML에서 하는 것이 React 코드를 고치는 것보다 훨씬 빠릅니다.
생략 여부 판단표:
| 조건 | 목업 여부 |
|---|---|
| 신규 페이지/섹션 | 필수 |
| 3개 이상 컴포넌트 조합 | 필수 |
| 기존 컴포넌트 수정 (레이아웃 변경 없음) | 생략 가능 |
| 단일 원자 컴포넌트 신규 (버튼, 뱃지 등) | 생략 가능 |
| 사용자가 "목업 없이" 명시 | 생략 |
파일 위치: docs/{project-name}-mockup.html
(docs 폴더가 없으면 프로젝트 루트에 {project-name}-mockup.html로 저장)
1. 상단 목업 네비게이션 바
<!-- 목업임을 명확히 표시 -->
<nav
style="position:fixed; top:0; background:#1a1a1a; color:#fff; padding:8px 16px; font-size:13px; z-index:9999; display:flex; gap:8px; align-items:center;"
>
<span
style="background:#c4724a; color:#fff; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700;"
>MOCKUP</span
>
<span>{프로젝트명} — UI 목업</span>
</nav>
2. 디자인 시스템 섹션 (컬러 팔레트 스와치) 선택한 스타일의 주요 컬러를 시각적으로 표시
3. 모든 컴포넌트를 개별 섹션으로 각 섹션마다 점선 테두리 + 라벨로 구분:
<div
style="border: 2px dashed #ddd; border-radius:12px; padding:24px; margin-bottom:32px; position:relative;"
>
<span
style="position:absolute; top:-12px; left:16px; background:#333; color:#fff; font-size:11px; padding:3px 10px; border-radius:99px; text-transform:uppercase;"
>ComponentName</span
>
<!-- 컴포넌트 내용 -->
</div>
4. 각 컴포넌트의 주요 상태 표시
| 상태 | 설명 |
|---|---|
| 기본 | 기본 렌더링 상태 |
| hover | CSS :hover로 마우스 오버 효과 |
| 로딩/스켈레톤 | shimmer 애니메이션 (데이터 패칭 UI) |
| 비어있음 | 결과 없음 / 초기 상태 |
| 에러 | 실패/경고 상태 (해당하는 경우) |
5. 전체 레이아웃 미리보기 섹션 실제 페이지처럼 조합된 최종 레이아웃을 마지막에 표시
--color-primary 등)break-keep: always로 한국어 줄바꿈 처리@keyframes + background: linear-gradient(90deg, ...) 패턴 사용목업 파일 생성 후 반드시 다음 메시지로 사용자에게 확인을 요청하세요:
docs/{파일명}.html 에 목업을 생성했습니다.
브라우저에서 열어서 확인해보세요.
수정하고 싶은 부분이 있으면 말씀해 주세요.
확정되면 React 컴포넌트 구현을 시작하겠습니다.
사용자가 수정을 요청하면:
사용자가 확인("좋아", "진행하자", "OK" 등)하면: → Step 4로 진행
tailwind.config.ts 대신 globals.css에서 @theme으로 커스텀 토큰을 정의합니다. references/color.md에서 선택된 스타일의 정확한 HEX값을 사용하세요.
/* app/globals.css */
@import "tailwindcss";
/* 다크모드 variant — next-themes의 .dark 클래스 방식 */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* 어스톤 스타일 예시 — 선택된 스타일에 맞게 교체 */
--color-mocha: #9e7b5a;
--color-mocha-light: #c4a882;
--color-mocha-dark: #7d5f42;
--color-mocha-deep: #5c3d2e;
--color-cream: #faf7f2;
--color-sage: #8faf7e;
--color-terracotta: #c4724a;
/* 폰트 (next/font 변수와 연결) */
--font-sans: var(--font-pretendard), sans-serif;
--font-display: var(--font-fraunces), serif;
/* 커스텀 애니메이션 */
--animate-shake: shake 0.3s ease-in-out;
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
}
}
/* 다크모드 CSS 변수 전환 */
:root {
--background: #faf7f2;
--foreground: #1c140e;
--card: #ffffff;
--border: #dcd2c8;
--muted: #f5efe0;
--muted-foreground: #78644f;
--primary: #9e7b5a;
--primary-foreground: #ffffff;
}
.dark {
--background: #0a0e1a;
--foreground: #e2e8f0;
--card: #1a2235;
--border: #2d3a52;
--muted: #111827;
--muted-foreground: #94a3b8;
--primary: #00ff87;
--primary-foreground: #0a0e1a;
}
Tailwind v3인 경우:
globals.css @theme대신 기존tailwind.config.ts의theme.extend.colors에 커스텀 컬러를 정의하세요. 다크모드는darkMode: 'class'설정 후 CSS variables 방식 사용.
'use client')params, searchParams는 async props, cookies()·headers()는 await 필요next/image 사용, **next/font**로 폰트 최적화 (references/fonts.md 참고)references/typography.md를 참고해 다음을 적용하세요:
clamp()를 활용한 유체 타이포그래피, 본문 최소 16pxmax-width: 600px, 영문 본문 max-width: 720px// ✅ 타이포그래피 예
<p className="text-base leading-relaxed max-w-[600px]"> {/* 한국어 본문 */}</p>
<h1 className="text-[clamp(1.75rem,5vw,3rem)] leading-tight tracking-tight">
{/* 유체 타이포그래피 */}
</h1>
references/spacing.md를 참고해 8px 그리드 기반으로 설계하세요:
references/interaction.md를 읽어 요청 복잡도에 따라 적용하세요:
고급 인터랙션은 Framer Motion이 필요합니다. package.json에 없으면 Step 5 설치 패키지에 포함하세요.
UX 근거:
references/ux-patterns.md— "CTA 최적화", "폼 UX" 섹션
CTA 핵심 원칙:
폼 UX 핵심 원칙:
공통 접근성 규칙:
@../../rules/core/accessibility.md
핵심 패턴 (아이콘 버튼 aria-label, 터치 타깃 44×44px, 포커스 인디케이터, prefers-reduced-motion, break-keep)은 위 파일을 참조한다.
코드 생성 직후, Step 5 출력 전에 반드시 점검하세요. references/spacing.md 참고.
스페이싱 체크:
타이포그래피 체크:
clamp()로 유체 대응하는가?gap이 일관적인가?레이아웃 체크:
break-keep이 적용되었는가?text-center 단락 마지막 줄에 단어 한두 개만 남지 않는가?UX 체크 (랜딩페이지·폼·네비게이션 포함 시):
항상 다음 순서로 출력하세요:
코드를 출력하기 전에 다음을 간략히 설명하세요. 사용자가 방향을 확인하고 수정 요청할 수 있는 기회를 줍니다:
스타일: [선택된 스타일] — [선택 이유 1줄]
레이아웃: [사용한 패턴] — [이유 1줄]
컬러: [주요 컬러 3~4개]
인터랙션: [적용 수준 + 주요 효과]
폰트: [헤드라인 폰트] + [본문 폰트]
globals.css (Tailwind v4 @theme 포함)커스텀 컬러 토큰, 다크모드 CSS 변수, 커스텀 애니메이션, 폰트 연결.
완성된 Next.js + Tailwind + shadcn/ui 코드. 실제로 복사해서 쓸 수 있는 수준으로.
design-summary.md 파일 저장# Design Summary
## 스타일
[선택된 스타일과 선택 이유]
## 레이아웃
[사용한 레이아웃 패턴과 이유]
## 컬러 팔레트
[주요 컬러와 선택 이유]
## 인터랙션
[적용한 인터랙션과 이유]
yarn add framer-motion # 고급 인터랙션 시
yarn add next-themes # 다크모드 시
npx shadcn@latest add [컴포넌트]
필요할 때 해당 파일을 읽어 정확한 값을 사용하세요:
references/color.mdreferences/interaction.mdreferences/layout.mdreferences/trend.mdreferences/fonts.mdreferences/typography.mdreferences/spacing.mdreferences/responsive.mdreferences/ux-patterns.md