스톡 UI 감사
생성형 인터페이스와 스타터 키트 인터페이스는 비슷한 느낌을 공유합니다: 남색 또는 보랏빛 악센트, 보라-파랑 히어로 그라데이션, 모든 곳에 Inter 글꼴, 프로스티드 카드, 네비게이션의 이모지. 이 각각이 그 자체로 잘못된 것은 아닙니다. 문제는 제품에서 선택한 것이 아니라 템플릿에 포함된 선택이라는 점입니다. 이 스킬은 정적 스캐너로 그러한 선택들을 찾아낸 후, 판단을 통해 분류합니다. 스캐너는 후보군을 생성하고, 분류를 통해서만 실제 발견점이 만들어집니다.
이 스킬은 선택되지 않은 기본값을 제거합니다. 브랜드를 새로 만들지는 않습니다. 제품에 아직 시각적 방향이 없다면, 기본값을 다른 기본값으로 바꾸는 대신 그 사실을 말하고 방향을 요청하세요.
스캔 전에
- 브리프, 디자인 토큰, 테마 또는 컴포넌트 라이브러리 구성을 읽으세요. 제품이 요청한 모든 색상, 글꼴 및 컴포넌트를 기록하세요. 스캐너가 이를 표시하더라도 그대로 둡니다.
- 요청에서 모드를 결정하세요:
- Review: 발견점만 보고합니다. 아무것도 수정하지 않습니다.
- Cleanup: 확인된 발견점을 사용자가 지정한 영역(페이지, 컴포넌트 폴더, 전체 앱) 안에서만 수정합니다. 그 외 영역에서 발견한 내용은 수정하지 않고 보고합니다.
- 스캔 범위를 선택하세요: UI를 렌더링하는 소스 폴더만 선택하고, 전체 저장소는 선택하지 마세요.
스캐너 실행
bun <이 스킬의 디렉토리>/scripts/scan.mjs [--json] [--fail-on high|medium|low] <경로>...
Node 22 이상도 작동합니다. 디렉토리를 탐색하며 의존성, 빌드, 커버리지 출력물 및 축소된 파일은 건너뛰고 .html .css .scss .js .ts .jsx .tsx .vue .svelte .astro 파일을 읽습니다. 스캔된 파일 수를 출력합니다. 종료 코드 0은 실패 심각도(기본값 high)에 도달한 항목이 없음을, 1은 도달한 항목이 있음을, 2는 잘못된 사용법 또는 스캔된 파일이 0개임을 의미합니다. 2는 결코 깨끗한 결과가 아닙니다. 보랏빛 악센트, 단일 기본 글꼴, 이모지 아이콘이 실행을 실패하게 하려면 --fail-on medium을 전달하세요. 요청받지 않는 한 스캐너를 CI 게이트로 추가하지 마세요.
| 규칙 | 심각도 | 감지 대상 |
|---|---|---|
purple-blue-gradient | high | CSS 또는 Tailwind from-/to- 클래스에서 모든 색조가 차갑고 최소 하나가 보라색인 그라데이션 |
violet-accent | medium | 계산된 색조가 남색-보라 대역에 있는 모든 hex, rgb, hsl, oklch 또는 원시 HSL 토큰, 그리고 Tailwind indigo/violet/purple 클래스 |
gradient-text | medium | background-clip: text 및 bg-clip-text |
single-stock-font | medium | 하나의 기본 산세리프(Inter, Roboto, Poppins 등)만 스캔된 세트 내에서 두 개 이상의 선언에 걸쳐 유일하게 명명된 글꼴로 사용됨 |
emoji-icon | medium | 제목, 버튼, 링크, 네비게이션 항목 또는 icon/label/title 필드 내의 이모지 |
neon-glow | medium | 포화된 색상의 제로 오프셋, 넓은 블러 그림자 및 Tailwind 컬러 그림자 |
frosted-glass | low | backdrop-filter: blur() 및 backdrop-blur |
library-default-token | low | Bootstrap, Material, MUI, Ant Design, Chakra, shadcn/ui 및 Vite 스타터의 변경되지 않은 기본 프라이머리 |
tracked-caps | low | 넓은 자간의 대문자 텍스트 |
글꼴 규칙은 한 번의 실행에서 모든 파일을 살펴보므로, 전체 UI 범위를 함께 스캔하세요. 한 번에 하나의 파일을 스캔하면 숨겨집니다.
모든 일치 항목 분류
플래그가 지정된 각 줄을 열고 해당 요소의 용도를 파악하기 위해 충분한 주변 맥락을 읽으세요. 모든 일치 항목에 정확히 하나의 판정을 내리세요:
- 선택되지 않은 기본값: 브리프, 토큰 또는 히스토리에서 요청한 내용이 없으며, 스타터 템플릿처럼 보입니다. 이는 발견점입니다.
- 의도된 선택: 브리프, 토큰 파일, 브랜드 가이드 또는 커밋 메시지에서 누군가 선택했음을 보여줍니다. 유지하고 증거를 명시하세요.
- 오탐: 일치 항목이 규칙이 가정하는 대로 작동하지 않습니다. 예를 들어, 구문 강조 테마의 보라색 색조, 복잡한 콘텐츠 위의 모달 배경에 적용된 블러, 사용자 생성 샘플 데이터 내의 이모지 등이 있습니다. 그대로 두고 이유를 설명하세요.
- 미결: 누군가 선택했는지 여부를 알 수 없습니다. 발견점이 아니며 아무것도 변경하지 않습니다. 무엇이 누락되었고, 어떤 질문이 이를 해결할 수 있는지 보고하세요.
실제 문제 수정
- 줄이 아니라 원인을 수정하세요. 다섯 개의 violet hex 값은 일반적으로 하나의 누락된 악센트 토큰을 의미합니다. 제품의 팔레트와 글꼴을 한 번 정의하고 컴포넌트가 이를 가리키도록 하세요.
- 콘텐츠에 도움이 되는 대체 수단을 선택하세요: 유지되는 대비, 중요한 단일 작업을 표시하는 악센트, 읽기 부하에 적합한 글꼴.
- 색조를 몇 도 이동하거나 hex를 동등한
oklch()로 바꾸는 등 스캐너 범위를 벗어나기 위해 값을 미세 조정하지 마세요. 색상이 잘못되었으면 변경하고, 올바르면 유지하고 이유를 기록하세요. - 스캔을 통과시키기 위해 브랜드 색상, 상태 색상(성공, 경고, 오류) 또는 포커스 표시기를 절대 변경하지 마세요. 이러한 것들은 의미를 전달하므로 의도된 것으로 기록하세요.
- 이모지 아이콘을 프로젝트의 기존 아이콘 세트로 대체하세요. 사용자가 동의하는 경우에만 새 아이콘 의존성을 추가하세요.
스캐너가 감지할 수 없는 것
렌더링된 페이지를 읽어서 직접 확인하세요. 패턴 일치로는 찾을 수 없습니다:
- 모두 동일한 중앙 정렬 제목, 부제목 및 두 개의 버튼으로 구성된 모든 섹션
- 각 카드에 아이콘, 제목 및 텍스트 한 줄이 있는 세 개의 카드 특징 그리드
- 메인 제목 위에 있는 작은 배지 또는 알약
- 두꺼운 컬러 왼쪽 테두리로 표시된 카드
- 큰 숫자의 통계 배너 ("10k+ 사용자", "99.9% 가동 시간")
- 번호가 매겨진 "1, 2, 3" 단계 섹션
- 브리프가 요청한 라이트 옵션이 없이 강제된 다크 테마
- 모든 표면에 동일한 큰 모서리 반경과 부드러운 그림자
- 프로젝트의 스케일을 무시하는 간격 및 글꼴 크기
- 어떤 제품이든 설명할 수 있는 카피
검증
- 동일한 범위에서 스캐너를 다시 실행하고 각 남은 일치 항목에 기록된 판정이 있는지 확인하세요.
- 중요도가 높은 크기(좁은 휴대폰 너비와 데스크탑 너비 이상)로, 제품이 제공하는 모든 테마에서 렌더링된 UI를 살펴보세요.
- 깨끗한 스캔은 접근성, 레이아웃 또는 전반적인 품질에 대해 아무것도 말해주지 않습니다. 변경한 모든 항목의 대비와 포커스 상태를 확인하세요.
UI를 렌더링할 수 없었다면 검토가 정적 전용이었다고 말하세요.
보고서
다음 순서로 보고서를 작성하세요:
- 스캔 범위, 스캔된 파일 수, 모드 및 스캐너의 종료 코드.
- 수정된 발견점(또는 리뷰 모드에서는 제안된 발견점), 각각
파일:줄, 규칙 및 대체 수단을 포함. - 의도된 선택으로 유지된 일치 항목, 각각의 증거 포함.
- 미결 일치 항목, 각각 누락된 것과 이를 해결할 질문 포함.
- 오탐, 각각 한 줄의 이유 포함.
- 스캐너가 감지할 수 없는 문제(발견한 경우).
- 검증 방법: 재실행 결과, 확인한 크기 및 테마, 또는 "정적 전용".