철칙
파일을 검토하기 전에 반드시 실시간 가이드라인을 가져오십시오. 기억된 규칙이나 가정된 규칙을 절대 적용하지 말고 항상 소스 URL에서 새로 가져오십시오. WebFetch가 실패하면 실패를 보고하고 추측된 규칙으로 진행하지 마십시오.
웹 인터페이스 가이드라인 리뷰
Vercel의 웹 인터페이스 가이드라인에 따라 UI 코드를 감사합니다. 구조화된
file:line형태의 결과를 출력합니다.
이 스킬을 사용해야 할 때
사용자가 다음과 같이 요청할 때 이 스킬을 로드하십시오:
- "내 UI 검토해줘"
- "접근성 확인해줘"
- "디자인 감사해줘"
- "UX 검토해줘"
- "내 사이트/컴포넌트 가이드라인에 맞는지 확인해줘"
- PR 전에 디자인 준수 여부 확인
작동 방식
- 가이드라인 가져오기 — WebFetch를 사용하여 소스 URL에서 최신 규칙을 검색합니다
- 파일 읽기 — 지정된 파일을 읽거나 (또는 사용자에게 검토할 파일/패턴을 물어봅니다)
- 규칙 적용 — 가져온 가이드라인의 모든 규칙에 대해 모든 파일을 검사합니다
- 결과 출력 —
file:line: [위반된 규칙]형식으로 위반 사항을 보고합니다
가이드라인 소스
각 리뷰 세션 전에 최신 가이드라인을 가져오십시오:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetch를 사용하여 최신 규칙을 검색하십시오. 가져온 내용에는 모든 규칙과 출력 형식 지침이 포함되어 있습니다. 세션 간에 규칙을 캐싱하거나 기억하지 마십시오 — 항상 새로 가져오십시오.
사용 방법
사용자가 파일이나 경로 패턴을 제공한 경우:
- 소스 URL에서 가이드라인 가져오기
- 지정된 파일 읽기
- 가져온 가이드라인의 모든 규칙 적용
- 가이드라인에 지정된 형식으로 결과 출력
파일이 지정되지 않은 경우:
사용자에게 물어보십시오: "어떤 파일 또는 디렉터리를 검토할까요? (예: src/app/features/dashboard/ 또는 *.component.html)"
출력 형식
가져온 가이드라인에 지정된 형식을 정확히 따르십시오. 기본 구조:
file:line — [규칙 이름]: [위반 설명]
예시:
dashboard.component.html:34 — 빈 상태: 데이터가 없는 조건에 대해 빈 상태가 정의되지 않음
dashboard.component.html:67 — 포커스 관리: 상호작용 요소에 시각적 포커스 표시기가 없음
order-list.component.ts:89 — 로딩 상태: 비동기 작업에 로딩 피드백이 없음
실패 처리
WebFetch가 가이드라인 URL을 가져오지 못한 경우:
- 보고: "소스 URL에서 웹 인터페이스 가이드라인을 가져올 수 없습니다. 가져오기 실패: [오류]"
- 추측된 규칙이나 기억된 규칙으로 진행하지 마십시오
- 제안: "다시 시도하거나 raw.githubusercontent.com에 대한 네트워크 접근을 확인하십시오"
가져오기가 실패한 경우 절대 규칙 결과를 임의로 만들어 내지 마십시오.
리뷰 스택에서의 위치
이 스킬은 UI 리뷰의 세 번째 계층입니다 — 완전한 범위를 위해 세 가지를 모두 실행하십시오:
| 계층 | 도구 | 발견 항목 |
|---|---|---|
| 계층 1 — 디자인 토큰 | /lint-design-system | 하드코딩된 색상, 원시 간격, 인라인 타이포그래피, 터치 대상 위반 |
| 계층 2 — WCAG 접근성 | accessibility-auditor 에이전트 | 대비 비율, ARIA 레이블, 키보드 내비게이션, 시맨틱 HTML |
| 계층 3 — 웹 인터페이스 패턴 | web-design-guidelines (이 스킬) | 로딩 상태, 빈 상태, 오류 처리, 상호작용 패턴, 포커스 관리 |
관련 스킬
frontend-design— 이 스킬 전에 실행하여 미적 방향과 DFII 점수를 설정합니다design-system— 토큰 준수 시행 (Angular + Flutter)angular-ui-patterns— Angular 특화 로딩/오류/빈 상태 원칙accessibility-audit— WCAG 2.1 AA 준수 감사