Tailwind CSS v4와 shadcn/ui, Vite, React를 위한 프로덕션 테스트 완료된 설정입니다. 다음 상황에서 사용하세요: Tailwind v4로 React 프로젝트 초기화, shadcn/ui 설정, 다크 모드 구현, CSS 변수 문제 디버깅, 테마 전환 수정, Tailwind v3에서 마이그레이션, 또는 색상/테마 문제 발생 시. 다음 내용을 다룹니다: @theme inline 패턴, CSS 변수 아키텍처, ThemeProvider를 사용한 다크 모드, 컴포넌트 조합, vite.config 설정, 일반적인 v4 문제점, 프로덕션 테스트 완료된 패턴.
이 스킬은 Tailwind CSS v4와 shadcn/ui, Vite, React를 결합한 프로젝트 설정을 위한 전문 가이드입니다. Tailwind v3에서 v4로 마이그레이션하거나 처음부터 프로젝트를 초기화할 때 발생할 수 있는 다양한 문제점을 해결하는 데 중점을 둡니다. 특히 @theme inline 패턴, CSS 변수 아키텍처, ThemeProvider를 이용한 다크 모드 구현, 컴포넌트 조합, vite.config 설정 등 프로덕션 환경에서 검증된 패턴을 제공합니다. 또한 Tailwind v4의 일반적인 문제점(gotchas)과 해결 방법을 상세히 다루어, 개발자가 안정적이고 일관된 스타일링 시스템을 구축할 수 있도록 지원합니다. Vite와 React를 기반으로 한 최신 프론트엔드 개발 환경에서 shadcn/ui 컴포넌트 라이브러리를 원활하게 통합하고자 하는 개발자에게 특히 유용합니다.
npx skills add https://github.com/secondsky/claude-skills/tree/main/skills/tailwind-v4-shadcn| Tailwind CSS v4와 shadcn/ui, Vite, React를 위한 프로덕션 테스트 완료된 설정입니다. 다음 상황에서 사용하세요: Tailwind v4로 React 프로젝트 초기화, shadcn/ui 설정, 다크 모드 구현, CSS 변수 문제 디버깅, 테마 전환 수정, Tailwind v3에서 마이그레이션, 또는 색상/테마 문제 발생 시. 다음 내용을 다룹니다: @theme inline 패턴, CSS 변수 아키텍처, ThemeProvider를 사용한 다크 모드, 컴포넌트 조합, vite.config 설정, 일반적인 v4 문제점, 프로덕션 테스트 완료된 패턴.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".