UI/UX Pro Max

UX Pro Max은(는) 무엇을 하나요?

선택적 읽기 규칙

다음부터 시작하세요:

• references/usage-routing.md
• references/quality-checklist.md

그런 다음 사용자의 실제 작업과 일치하는 상속된 문서, 스크립트, 에셋 또는 예제만 로드하세요.

선택적 읽기 규칙

다음부터 시작하세요:

• references/senior-master-standard.md
• references/stack-routing.md
• references/design-review-checklist.md

먼저 references/stack-routing.md를 사용하여 가장 관련성 높은 스택 데이터 파일을 선택하고 관련 없는 프레임워크 지침을 로드하지 않도록 하세요.

목적

모호한 UI 요청을 의도적인 디자인 시스템과 실제 프론트엔드 스택에 맞는 구현 가이드로 변환합니다.

이 스킬을 사용해야 할 때

• 사용자가 페이지, 컴포넌트, 대시보드, 랜딩 페이지, 리디자인, 폴리시 패스, 디자인 시스템 또는 프론트엔드 시각적 방향을 요청할 때
• 작업에 타이포그래피, 색상, 간격, 계층, 모션, 접근성 또는 스택별 UI 구현이 포함될 때
• 일반적인 AI 생성 프론트엔드 출력을 피하면서도 실용적인 결과물을 제공해야 할 때

데이터 범위

이 스킬은 이제 16개 스택에 대한 큐레이팅된 검색 가능한 가이드를 포함합니다:

• html-tailwind
• react
• nextjs
• remix
• astro
• vue
• nuxtjs
• nuxt-ui
• svelte
• sveltekit
• shadcn
• expo-router
• react-native
• flutter
• swiftui
• jetpack-compose

워크플로

1. UI 작업 분류
   • 랜딩 페이지, 대시보드, 앱 셸, 기능 표면, 컴포넌트 시스템 또는 리디자인
2. 스택 선택
   • 스택이 명시되지 않았지만 암시된 경우 references/stack-routing.md 사용
3. 디자인 시스템 생성
   • --design-system 플래그와 함께 번들된 검색 도구 실행
4. 스택별 가이드 검색
   • 프레임워크와 제품 유형에 대한 스택 검색 실행
5. 최종 확정 전 검토
   • references/design-review-checklist.md 사용

명령어

저장소 루트에서:

python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit

이미 스킬 폴더 안에 있다면 python scripts/search.py ...를 사용하세요.

규칙

• 기본값은 유행하는 스타일이 아닌 실제 제품 맥락에 맞춥니다.
• 패턴을 발명하기 전에 프레임워크에서 사용 중인 스택 가이드를 일치시킵니다.
• 예쁘지만 깨지기 쉬운 데모보다 접근 가능하고, 반응형이며, 프로덕션 등급의 UI를 선호합니다.
• 기존 디자인 시스템에서 작업할 때는 새로운 방향을 도입하기 전에 기존 패턴을 유지합니다.