웹 인터페이스 가이드라인
파일이 웹 인터페이스 가이드라인을 준수하는지 검토합니다.
작동 방식
- 아래 소스 URL에서 최신 가이드라인을 가져옵니다.
- 지정된 파일을 읽습니다(또는 사용자에게 파일/패턴을 요청합니다).
- 가져온 가이드라인의 모든 규칙을 검사합니다.
- 간결한
file:line형식으로 결과를 출력합니다.
가이드라인 소스
각 검토 전에 새 가이드라인을 가져옵니다:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetch를 사용하여 최신 규칙을 검색합니다. 가져온 내용에는 모든 규칙과 출력 형식 지침이 포함되어 있습니다.
사용법
사용자가 파일 또는 패턴 인수를 제공하는 경우:
- 위 소스 URL에서 가이드라인을 가져옵니다.
- 지정된 파일을 읽습니다.
- 가져온 가이드라인의 모든 규칙을 적용합니다.
- 가이드라인에 지정된 형식을 사용하여 결과를 출력합니다.
파일이 지정되지 않은 경우, 사용자에게 어떤 파일을 검토할지 묻습니다.
문제 발견 후 개선
문제를 식별한 후, ui-ux-pro-max를 사용하여 각 범주별로 더 깊이 있는 개선 지침을 얻습니다:
# 접근성 문제
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux
# 폼 UX 문제
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux
# 애니메이션/모션 문제
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux
# 내비게이션 문제
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux
# 성능/레이아웃 문제
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux
감사 결과를 위의 가장 가까운 도메인 키워드에 매핑합니다. ui-ux-pro-max 빠른 참조(섹션 1~9)는 가이드라인 검사기가 표시하는 모든 범주를 다룹니다.
관련 기술
- ui-ux-pro-max: 모든 문제 범주에 대한 심층 UX 지침 및 개선 규칙
- frontend-design: 코드 작성 전 디자인 방향 및 계획
- ui-styling: 구성 요소 수준의 수정이 필요한 경우(shadcn/ui 및 Tailwind) 구성 요소 구현