UI Design

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

ckm:brand는 브랜드 가이드라인, 메시지, 보이스, 비주얼 아이덴티티, 디자인 토큰 동기화를 생성·업데이트·검토하는 브랜딩 워크플로 스킬로, 실무용 스크립트와 체크리스트를 제공합니다.

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.

web-component-design 스킬은 팀이 React, Vue, Svelte에서 재사용 가능한 UI 컴포넌트를 설계할 수 있도록 돕습니다. 디자인 시스템에 맞는 탄탄한 API 패턴, 접근성 가이드, 스타일링 선택지별 트레이드오프 참고 정보를 제공합니다.

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

harden 스킬은 더 강력한 오류 처리, 빈 상태와 로딩 상태 정비, 텍스트 오버플로 수정, i18n 지원, 그리고 실제 데이터에서 발생하는 엣지 케이스 대응을 통해 프런트엔드 UI를 프로덕션 수준으로 다듬는 데 도움을 줍니다.

extract 스킬은 팀이 반복되는 UI 패턴, 토큰, 컴포넌트를 찾아내고, 더 안전한 마이그레이션 경로를 고려해 기존 디자인 시스템으로 통합을 계획하거나 실제로 진행할 수 있도록 돕습니다.

critique 스킬은 팀이 페이지, 기능, 컴포넌트에 대해 구조화된 UX 리뷰를 수행하도록 돕습니다. 정보 위계, 인지 부하, 휴리스틱, 페르소나별 리스크를 평가한 뒤, 발견사항을 바로 실행 가능한 개선안으로 정리해 줍니다. 명확한 스크린샷, 목표, 사용자 맥락을 갖춘 상태에서 /frontend-design 이후에 사용하는 것이 가장 적합합니다.

clarify는 혼란을 주는 UI 문구, 오류 메시지, 라벨, 안내 문구를 더 나은 UX를 위해 다시 다듬는 데 도움을 줍니다. pbakaus/impeccable 워크플로에서는 /frontend-design 이후에 사용하는 것이 가장 적합하며, 대상 사용자의 수준과 당시의 사용자 심리 상태를 함께 제공하면 결과가 더 좋아집니다.

extract 스킬은 팀이 반복되는 UI 패턴, 토큰, 컴포넌트를 찾아내고, 이를 기존 디자인 시스템에 통합할 수 있도록 돕습니다. 또한 더 안전하게 마이그레이션할 수 있도록 계획 수립까지 지원합니다.

baoyu-article-illustrator는 에이전트가 기사 초안을 설명형 콘텐츠, 튜토리얼, 다이어그램, 멀티이미지 포스트에 맞는 구조화된 일러스트 프롬프트와 배치안, 그리고 일관된 타입·스타일 결정을 만들 수 있도록 돕습니다.

huggingface-gradio는 Python에서 Gradio 웹 UI를 만들고 수정할 수 있게 도와주며, 데모, 챗봇, 프런트엔드 개발 워크플로에 특히 유용합니다. huggingface-gradio 스킬을 사용하면 컴포넌트를 고르고, 이벤트를 연결하고, 레이아웃을 잡는 과정을 덜 막연하게 진행할 수 있습니다.

ab-test-store-listing은 전환율을 높이기 위해 App Store 상품 페이지 테스트를 기획하고 실행하는 데 도움을 줍니다. Apple Product Page Optimization으로 아이콘, 스크린샷, 미리보기 비디오를 평가하고, PPO의 제한을 이해하며, 시작 전에 적절한 App ID, 트래픽, 테스트 가설을 준비하는 데 사용할 수 있습니다.

makepad-2.0-dsl은 Makepad 2.0 DSL `script_mod!` UI 코드를 작성, 읽기, 수정할 때 유용한 실전형 스킬입니다. 프론트엔드 개발자와 Rust UI 작성자가 콜론 문법, 명명된 인스턴스, 병합 동작, Rust 바인딩을 올바르게 다루도록 돕고, 설치와 사용법을 한눈에 볼 수 있는 makepad-2.0-dsl 가이드를 제공합니다.

makepad-2.0-splash는 `script_mod!{}` 안에서 유효한 런타임 UI 스크립트를 작성하도록 돕는 Makepad 2.0 Splash 스킬입니다. 안정적인 상태 관리, 이벤트 연결, 핫 리로드 흐름, Canvas 기반 앱 패턴까지 함께 다룹니다. 프런트엔드 개발 작업에서 명확한 문법, 설치 안내, 실용적인 사용법이 필요할 때 이 makepad-2.0-splash 가이드를 활용하세요.