styling-with-shadcn
shadcn/ui Next.js 인터페이스 구축
팀은 일반적인 UI 패턴을 매번 다시 만들지 않고도 일관되고 접근성 높은 React 인터페이스가 필요합니다. 이 스킬은 Next.js 프로젝트를 위한 shadcn/ui 설정 가이드, 컴포넌트 레시피, 검증 패턴, 테마 예제를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
Agent용 리소스
AI Agent, 크롤러 또는 스크립트가 전체 페이지 대신 깔끔한 컨텍스트가 필요할 때 이 링크를 사용하세요.
테스트해 보기
"styling-with-shadcn" 사용 중입니다. 제목, 설명, 우선순위, 제출 동작이 있는 작업 폼을 만들어 달라는 요청.
예상 결과:
검증 규칙, 필드 레이아웃, 비활성화된 제출 상태, 오류 처리 가이드를 포함한 shadcn/ui 폼의 간결한 구현 계획.
"styling-with-shadcn" 사용 중입니다. 대시보드 사이드바와 정렬 가능한 작업 테이블을 추가해 달라는 요청.
예상 결과:
사이드바 탐색, 테이블 열, 페이지네이션 컨트롤, 상태 배지, 편집 또는 삭제 작업을 다루는 컴포넌트 분석.
"styling-with-shadcn" 사용 중입니다. dark mode와 사용자 지정 비주얼 테마를 추가해 달라는 요청.
예상 결과:
Tailwind 변수, 글꼴 선택, 상태 색상, 버튼 변형, reduced-motion 고려 사항이 포함된 테마 체크리스트.
보안 감사
중간 위험Static analysis reported many high-risk patterns, but review found the weak-crypto and Ruby backtick alerts are false positives from markdown code fences, color tokens, and UI examples. The skill does contain legitimate package installation commands and one Google Fonts import, so publication is reasonable with a supply-chain and external-network warning. No prompt-injection text, credential exfiltration, destructive command, or malicious intent was found.
중간 위험 문제 (1)
낮은 위험 문제 (2)
위험 요인
감지된 패턴
품질 점수
만들 수 있는 것
제품 폼 구축
shadcn/ui 필드와 Zod 규칙으로 검증되는 작업, 프로필 또는 설정 폼을 만듭니다.
대시보드 컴포넌트 표준화
Next.js 대시보드 전반에 일관된 카드, 테이블, 사이드바, 다이얼로그, 배지, 토스트 패턴을 적용합니다.
테마가 적용된 인터페이스 시스템 만들기
브랜드 애플리케이션에 맞게 Tailwind 변수, 타이포그래피, 상태 색상, dark mode 동작을 조정합니다.
이 프롬프트를 사용해 보세요
이 스킬을 사용하여 내 Next.js 페이지에 shadcn/ui 버튼, 카드, 폼 입력을 추가하세요. 결과는 접근성이 높고 단순하게 유지하세요.
이 스킬을 사용하여 다음 필드에 대해 react-hook-form 및 Zod validation을 포함한 shadcn/ui 폼을 만드세요: [list fields]. 로딩 및 오류 상태를 포함하세요.
이 스킬을 사용하여 사이드바, 데이터 테이블, 작업 메뉴, 상태 배지, 파괴적 작업을 위한 확인 다이얼로그가 있는 대시보드 레이아웃을 구축하세요.
이 스킬을 사용하여 TaskFlow 테마 패턴을 내 Next.js 앱에 맞게 조정하세요. dark mode 변수, 타이포그래피, 배지 변형, 반응형 대시보드 섹션을 정의하세요.
모범 사례
- 현재 워크플로에 필요한 shadcn/ui 컴포넌트만 설치하세요.
- 검증 스키마를 폼 가까이에 두고 가능한 경우 공유 타입을 재사용하세요.
- 생성된 컴포넌트 코드를 접근성, 키보드 동작, 반응형 레이아웃 관점에서 검토하세요.
피하기
- 사용하지 않는 컴포넌트를 제거하지 않은 채 모든 예제를 애플리케이션에 붙여넣지 마세요.
- 패키지 이름과 버전을 검토하지 않고 패키지 설치 명령을 실행하지 마세요.
- 포커스 상태나 시맨틱 구조를 약화시키는 방식으로 shadcn/ui 기본값을 재정의하지 마세요.