UI/UX Design

accessibility 스킬은 Web, iOS, Android에서 WCAG 2.2 AA 수준에 맞는 접근 가능한 UI를 설계, 구현, 감사할 수 있도록 돕습니다. 컴포넌트의 역할, 레이블, 상태, 포커스 동작, 접근성 특성을 매핑하는 데 활용할 수 있으며, UX Audit 작업과 구현 검토에 바로 쓸 수 있는 실무형 접근성 가이드를 제공합니다.

ux-designer는 리서치, 접근성, 정보 구조, 인터랙션 플로우, 와이어프레임 가이드, UX 카피 작성을 체계적으로 지원하는 UX 디자인 스킬입니다. `AGENTS.md`와 목적별 rules 파일을 바탕으로, 팀이 거친 제품 아이디어를 더 명확하고 기준 중심의 디자인 의사결정으로 발전시키도록 돕습니다.

browse는 QA, 사내 검증(dogfooding), 브라우저 자동화를 위한 빠른 헤드리스 브라우저 skill입니다. 페이지를 열고, 요소와 상호작용하고, 상태를 검증하고, 작업 전후를 비교하고, 스크린샷을 캡처하고, 반응형 레이아웃·폼·업로드·다이얼로그·요소 상태를 확인할 때 사용하세요. 일반적인 프롬프트보다 브라우저 증거가 필요할 때 browse를 설치하면 좋습니다.

gstack은 QA 테스트, dogfooding, 릴리스 점검, 버그 캡처를 위한 브라우저 기반 AI 스킬입니다. 실제 페이지를 열고 UI를 직접 클릭하며 상태를 검증하고, 전후 비교와 반응형 레이아웃 테스트를 수행하며, 스크린샷 증거까지 남깁니다. 특히 신뢰할 수 있는 브라우저 결과가 필요할 때 UI 디자인 검토와 배포 검증에 유용하며, gstack 스킬로 실측 가능한 확인이 필요할 때 잘 맞습니다.

ui-ux-pro-max는 AI 기반 UI/UX 디자인을 위한 종합 스킬입니다. 웹과 모바일 프로젝트의 레이아웃, 스타일, 컬러 시스템, 타이포그래피, UX 규칙에 대해 체계적으로 안내하며, React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, HTML/CSS 등 다양한 환경에서 실무 디자인 결정을 지원합니다. UI 기획, 리뷰, 개선에 활용할 수 있는 큐레이션된 디자인 인텔리전스를 제공합니다.

vercel-react-native-skills는 성능을 중시하는 프런트엔드 개발을 위한 React Native 및 Expo 스킬입니다. 리스트 렌더링, 애니메이션, 네비게이션, UI 패턴, 상태 관리, 네이티브 모듈 설정을 개선하는 데 활용할 수 있습니다. 모바일 앱의 병목을 더 적은 시행착오로 다루도록 실용적인 규칙, 설치 가이드, 사용 패턴을 제공합니다.

shape는 코드를 작성하기 전에 구조화된 디스커버리 인터뷰를 진행하고 디자인 브리프를 만드는, 기획 중심의 UI/UX 디자인 스킬입니다. 사용자 문제, 제약 조건, 제품 방향을 먼저 분명히 정리한 뒤 구현 단계로 자연스럽게 넘기고 싶을 때 적합합니다.

quieter는 지나치게 강하거나 자극적인 인터페이스에서 시각적 과격함을 줄이면서도, 명확성·계층 구조·브랜드 의도는 유지하도록 돕는 UI 디자인 다듬기 스킬입니다. 상위 `$impeccable` 스킬을 먼저 사용한 뒤 적용할 때 가장 효과적이며, 팀이 집중도를 높이기 위한 표적 수정에 앞서 과도한 인상의 원인을 진단하는 데 도움을 줍니다.

harden 스킬은 엣지 케이스, 빈 상태, 오류 처리, 긴 텍스트, 로컬라이제이션, 권한 등 실제 환경에서 발생하는 다양한 실패 모드를 테스트해 UI 디자인과 인터페이스 명세를 프로덕션에 투입 가능한 수준으로 다듬는 데 도움을 줍니다. 레이아웃 충돌을 줄이고 동작 규칙을 더 촘촘하게 정리해야 하는 harden for UI Design 작업에 적합합니다.

critique는 구조화된 점수화, 페르소나 기반 테스트, 휴리스틱 점검, 실행 가능한 피드백을 통해 UX 관점에서 인터페이스, 기능, 페이지, 컴포넌트를 검토하도록 돕습니다. UI/UX 디자인을 위해 반복해서 쓸 수 있는 critique 가이드가 필요할 때 사용하세요. 막연한 의견이 아니라, 특정 영역을 명확한 맥락과 함께 집중적으로 점검하는 데 가장 적합합니다.

delight 스킬은 사용성이나 집중도를 해치지 않으면서 성공, 로딩, 빈 상태, 온보딩 화면에 세련된 UI 디테일과 마이크로 인터랙션, 개성을 더할 때 유용합니다.

Clarify는 혼란스러운 UX 카피, 오류 메시지, 라벨, 온보딩 단계, 안내 문구를 더 명확하게 다듬어 사용자가 덜 추측하고 바로 행동할 수 있게 해줍니다. Technical Writing, 지원 콘텐츠, 그리고 인터페이스 문구를 더 분명하게 만들어야 하는 제품팀에 특히 유용합니다. 이 스킬은 문구를 고치기 전에 맥락, 대상 사용자, 현재 사용자 상태부터 파악하므로 결과가 더 직관적이고 구체적이며 실제 사용에 도움이 되는 방향으로 정리됩니다.

figma-create-new-file는 drafts에 새 Figma Design 파일 또는 FigJam 보드를 빈 상태로 생성합니다. use_figma를 포함한 더 깊은 Figma 작업을 시작하기 전, 새 출발점이 필요할 때 사용하세요. design 또는 figjam을 지원하며, 선택적으로 파일 이름을 지정할 수 있고, 필요할 경우 whoami로 plan access를 확인해 해결할 수 있습니다.

figma를 사용해 Figma MCP 서버에서 디자인 컨텍스트, 스크린샷, 변수, 에셋을 가져온 뒤, Figma 노드를 구현에 바로 쓸 수 있는 UI 결정으로 변환하세요. 이 figma 스킬은 Figma URL이나 노드 ID가 있고, 디자인-코드 작업, 설정, 문제 해결에 맞는 정확한 figma 사용법이 필요할 때 적합합니다.

layout skill은 UI 구성, 여백, 위계, 정렬, 시각적 리듬을 검토하고 개선하는 데 도움을 줍니다. 화면이 과밀하거나 구조적으로 약할 때 특히 적합하며, 사용 전 맥락 수집을 위해 /impeccable에 의존합니다.

shape는 코드를 작성하기 전에 디스커버리 인터뷰를 진행하고, 답변을 디자인 브리프로 정리해 주는 기획 중심 UX/UI 스킬입니다. UI Design에서 사용자 목표, 제약 조건, 상태, 구현 방향을 더 분명히 하려면 /impeccable와 함께 사용하는 것이 좋습니다.

site-architecture는 웹사이트의 페이지 계층, 내비게이션, URL 패턴, 내부 링크 구조를 새로 설계하거나 재정비할 때 유용한 스킬입니다. 사이트맵, 내비게이션 명세, URL 맵, Mermaid 또는 ASCII 사이트 다이어그램을 만들어 마케팅 기획과 UI/UX 설계를 구체화하는 데 활용할 수 있습니다.

onboard 스킬은 제품 팀이 온보딩 플로우, empty state, 첫 실행 UX를 개선하도록 돕습니다. 실무적인 워크플로와 필수 의존성인 `/frontend-design`, 그리고 aha moment, 사용자 숙련도, 핵심 활성화 단계를 정의하기 위한 프롬프트를 바탕으로 설치와 활용 방법을 안내합니다.

distill은 화면, 컴포넌트, 사용자 흐름을 핵심 목표만 남기도록 정리하는 UI 디자인 스킬입니다. 복잡함, 시각적 노이즈, 기능 비대화를 줄이는 데 유용하지만, 사용 전 /frontend-design에 의존하며 경우에 따라 /teach-impeccable을 먼저 실행해야 합니다.

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

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

bolder는 밋밋하거나 지나치게 무난한 인터페이스에 대비, 위계, 개성을 더해 완성도를 높이는 UI 디자인 스킬입니다. 더 정확하고 실행 가능한 디자인 개선안을 얻고 싶다면 `/frontend-design`으로 먼저 맥락을 정리한 뒤 사용하세요. 디자인 맥락이 전혀 없다면 `/teach-impeccable` 이후에 쓰는 것이 좋습니다. 사용성을 해치지 않으면서도 더 선명한 개선 방향을 제시하는 데 적합합니다.

adapt 스킬은 기존 UI를 새로운 디바이스나 사용 맥락에 맞게 다시 설계할 때 유용합니다. adapt 워크플로, 필요한 frontend-design 의존성, 설치 경로, 그리고 모바일·태블릿·인쇄물·크로스플랫폼 환경에서의 실전 UI/UX 변경 활용법을 확인해 보세요.

onboard skill은 onboarding flow, empty state, 첫 실행 UX를 개선해 더 빠른 activation을 돕습니다. 먼저 /frontend-design 이 필요하며, 경우에 따라 /teach-impeccable 도 필요할 수 있습니다. 명확한 대상 사용자, 제품의 aha moment, 그리고 사용자 경험 맥락이 있을 때 가장 효과적으로 작동합니다.