ui-design-system
✓TailwindCSS + Radix + shadcn/ui를 사용한 React UI 구성요소 시스템. 스택: TailwindCSS(스타일링), Radix UI(기본 요소), shadcn/ui(구성 요소), React/Next.js. 기능: 디자인 시스템 아키텍처, 접근 가능한 구성 요소, 반응형 레이아웃, 테마 지정, 다크 모드, 구성 요소 구성. 작업: UI 구성 요소를 검토, 디자인, 구축, 개선, 리팩터링합니다. 키워드: TailwindCSS, Radix UI, shadcn/ui, 디자인 시스템, 구성 요소 라이브러리, 접근성, ARIA, 반응형, 다크 모드, 테마, CSS 변수, 구성 요소 아키텍처, 원자 디자인, 디자인 토큰, 변형, 슬롯, 구성. 사용 시기: 구성 요소 라이브러리 구축, shadcn/ui 구현, 액세스 가능한 UI 생성, 디자인 시스템 설정, 다크 모드/테마 추가, UI 구성 요소 아키텍처 검토.
SKILL.md
Comprehensive UI/UX design, review, and improvement for modern web applications.
Production-ready implementations with TailwindCSS + Radix UI + shadcn/ui and modern React patterns.
Key Principle: Each layer enhances the one below. Start with Tailwind for styling, add Radix for accessible behavior, use shadcn/ui for complete components.
TailwindCSS + Radix + shadcn/ui를 사용한 React UI 구성요소 시스템. 스택: TailwindCSS(스타일링), Radix UI(기본 요소), shadcn/ui(구성 요소), React/Next.js. 기능: 디자인 시스템 아키텍처, 접근 가능한 구성 요소, 반응형 레이아웃, 테마 지정, 다크 모드, 구성 요소 구성. 작업: UI 구성 요소를 검토, 디자인, 구축, 개선, 리팩터링합니다. 키워드: TailwindCSS, Radix UI, shadcn/ui, 디자인 시스템, 구성 요소 라이브러리, 접근성, ARIA, 반응형, 다크 모드, 테마, CSS 변수, 구성 요소 아키텍처, 원자 디자인, 디자인 토큰, 변형, 슬롯, 구성. 사용 시기: 구성 요소 라이브러리 구축, shadcn/ui 구현, 액세스 가능한 UI 생성, 디자인 시스템 설정, 다크 모드/테마 추가, UI 구성 요소 아키텍처 검토. 출처: samhvw8/dot-claude.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
ui-design-system이란?
TailwindCSS + Radix + shadcn/ui를 사용한 React UI 구성요소 시스템. 스택: TailwindCSS(스타일링), Radix UI(기본 요소), shadcn/ui(구성 요소), React/Next.js. 기능: 디자인 시스템 아키텍처, 접근 가능한 구성 요소, 반응형 레이아웃, 테마 지정, 다크 모드, 구성 요소 구성. 작업: UI 구성 요소를 검토, 디자인, 구축, 개선, 리팩터링합니다. 키워드: TailwindCSS, Radix UI, shadcn/ui, 디자인 시스템, 구성 요소 라이브러리, 접근성, ARIA, 반응형, 다크 모드, 테마, CSS 변수, 구성 요소 아키텍처, 원자 디자인, 디자인 토큰, 변형, 슬롯, 구성. 사용 시기: 구성 요소 라이브러리 구축, shadcn/ui 구현, 액세스 가능한 UI 생성, 디자인 시스템 설정, 다크 모드/테마 추가, UI 구성 요소 아키텍처 검토. 출처: samhvw8/dot-claude.
ui-design-system 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/samhvw8/dot-claude
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-01