디자인 시스템 준수 검사

무엇을 해주나

• Reticle MCP를 통해 실행 중인 화면의 computed style을 읽고, 프로젝트가 선언한 디자인 토큰 팔레트와 대조합니다.
• offTheme, colorTokens, backgroundTokens, tokenCount, themeScope 필드로 하드코딩된 #3b82f6 같은 색상, 팔레트 밖 배경을 잡아냅니다.
• 색상 외에도 occluded(오버레이에 가려짐), box가 0×0인 보이지 않는 요소, opacity/cursor로 본 진짜 비활성 상태를 점검합니다.
• reticle_animations로 실제로 실행되지 않은 애니메이션, 토큰과 다른 duration을 찾아냅니다.
• 모든 위반은 의견이 아니라 file:line 위치와 구체적 사실로 보고합니다.

이런 분께 추천

• 디자인 토큰/테마 시스템을 운영하지만 코드가 이를 따르는지 자동 확인하는 수단이 없는 팀
• 컴포넌트를 새로 만들거나 리스타일한 뒤 디자인 리뷰를 받고 싶은 프론트엔드 개발자
• "UI가 미묘하게 이상한데 이유를 말 못 하겠다"는 상황을 자주 겪는 디자이너·리뷰어

활용 예시

1. 다크 테마 적용 후 버튼 배경이 팔레트에 없는 색인지 확인 → offTheme: true와 --color-primary 실제 값 비교 리포트.
2. "DOM에는 있는데 안 보인다"는 모달 닫기 버튼을 inspect해 box가 0×0이거나 occluded임을 확인.
3. 새로 추가한 진입 애니메이션이 reticle_animations 결과에 아예 없어 실행되지 않았음을 확인.

주의: tokenCount가 0이면 앱에 팔레트 선언 자체가 없다는 뜻이므로 '통과'로 보고하면 안 됩니다. 접근성(대비, 포커스 순서, 스크린리더)은 이 스킬의 범위가 아닙니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/skills/design-system-compliance/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 reticlehq/reticle 의 skills/design-system-compliance 폴더를 내 ~/.claude/skills/design-system-compliance/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.