UI 스타일링 스킬

shadcn/ui 컴포넌트, Tailwind CSS 유틸리티 스타일링, 캔버스 기반 비주얼 디자인 시스템을 결합하여 아름답고 접근성 높은 사용자 인터페이스를 제작하기 위한 포괄적인 스킬입니다.

참고 자료

shadcn/ui: https://ui.shadcn.com/llms.txt
Tailwind CSS: https://tailwindcss.com/docs

이 스킬을 사용해야 할 때

다음과 같은 경우에 사용합니다:

React 기반 프레임워크(Next.js, Vite, Remix, Astro)로 UI 구축
접근성 높은 컴포넌트(대화상자, 폼, 테이블, 내비게이션) 구현
유틸리티 중심 CSS 접근 방식으로 스타일링
반응형, 모바일 우선 레이아웃 생성
다크 모드 및 테마 커스터마이징 구현
일관된 디자인 토큰을 사용한 디자인 시스템 구축
비주얼 디자인, 포스터 또는 브랜드 자료 생성
즉각적인 시각적 피드백을 통한 빠른 프로토타이핑
복잡한 UI 패턴(데이터 테이블, 차트, 명령 팔레트) 추가

핵심 스택

컴포넌트 계층: shadcn/ui

Radix UI 프리미티브 기반의 사전 구축된 접근성 높은 컴포넌트
복사-붙여넣기 배포 모델(컴포넌트가 코드베이스 내에 위치)
TypeScript 우선, 완전한 타입 안전성
복잡한 UI를 위한 구성 가능한 프리미티브
CLI 기반 설치 및 관리

스타일링 계층: Tailwind CSS

유틸리티 중심 CSS 프레임워크
빌드 타임 처리, 런타임 오버헤드 제로
모바일 우선 반응형 디자인
일관된 디자인 토큰(색상, 간격, 타이포그래피)
자동 데드 코드 제거

비주얼 디자인 계층: 캔버스

박물관 수준의 비주얼 구성
철학 중심 디자인 접근 방식
정교한 비주얼 커뮤니케이션
최소한의 텍스트, 최대의 시각적 효과
체계적인 패턴과 정제된 미학

스크립트 경로

이 스킬과 references/ 디렉토리의 스크립트 경로는 프로젝트가 아닌 이 SKILL.md가 포함된 디렉토리를 기준으로 합니다. scripts/<file>은 이 스킬 자체의 scripts/ 폴더를 의미하며, ../<skill>/scripts/<file>은 함께 설치된 형제 하위 스킬을 의미합니다. 해당 디렉토리(Claude Code가 스킬을 로드할 때 스킬의 기본 디렉토리로 보고함)에서 전체 경로를 구성하고 작업 디렉토리는 프로젝트 루트로 유지하십시오. 스크립트는 docs/brand-guidelines.md, assets/design-tokens.json 또는 src/와 같은 프로젝트 파일을 상대 경로로 읽고 씁니다.

빠른 시작

컴포넌트 + 스타일링 설정

shadcn/ui와 Tailwind 설치:

npx shadcn@latest init

CLI에서 프레임워크, TypeScript, 경로 및 테마 기본 설정을 묻습니다. shadcn/ui와 Tailwind CSS를 모두 구성합니다.

컴포넌트 추가:

npx shadcn@latest add button card dialog form

유틸리티 스타일링과 함께 컴포넌트 사용:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

대안: Tailwind 전용 설정

Vite 프로젝트:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

컴포넌트 라이브러리 가이드

사용 패턴, 설치 및 구성 예제를 포함한 포괄적인 컴포넌트 카탈로그.

참고: references/shadcn-components.md

포함 내용:

폼 및 입력 컴포넌트 (Button, Input, Select, Checkbox, Date Picker, Form validation)
레이아웃 및 내비게이션 (Card, Tabs, Accordion, Navigation Menu)
오버레이 및 대화상자 (Dialog, Drawer, Popover, Toast, Command)
피드백 및 상태 (Alert, Progress, Skeleton)
표시 컴포넌트 (Table, Data Table, Avatar, Badge)

테마 및 커스터마이징

테마 설정, CSS 변수, 다크 모드 구현 및 컴포넌트 커스터마이징.

참고: references/shadcn-theming.md

포함 내용:

next-themes를 사용한 다크 모드 설정
CSS 변수 시스템
색상 커스터마이징 및 팔레트
컴포넌트 변형 커스터마이징
테마 토글 구현

접근성 패턴

ARIA 패턴, 키보드 내비게이션, 스크린 리더 지원 및 접근성 높은 컴포넌트 사용법.

참고: references/shadcn-accessibility.md

포함 내용:

Radix UI 접근성 기능
키보드 내비게이션 패턴
포커스 관리
스크린 리더 알림
폼 검증 접근성

Tailwind 유틸리티

레이아웃, 간격, 타이포그래피, 색상, 테두리 및 그림자를 위한 핵심 유틸리티 클래스.

참고: references/tailwind-utilities.md

포함 내용:

레이아웃 유틸리티 (Flexbox, Grid, positioning)
간격 시스템 (padding, margin, gap)
타이포그래피 (글꼴 크기, 두께, 정렬, 줄 높이)
색상 및 배경
테두리 및 그림자
사용자 지정 스타일링을 위한 임의 값

반응형 디자인

모바일 우선 중단점, 반응형 유틸리티 및 적응형 레이아웃.

참고: references/tailwind-responsive.md

포함 내용:

모바일 우선 접근 방식
중단점 시스템 (sm, md, lg, xl, 2xl)
반응형 유틸리티 패턴
컨테이너 쿼리
최대 너비 쿼리
사용자 지정 중단점

Tailwind 커스터마이징

설정 파일 구조, 사용자 정의 유틸리티, 플러그인 및 테마 확장.

참고: references/tailwind-customization.md

포함 내용:

사용자 정의 토큰을 위한 @theme 지시문
사용자 정의 색상 및 글꼴
간격 및 중단점 확장
사용자 정의 유틸리티 생성
사용자 정의 변형
레이어 구성 (@layer base, components, utilities)
컴포넌트 추출을 위한 Apply 지시문

비주얼 디자인 시스템

캔버스 기반 디자인 철학, 시각적 커뮤니케이션 원리 및 정교한 구성.

참고: references/canvas-design-system.md

포함 내용:

디자인 철학 접근 방식
텍스트보다 시각적 커뮤니케이션
체계적인 패턴과 구성
색상, 형태 및 공간 디자인
최소한의 텍스트 통합
박물관 수준의 실행
다중 페이지 디자인 시스템

유틸리티 스크립트

컴포넌트 설치 및 설정 생성을 위한 Python 자동화.

shadcn_add.py

종속성 처리를 포함한 shadcn/ui 컴포넌트 추가:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

사용자 정의 테마로 tailwind.config.js 생성:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

생성기는 동일한 디렉토리에 tailwind.config.js, .cjs, .mjs 또는 .ts 파일이 이미 존재하면 설정을 생성하거나 덮어쓰지 않습니다. 먼저 보고된 설정을 검토한 후, 경쟁하는 출력이 의도적인 경우에만 --force를 전달하십시오:

python scripts/tailwind_config_gen.py --colors brand:blue --force

모범 사례

컴포넌트 구성: 단순하고 구성 가능한 프리미티브로 복잡한 UI 구축
유틸리티 중심 스타일링: Tailwind 클래스를 직접 사용하고, 진정한 반복이 있는 경우에만 컴포넌트 추출
모바일 우선 반응형: 모바일 스타일로 시작하여 반응형 변형 계층화
접근성 우선: Radix UI 프리미티브 활용, 포커스 상태 추가, 시맨틱 HTML 사용
디자인 토큰: 일관된 간격 척도, 색상 팔레트, 타이포그래피 시스템 사용
다크 모드 일관성: 모든 테마 요소에 다크 변형 적용
성능: 자동 CSS 퍼징 활용, 동적 클래스 이름 피하기
TypeScript: 더 나은 개발자 경험을 위해 완전한 타입 안전성 사용
시각적 계층 구조: 구성이 주의를 끌도록 하고, 간격과 색상을 의도적으로 사용
전문가 수준의 장인 정신: 모든 세부 사항이 중요 - UI를 장인 정신으로 대우

참고 내비게이션

컴포넌트 라이브러리

references/shadcn-components.md - 완전한 컴포넌트 카탈로그
references/shadcn-theming.md - 테마 및 커스터마이징
references/shadcn-accessibility.md - 접근성 패턴

스타일링 시스템

references/tailwind-utilities.md - 핵심 유틸리티 클래스
references/tailwind-responsive.md - 반응형 디자인
references/tailwind-customization.md - 설정 및 확장

비주얼 디자인

references/canvas-design-system.md - 디자인 철학 및 캔버스 워크플로

자동화

scripts/shadcn_add.py - 컴포넌트 설치
scripts/tailwind_config_gen.py - 설정 생성

일반적인 패턴

검증이 포함된 폼:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

다크 모드를 포함한 반응형 레이아웃:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

리소스

shadcn/ui 문서: https://ui.shadcn.com
Tailwind CSS 문서: https://tailwindcss.com
Radix UI: https://radix-ui.com
Tailwind UI: https://tailwindui.com
Headless UI: https://headlessui.com
v0 (AI UI 생성기): https://v0.dev

즐겨 사용하는 AI에게 물어보기

문서

UI 스타일링 스킬

참고 자료

이 스킬을 사용해야 할 때

핵심 스택

컴포넌트 계층: shadcn/ui

스타일링 계층: Tailwind CSS

비주얼 디자인 계층: 캔버스

스크립트 경로

빠른 시작

컴포넌트 + 스타일링 설정

대안: Tailwind 전용 설정

컴포넌트 라이브러리 가이드

테마 및 커스터마이징

접근성 패턴

Tailwind 유틸리티

반응형 디자인

Tailwind 커스터마이징

비주얼 디자인 시스템

유틸리티 스크립트

shadcn_add.py

tailwind_config_gen.py

모범 사례

참고 내비게이션

일반적인 패턴

리소스

Individual skills in this repo

banner-design

brand

design

design-system

nextlevelbuilder/ui-ux-pro-max

slides

ui-ux-pro-max

관련 스킬

steipete/bluebubbles

steipete/eightctl

steipete/blucli

steipete/bear-notes

steipete/camsnap

steipete/gifgrep