Components

ui-design-system은 Design Systems를 위한 Claude skill입니다. design tokens, color scales, typography, spacing, responsive rules, component documentation, developer handoff assets 생성을 돕고, JSON, CSS, SCSS 또는 summary 출력용 Python token generator와 참고 자료를 함께 제공합니다.

figma-code-connect-components는 Figma Code Connect로 Figma 디자인 컴포넌트를 일치하는 코드 컴포넌트에 매핑하는 데 도움을 줍니다. 디자인 구현 정렬, variant와 prop 매칭, 그리고 매핑을 만들기 전에 로컬에서 맞는 컴포넌트를 찾는 작업에 적합합니다. 캔버스 작성이나 전체 페이지 생성보다는 connect, map, 또는 link-to-code 워크플로에 가장 잘 맞습니다.

WordPress Design System(WPDS)으로 WordPress UI를 만들거나 검토할 때 wpds 스킬을 사용하세요. WPDS MCP 서버를 통해 컴포넌트, 토큰, 패턴, 패키지 적합성을 확인할 수 있어, 추측이 아니라 공식 문서에 근거해 wpds 가이드를 유지할 수 있습니다. Gutenberg, WooCommerce, WordPress.com, Jetpack 등 관련 인터페이스 전반의 Design Systems 작업에 특히 적합합니다.

figma-use는 Figma 파일 컨텍스트에서 JavaScript를 안전하게 실행할 수 있도록, 모든 use_figma 호출 전에 설치해야 하는 스킬입니다. 노드 생성 및 편집, 변수와 스타일 연결, 컴포넌트와 변형 구축, 파일 구조의 프로그래밍 방식 검사 같은 디자인 구현 작업을 지원합니다. 이 저장소에는 사용 가이드, 주의할 점, 그리고 Figma 자동화에서 흔히 발생하는 오류를 줄이기 위한 패턴이 포함되어 있습니다.

hig-components-search는 검색 필드, 페이지 컨트롤, 경로 컨트롤에 대한 UI 디자인 결정을 돕는 Apple HIG 스킬입니다. macOS 또는 iPadOS 인터페이스에서 검색 동작, 검색 범위, 페이지네이션, 계층형 탐색에 대한 명확한 지침이 필요할 때 사용하세요. 특히 검색 UX, 검색 제안, 구조화된 내비게이션에 유용합니다.

hig-components-menus는 메뉴와 버튼 중심의 명령 UI를 위한 Apple HIG 가이드 스킬입니다. 메뉴, 컨텍스트 메뉴, 툴바, 메뉴 바 및 관련 컨트롤에 대한 UI 디자인 결정을 내릴 때, 특히 명령 배치, 그룹화, 동작 방식에 대해 Apple 전용 지침이 필요하다면 이 hig-components-menus 스킬을 사용하세요.

hig-components-layout는 사이드바, 분할 보기, 탭 바, 목록, 표, 윤곽 보기, 열, 패널, 창, 스크롤 뷰, 박스, 오너먼트 중 무엇을 선택할지 판단하는 데 도움을 주는 Apple HIG의 내비게이션 및 레이아웃 스킬입니다. 일반적인 반응형 레이아웃 조언보다 플랫폼 맥락을 반영한 명확한 가이드가 필요할 때, UI 디자인과 앱 구조 결정을 위해 사용하세요.

hig-components-dialogs는 알림, 액션 시트, 팝오버, 시트, 숫자 입력 화면을 선택할 때 쓰는 Apple HIG 프레젠테이션 컴포넌트 스킬입니다. iOS, iPadOS, macOS, watchOS, visionOS 전반에서 확인 흐름, 파괴적 작업, 비모달 콘텐츠, UI 설계 판단에 대해 Apple 가이드라인에 맞는 명확한 다이얼로그 선택이 필요할 때 이 hig-components-dialogs 가이드를 사용하세요.

component-refactoring 스킬은 분석 기반 안내를 통해 Dify 프론트엔드의 복잡도가 높은 React 컴포넌트를 리팩터링하는 데 도움을 줍니다. `pnpm analyze-component --json`에서 복잡도가 50을 넘거나, 라인 수가 300줄을 초과하거나, 일반적인 재작성 대신 코드 분할·훅 추출·더 안전한 component-refactoring 가이드가 필요할 때 사용하세요.

figma-generate-library는 코드베이스를 바탕으로 Figma 디자인 시스템을 구축하거나 업데이트할 때, 토큰, 컴포넌트 라이브러리, 문서화, 라이트/다크 테마를 순서대로 진행할 수 있게 도와줍니다. 일회성 목업이 아니라 디자인 시스템을 실무적으로 다뤄야 할 때 사용하는 figma-generate-library 스킬입니다. Plugin API 호출용 figma-use와 함께 쓰면 더 좋습니다.

figma-generate-design는 코드로 만든 페이지, 모달, 드로어, 사이드바, 패널, 기타 여러 섹션으로 구성된 화면을 공개된 디자인 시스템을 활용해 Figma로 옮기는 데 도움을 줍니다. Code Connect와 관련 소스에서 컴포넌트, 변수, 스타일, 라이브러리 에셋을 찾아내고, 전체를 다시 그리지 않고 Design Implementation을 위해 화면을 섹션별로 조립합니다. 코드와 토큰의 일치를 중시할 때 figma-generate-design 가이드를 사용하세요.

figma-use는 Figma Plugin API 워크플로에서 안전한 `use_figma` 호출에 필요한 필수 스킬입니다. JavaScript로 Figma 파일을 작성, 수정, 검사 또는 구조화하기 전에 이 스킬을 설치하고 로드하세요. 특히 디자인 구현, 컴포넌트 작업, 변수, 오토 레이아웃, 프로그래밍 방식의 파일 읽기에 유용합니다.

figma-generate-library는 코드베이스를 토큰, 변수, 컴포넌트, 테마, 문서를 갖춘 Figma 디자인 시스템 라이브러리로 전환하는 데 도움이 됩니다. 설치, 설정, 탐색, 생성, 검증, 코드와의 정합성 조정까지 포함한 단계적 워크플로가 필요할 때 이 figma-generate-library 스킬을 사용하세요.

figma-generate-design은 실제 화면, 페이지, 또는 여러 섹션으로 구성된 레이아웃을 일반적인 도형 대신 공개된 디자인 시스템을 재사용해 Figma로 옮기는 데 도움을 줍니다. 코드나 제품 페이지와 높은 일치도, 편집 가능한 구조, 토큰 기반 일관성이 필요한 경우에 특히 적합합니다. 러프한 목업이 아니라 전체 페이지 UI 디자인 업데이트에 사용하세요.