design-pass
대상: $ARGUMENTS
도구: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · 체크리스트: ${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. 기준선 (코드 변경 전)
개발 서버가 실행 중인지 확인합니다 (필요하면 백그라운드에서 시작하고, 프로덕션 빌드는 실행하지 마세요). 그런 다음:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. 패치 전 감사
- 대상이 렌더링하는 모든 컴포넌트와, 동일한 패턴을 렌더링하는 다른 모든 위치를 찾습니다 (클래스 문자열과 컴포넌트 이름을 grep).
- 새 컴포넌트를 작성하기 전에 기존 프리미티브(버튼, 카드, 모달, 섹션 제목)를 재사용합니다. 같은 마크업이 2회 이상 나타나면 추출한 후 한 번만 리스타일합니다.
- 요청된 대로 정확히 구축합니다. 요청하지 않은 새 섹션, 배지, 토글, 애니메이션은 추가하지 마세요.
- 프로젝트 토큰만 사용합니다. 값이 스케일에 없으면 가장 가까운 단계를 사용하거나 토큰을 제안합니다 (
design-ref참조).
3. 적용
체크리스트를 따라 작업합니다: 계층 구조, 뷰당 하나의 주요 동작, 여백 스케일, 타이포그래피 스케일, 빈/로딩/에러 상태, 모바일에서 입력 필드 ≥ 16px.
4. 검증
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- 모든 너비(라이트 모드와 다크 모드)에 대한 after 시트를 읽습니다. 대상 외부에서 의도하지 않은 변경이 있는지 diff PNG를 확인합니다.
- 그레이스케일 확인:
--inject "document.documentElement.style.filter='grayscale(1)'"옵션으로 한 너비를 다시 실행합니다. - 그런 다음 전체
ui-audit너비 세트를 한 번 실행하고, 타입체크 + 린트를 실행합니다 (빌드는 하지 않음). - 프로젝트에서 Figma 파일을 코드와 동기화 상태로 유지한다면, 같은 작업에서 일치하는 프레임을 업데이트합니다.
종료 기준
- 가로 스크롤 없음, 이전과 비교하여 새로운 대비(contrast) 또는 axe 문제 없음.
- diff는 의도한 부분에서만 변경됨.
- 기존 컴포넌트를 중복하는 새 컴포넌트가 없고, 요청되지 않은 UI가 없음.
- 다크 모드 확인됨, 또는 프로젝트에 다크 모드가 없음을 확인.
- 타입체크와 린트 통과.
- 사용자에게 짧은 요약과 함께 확인할 만한 1-2개의 시트 경로를 제공.