AI 스킬

AI 스킬 (AI Skills)

Claude Code가 Chakra UI v3 프로젝트를 빌드·마이그레이션·리팩터링할 때 사용하는 재사용 가능한 스킬이에요. 프로젝트에 대한 깊은 지식을 Claude에게 제공하며, 질문 내용에 따라 자동으로 활성화되므로 이름을 직접 지정할 필요가 없습니다.

출처: 문서

본문

Claude Code AI 스킬은 Claude에게 깊고 프로젝트 특화된 지식을 주는 재사용 가능한 명령 세트예요. 아래 세 가지 스킬은 Chakra UI v3 전용으로 만들어졌습니다. 여러분이 무엇을 요청하느냐에 따라 자동으로 활성화되므로, 직접 이름을 명시할 필요가 없어요.

설치 (Installation)

세 가지 스킬을 한 번에 설치하거나, 필요한 것만 골라 설치할 수 있어요.

# 모든 스킬 설치
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills

# 특정 스킬 설치
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-migrate
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-refactor

Claude Code는 프로젝트에 설치된 스킬을 자동으로 발견해요. 별도의 설정이나 등록이 필요 없습니다.

chakra-ui-builder

핵심 스킬이에요. UI 컴포넌트 빌드, 새 프로젝트와 기존 프로젝트에 Chakra UI 설정, 테마, 차트를 다룹니다.

언제 활성화되나요? (When it activates)

builder 스킬은 Chakra UI로 무언가를 빌드하거나 만들라고 요청할 때마다 활성화돼요. 어떤 편한 표현으로 물어봐도 됩니다:

  • "make me a login form"
  • "build a stats dashboard"
  • "add Chakra to my Next.js app"
  • "add my brand colors"
  • "make a reusable card style"
  • "show me a line chart"
  • "build a sidebar"

무엇을 하나요? (What it does)

컴포넌트 빌드: 올바른 import, Chakra 원시 컴포넌트(Stack, Field.Root, SimpleGrid 등)의 올바른 사용, 자동 다크 모드를 위한 시맨틱 토큰, 그리고 최소한 base와 md 브레이크포인트에서의 반응형 스타일을 갖춘 완전하고 실행 가능한 컴포넌트를 생성해요.

프로젝트 설정: @chakra-ui/react 설치, 스니펫 생성을 위한 CLI 실행, 선택한 프레임워크(Next.js App Router, Pages Router, Vite, Remix)에 <Provider> 연결 과정을 안내해요.

테마: 브랜드 색상, 디자인 토큰, 시맨틱 토큰, 컴포넌트 레시피, 슬롯 레시피, typegen에 대해 응답하기 전에 전용 테마 참조 문서를 읽어요. 전체 defineConfig / createSystem API를 완전한 예시와 함께 다룹니다.

차트: 막대 차트, 영역 차트, 꺾은선 차트, 파이/도넛 차트, BarList, BarSegment에 대해 useChart 훅, 모든 차트 유형, Recharts 통합, 실행 가능한 예시를 다루는 차트 참조 문서를 읽어요.

컴포넌트 선택: 컴포넌트를 지정하지 않았거나 선택이 명확하지 않을 때, 이 스킬은 약 114개의 Chakra 컴포넌트를 1:1 비교(예: Select vs Combobox vs NativeSelect, Dialog vs Drawer, Tooltip vs HoverCard vs Popover)하며 다루는 결정 트리를 참조해요.

출력 형식 (Output format)

모든 응답에는 다음이 포함돼요:

  1. 플레이스홀더 없는 완전하고 실행 가능한 코드
  2. 올바른 import 문(Chakra import 먼저 그룹화, 그다음 로컬 import)
  3. base와 md 브레이크포인트에서의 반응형 스타일
  4. 핵심 레이아웃, 접근성, 반응형 결정을 다루는 간단한 설명(2~4문장). 사소한 요청에는 생략되기도 해요.

chakra-ui-migrate

Chakra UI v2에서 v3로의 마이그레이션을 안내해요. 패키지 변경, 자동 codemod, provider 설정, 컬러 모드, prop 이름 변경, 컴파운드 컴포넌트 재작성을 다룹니다.

언제 활성화되나요? (When it activates)

  • "migrate my project to Chakra v3"
  • "isDisabled isn't working after upgrading"
  • "update my extendTheme config"
  • "what changed from v2?"
  • Chakra UI를 업그레이드하고, 업그레이드 후 breaking change를 만나는 경우
  • v2 패턴 변환: extendTheme, ColorModeScript, useColorModeValue, styleConfig, isDisabled, colorScheme

무엇을 하나요? (What it does)

단계별 마이그레이션: 프로젝트를 감사하고, @chakra-ui/codemod를 실행하며, 패키지, provider 설정, 컬러 모드, prop 이름 변경, 컴포넌트 API 변경, 테마 순서로 모든 breaking change를 하나씩 안내해요.

Prop 이름 변경 참조: 모든 불리언 prop 이름 변경(isOpen → open, isDisabled → disabled, isInvalid → invalid, isRequired → required)과 스타일 prop 이름 변경(colorScheme → colorPalette, spacing → gap, noOfLines → lineClamp)을 다룹니다.

컴파운드 컴포넌트 마이그레이션: v2의 평평한 컴포넌트를 v3 컴파운드 형태로 재작성해요.

v2 v3
<Modal> <Dialog.Root>
<FormControl> <Field.Root>
<Select> <NativeSelect.Root>
<Menu> / <MenuButton> <Menu.Root> / <Menu.Trigger asChild>
<Tabs> / <TabList> <Tabs.Root> / <Tabs.List>
<Alert> / <AlertIcon> <Alert.Root> / <Alert.Indicator>

테마 마이그레이션: extendTheme를 createSystem + defineConfig로 변환해요. 복잡한 테마 재작성은 chakra-ui-builder의 테마 참조를 가리킵니다.

Toast 마이그레이션: useToast()를 생성된 components/ui/toaster 스니펫의 toaster.create()로 대체해요.

chakra-ui-refactor

기존 코드의 문제를 검토하거나, Chakra UI v3 패턴으로 변환해요.

언제 활성화되나요? (When it activates)

  • "review my card component"
  • "is this correct?"
  • "what's wrong with this form?"
  • "convert this Tailwind layout to Chakra"
  • "refactor this component"
  • "clean this up"
  • "chakra-ify this"

무엇을 하나요? (What it does)

공통 분석: 출력을 생성하기 전에 다음 여섯 가지 차원에서 코드를 분석해요.

  1. 접근성: 누락된 aria-label, 잘못된 제목 계층, 키보드 지원이 없는 상호작용 요소, Field.Root이 없는 폼 필드
  2. 반응형: 하드코딩된 픽셀 너비, 누락된 브레이크포인트, 데스크톱 전용 레이아웃
  3. API 정확성: v2 props(isDisabled, colorScheme), 잘못된 import 소스, 누락된 컴파운드 컴포넌트 래퍼
  4. 토큰 사용: 다크 모드를 우회하는 하드코딩된 색상, 시맨틱 토큰을 사용해야 할 자리의 원시 값
  5. 컴포넌트 구조: Box 과다 사용, 깊은 중첩, 작업에 부적절한 원시 컴포넌트
  6. 유지보수성: 중복된 스타일, 반복되는 변형에 대한 레시피 또는 슬롯 레시피 누락

출력 모드: 스킬이 요청에서 의도를 감지해요.

요청 유형 출력
검토만 ("is this right?", "what's wrong?") 구조화된 비평: 치명적 문제 / 개선 사항 / 선택적 제안
리팩터링 ("refactor this", "convert to Chakra") 재작성된 코드 + 무엇이 바뀌었는지 요약 + 선택적 제안
둘 다 ("review and refactor") 먼저 비평, 그다음 재작성된 코드

프레임워크 및 버전 참고 (Framework and version notes)

세 가지 스킬 모두 기본적으로 Chakra UI v3 패턴을 사용해요. 각 세션 시작 시 package.json을 확인하고, 프로젝트가 명시적으로 v2이면 v2로 대체합니다.

또한 프레임워크(Next.js App Router, Pages Router, Vite, Remix)를 감지해 <Provider>를 어디에 둘지, "use client" 지시어를 추가할지, 어떤 import 경로를 사용할지 등 생성 코드를 그에 맞게 조정해요.

리소스 (Resources)

더 알아보기 (Learn more)