Communitygithub.com

chakra-ui/chakra-ui-빌더

Chakra UI v3를 사용하여 반응형이고 접근성 높은 UI 컴포넌트와 레이아웃을 구축하고, 새 프로젝트나 기존 프로젝트에 Chakra UI를 설치 또는 구성하며, 토큰, 시맨틱 토큰, 레시피, 슬롯 레시피를 사용하여 확장 가능한 테마를 설계합니다.

chakra-ui-빌더란 무엇인가요?

이 스킬은 Chakra UI v3를 기반으로 UI 컴포넌트, 페이지, 레이아웃을 구축하고 프로젝트 설정 및 테마를 설계하는 데 특화되어 있습니다. 사용자가 '로그인 폼', '사이드바', '카드', '대시보드'와 같은 UI 요소를 요청하거나, '브랜드 색상 추가', '재사용 가능한 카드 스타일'과 같은 테마 관련 질문을 할 때 자동으로 활성화됩니다. 지원되는 플랫폼은 Claude Code, Cursor, Codex 등이며, ChakraProvider 설정, CLI 스니펫 실행, 컬러 모드 구성, 프로바이더 래핑 문제 해결을 도와줍니다. 또한 디자인 토큰, 시맨틱 토큰, 다크 모드 값, 컴포넌트 레시피, 슬롯 레시피, typegen, 기본 테마 추출(eject)과 같은 고급 테마 기능을 제공하여 확장 가능하고 일관된 디자인 시스템을 구축할 수 있게 합니다. 차트 요청(막대 차트, 선 차트 등)에도 대응합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder

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

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

chakra-ui-빌더은(는) 무엇을 하나요?

Chakra UI v3를 사용하여 반응형이고 접근성 높은 UI 컴포넌트와 레이아웃을 구축하고, 새 프로젝트나 기존 프로젝트에 Chakra UI를 설치 또는 구성하며, 토큰, 시맨틱 토큰, 레시피, 슬롯 레시피를 사용하여 확장 가능한 테마를 설계합니다. 사용자가 Chakra UI를 사용하여 UI 컴포넌트, 페이지, 폼, 대시보드, 내비게이션 바, 카드, 랜딩 섹션, 가격표 또는 레이아웃을 빌드, 생성 또는 요청할 때; 프로젝트에 Chakra UI를 추가하거나, ChakraProvider를 설정하거나, CLI 스니펫을 실행하거나, 컬러 모드를 구성하거나, 프로바이더 래핑 문제를 해결하려 할 때; 또는 브랜드 색상 정의, 디자인 토큰, 시맨틱 토큰, 다크 모드 값, 컴포넌트 레시피, 슬롯 레시피, typegen, 기본 테마 추출(eject)과 같은 테마 관련 질문을 할 때 이 스킬을 사용하세요. Chakra UI 구축, 설정, 테마 또는 차트 요청이 있을 때마다 트리거됩니다. 예를 들어 "브랜드 색상 추가", "재사용 가능한 카드 스타일 만들기", "막대 차트 구축", "선 차트 보여줘", "로그인 폼 만들어줘", "사이드바 구축", "내 앱에 Chakra 추가"와 같은 요청에 반응합니다.

관련 스킬