UI/UX Advisor

Plugin uiux-advisor in HYEXE/codex-plugins. Commands read from the repo's manifest — 1 month ago.

Skills (9)

• build-data-visualization

  데이터와 사용자 과업에 맞는 차트·시각화 표현을 정하고 Bklit UI, Recharts, Apache ECharts, Observable Plot, D3 또는 기존 도구로 실제 프론트엔드에 구현·검증한다. 사용자가 대시보드 차트, 분석 화면, 실시간·대용량 시각화, 지도·네트워크·사용자 정의 그래픽, Bklit UI 설치·활용이나 접근 가능한 데이터 표현을 요청할 때 사용한다. 원칙 설명·명세만 필요하면 uiux-advisor를, 기존 차트 감사만 필요하면 uiux-auditor를 사용한다.

• build-design-system

  기존 코드베이스의 디자인 토큰, 테마, 컴포넌트 API, variant·state, 문서화와 회귀 검증을 하나의 시스템으로 설계·구현·마이그레이션한다. 사용자가 디자인 시스템이나 컴포넌트 라이브러리 구축·정리, CSS 변수·DTCG 토큰·Style Dictionary 파이프라인, Storybook 상태 문서, 다크 모드·브랜드 테마, 중복 컴포넌트 통합 또는 점진적 마이그레이션을 요청할 때 사용한다. 한 화면의 시각적 조합만 개선하면 compose-creative-ui를, 구현 없이 원칙이나 명세만 필요하면 uiux-advisor를

• build-interactive-graphics

  기존 프론트엔드에 Rive 상태 머신, PixiJS 2D canvas, Three.js·React Three Fiber 3D, Theatre.js 연출을 실제로 구현하고 정적·DOM 폴백, 접근성, 렌더 루프, 자원 정리와 성능 예산을 검증한다. 사용자가 반응형 벡터 캐릭터, 노드 캔버스, 제품 3D 뷰어, 상태 연동 그래픽 또는 타임라인 기반 시각 장면을 코드로 만들어 달라고 할 때 사용한다. DOM 위젯의 키보드·포커스·제스처는 implement-ui-interaction을, 실제 비동기 작업 수명주기는 implement-asy

• compose-creative-ui

  기존 프론트엔드의 정체성과 디자인 시스템을 보존하면서 shadcn/ui registry, Magic UI, Aceternity UI, React Bits, Radix, Base UI, React Aria, Ark UI 등 호환 가능한 컴포넌트·시각 효과 도구를 선별해 화면 구성 자체를 구현·검증한다. 사용자가 랜딩 페이지, hero, 배경, 카드, bento, 텍스트 효과나 밋밋한 화면의 시각적 조합 개선을 요청할 때 사용한다. 시간·공간 변화는 implement-ui-motion을, 키보드·포커스·제스처·상태 동작은 impleme

• implement-async-ui-state

  기존 프론트엔드에서 요청·스트림·background job·batch 작업의 비동기 상태를 실제 코드로 구현하고 검증한다. 사용자가 upload·generate·export·save·agent·tool 실행 화면에 접수·진행·사용자 입력 대기·부분 성공·오류·취소·재시도·재연결을 구현하거나 중복 실행, optimistic rollback, stale·late response와 job identity 문제를 해결해 달라고 할 때 사용한다. Dialog·Combobox·Carousel의 키보드·포커스·제스처 계약이 주 결과면 imple

• implement-ui-interaction

  기존 프론트엔드에 키보드·포커스·터치·포인터·제스처가 정확한 widget 상호작용을 구현하고 검증한다. 사용자가 Dialog, Popover, Tooltip, Menu, Combobox, Carousel, drag·swipe·pinch 또는 floating positioning을 실제 코드로 만들어 달라고 할 때 사용한다. 요청·스트림·background job·batch의 중복 실행, 취소·재시도·부분 성공 같은 비동기 작업 수명주기가 주 결과면 implement-async-ui-state를, 시간 기반 모션 자체가 주 결과면 i

• implement-ui-motion

  기존 프론트엔드에서 시간·공간 변화의 표현 자체가 주된 결과물인 모션과 마이크로인터랙션을 설계하고 CSS, Web Animations API, View Transition API, Anime.js, Motion 또는 GSAP 중 가장 단순한 기술로 구현·검증한다. 사용자가 애니메이션 적용, 버튼·카드의 시각 피드백, 페이지·레이아웃 전환, 스크롤·타임라인·SVG 모션, 라이브러리 선택, reduced-motion 또는 모션 성능 수정을 요청할 때 사용한다. 키보드·포커스·터치·제스처 입력은 implement-ui-interactio

• uiux-advisor

  근거 기반 한국어 UI/UX 가이드를 검색해 개념 설명, 대안 비교, 컴포넌트·제품 명세와 리서치·검증 계획을 작성하고 React·Next.js·Vue·Nuxt·Svelte·SvelteKit·Angular·Solid·Astro 등 프론트엔드 스택과 라이브러리를 역할·생태계·리스크로 비교한다. 접근성, 콘텐츠, 상호작용 상태, 윤리, 반응형, 디자인 시스템, QA, 성능 또는 스택 선택이 주 결과일 때 사용한다. 스크린샷·URL·코드·사용자 흐름 감사는 uiux-auditor를 사용한다. 키보드·포커스·제스처 구현은 implement

• uiux-auditor

  스크린샷, URL, 프로토타입, 코드, 제품 화면과 다단계 사용자 흐름을 증거 기반으로 감사해 심각도, 근거 확실도, 사용자 영향, 수정 우선순위와 검증 방법을 제시한다. 사용자가 UI/UX 감사, 화면·흐름 리뷰, 휴리스틱 평가, 접근성·상태·콘텐츠·반응형·성능·윤리 점검이나 출시 전 품질 검토를 요청할 때 사용한다. 일반 개념 설명·명세는 uiux-advisor를 사용하며, widget 상호작용·비동기 작업 상태·모션·차트·화면 조합·디자인 시스템의 실제 구현이 목적이면 각각 implement-ui-interaction, imp

Similar plugins