Tailwind CSS

design-system 스킬을 사용해 UI 시스템을 생성하거나 감수하고, 기존 코드에서 토큰을 추출하며, 실제 저장소에서 스타일 일관성을 검토하세요.

shadcn 스킬을 사용해 프로젝트 컨텍스트를 점검하고, 적절한 CLI 명령을 실행하며, 컴포넌트를 설치하고, base vs radix, 폼, 테마, 레지스트리에 대한 문서화된 패턴으로 UI를 구성할 수 있습니다.

frontend-design은 막연한 UI 아이디어를 실제 프론트엔드 코드와 뚜렷한 미적 방향성으로 구현해, 생산 단계에 바로 쓸 수 있는 개성 있는 인터페이스를 만들고 흔한 AI 스타일링을 줄여줍니다.

artifacts-builder는 복잡한 Claude HTML artifact를 React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui 프로젝트로 만든 뒤 단일 bundle.html로 묶을 수 있게 도와줍니다. 상태 관리, 재사용 가능한 컴포넌트, 완성도 있는 앱 흐름이 필요한 Frontend Development artifact에 특히 적합합니다.

ckm:ui-styling은 shadcn/ui, Tailwind CSS, 캔버스 기반 비주얼 디자인을 활용해 접근성 높고 실전용 UI를 손쉽게 구현할 수 있도록 돕습니다. React 프로젝트에서 구조화된 반응형 레이아웃, 접근성 컴포넌트, 다크 모드, 일관된 디자인 시스템이 필요할 때 적합합니다. UI 디자인, 테마 적용, 빠른 프로토타이핑에 실용적이고 스택별 맞춤 가이드를 제공합니다.

ckm:design-system은 명확한 토큰 아키텍처를 바탕으로 3계층 토큰, 컴포넌트 스펙, CSS variables, Tailwind mappings, 브랜드 일관 슬라이드 에셋을 생성하도록 도와줍니다.

tailwind-design-system 스킬을 사용하면 Tailwind CSS v4 디자인 시스템을 토큰, 테마, variants, 접근성, v3에서 v4로의 마이그레이션 가이드와 함께 구축할 수 있습니다.

design-taste-frontend-v1은 고자율 프론트엔드 작업을 위한 원조 taste 스킬로, 정확한 하위 호환성을 위해 보존된 버전입니다. React/Next.js 중심의 UI 코드를 더 분명한 감각의 판단, 의존성 확인, 실무적인 가드레일과 함께 생성하는 데 도움이 됩니다. v2 실험적 재작성본 대신 이전 동작이 필요할 때 이 design-taste-frontend-v1 스킬을 사용하세요.

figma를 사용해 Figma MCP 서버에서 디자인 컨텍스트, 스크린샷, 변수, 에셋을 가져온 뒤, Figma 노드를 구현에 바로 쓸 수 있는 UI 결정으로 변환하세요. 이 figma 스킬은 Figma URL이나 노드 ID가 있고, 디자인-코드 작업, 설정, 문제 해결에 맞는 정확한 figma 사용법이 필요할 때 적합합니다.

frontend-dev는 세련되고 프로덕션에 바로 올릴 수 있는 웹 페이지를 만드는 프론트엔드 개발 스킬입니다. 프리미엄 UI, 시네마틱 모션, AI 생성 미디어, 설득력 있는 카피, 생성형 아트까지 함께 다뤄 랜딩 페이지, 마케팅 사이트, 제품 페이지, 대시보드 등 디자인·콘텐츠·구현 디테일이 서로 어긋나면 안 되는 프론트엔드 작업에 적합합니다.

frontend-ui-dark-ts는 TypeScript, Tailwind CSS, Framer Motion, 재사용 가능한 디자인 토큰을 활용해 다크 테마 React UI를 구축하는 데 도움이 됩니다. 대시보드, 관리자 패널, 분석 화면처럼 데이터가 많은 인터페이스에 적합하며, 세련된 다크 톤과 일관된 컴포넌트 패턴이 필요한 경우에 잘 맞습니다.

expo-tailwind-setup은 Expo에서 react-native-css와 NativeWind v5를 함께 사용해 iOS, Android, 웹 환경에 Tailwind CSS v4를 설치하고 구성하는 실전 가이드입니다.

ui-web은 WCAG 2.1 AA 점검, 높은 대비, 잘 보이는 컨트롤, 다크 모드에 친화적인 Tailwind 패턴을 바탕으로 웹 UI 컴포넌트의 디자인과 스타일링을 도와줍니다. React 스타일 프런트엔드에서 실용적인 UI 디자인 가이드가 필요하고, 접근성을 높이면서 시행착오를 줄이고 싶을 때 이 ui-web 스킬을 사용하세요.

redesign-existing-projects 기능은 기존 웹사이트와 앱을 프리미엄 수준으로 업그레이드합니다. 현재 디자인을 점검하고, 흔한 AI 패턴을 찾아내며, 기능은 해치지 않으면서 고급스러운 디자인 구현을 적용합니다. 어떤 CSS 프레임워크든 순수 CSS든 모두 사용할 수 있습니다.

baseline-ui는 간격, 타이포그래피, 접근성, 모션에 대한 의견이 반영된 기준선에 맞춰 Tailwind 기반 UI를 검토하거나 생성하는 데 도움을 줍니다. 더 안전한 컴포넌트 결과물, 더 명확한 UI 디자인 의사결정, 그리고 기존 프리미티브와의 불필요한 이탈을 줄이고 싶을 때 baseline-ui 스킬을 사용하세요. 특히 React/Tailwind 워크플로와 실용적인 baseline-ui 가이드 점검에 잘 맞습니다.

shadcn-ui 스킬은 실제 앱에서 shadcn/ui 컴포넌트를 계획, 설치, 적용하는 데 도움을 줍니다. 이 shadcn-ui 가이드를 Design Implementation, 컴포넌트 탐색, 커스터마이징, 그리고 폼·테이블·인증 플로우·레이아웃 전반의 실전 shadcn-ui 활용에 사용하세요.

web-artifacts-builder는 React, Tailwind CSS, shadcn/ui 프로젝트를 초기화한 뒤 일반적으로 개발하고, 최종적으로 단일 `bundle.html` 아티팩트로 묶을 수 있게 도와줍니다. 간단한 단일 파일 데모보다는 상태 관리, 라우팅, 풍부한 UI가 필요한 복잡한 프런트엔드 아티팩트에 더 적합합니다.