Communitygithub.com

theme-review

사용자가 UI 테마, 디자인 토큰 또는 디자인이나 코드베이스의 시각적 일관성과 컴포넌트 재사용성을 테마에 대해 검토하거나 감사할 때만 사용합니다. 일반 코드 리뷰, UX 흐름 리뷰 또는 비UI 작업에는 사용하지 마십시오.

theme-review란 무엇인가요?

이 스킬은 프로젝트가 정의된 테마를 얼마나 잘 따르고 있는지 감사합니다. 테마 파일 자체의 건전성과 디자인 및 코드가 실제로 테마를 사용하는지 여부를 평가하여 순위가 매겨진 결과 목록과 제안된 테마 변경 사항 목록을 생성합니다. 검토자는 프로젝트의 기존 테마를 기반으로 작업하며 새로운 테마를 임의로 만들지 않습니다. Claude Code와 같은 AI 에이전트 플랫폼에서 사용하도록 설계되었으며, 테마 파일 검증, 코드 내 토큰 사용 스캔, 캔버스나 라이브 페이지의 구성 감사, 그리고 체크리스트 기반의 체계적인 평가를 수행합니다. 최종 보고서는 심각도별로 분류된 결과, 제안된 테마 변경 사항, 작동하는 부분 및 확인되지 않은 영역을 포함합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mrgnhnt96/ultrahand/tree/main/skills/theme-review

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

ultrahand: theme-review

프로젝트가 해당 테마를 얼마나 잘 따르고 있는지 감사합니다. 테마 파일 자체가 건전한지, 그리고 디자인과 코드가 실제로 테마를 사용하는지 확인합니다. 출력은 순위가 매겨진 결과 목록과 제안된 테마 변경 사항 목록입니다. 검토자는 프로젝트의 테마를 기반으로 구축하며, 새로운 테마를 만들지 않습니다. 테마의 공백은 새 팔레트가 아닌 theme 스킬이 추가할 제안 사항이 됩니다.

규칙은 shared/theme/rules.md(필수 규칙 NN-n, 창의적 축 CR-n, 진화 규칙 EV-n)에 있습니다. 모든 검사는 references/checklist.md에 있으며, 둘 다 shared/theme/sources.md를 인용합니다. 테마를 넘어선 UX 문제(흐름, 레이블, 플랫폼 규칙)는 review 스킬을 가리키십시오.

아래 스크립트는 ${CLAUDE_PLUGIN_ROOT}/shared/theme/에 있습니다.

1. 테마와 대상 가져오기

  • 테마: design/THEME.md와 토큰 파일(theme 스킬의 1단계처럼 검색)을 찾습니다. THEME.md의 성격, 잠긴 결정 사항, 컴포넌트 인벤토리 및 변경 로그를 읽습니다. 이것이 대상이 따라야 할 기준입니다.
  • 테마 없음: 임의로 만들지 마십시오. node scan.mjs <소스 디렉토리>를 실행하여 코드가 현재 사용하는 값을 표시하고, 필수 규칙에 대해서만 검토합니다. theme 스킬을 실행하여 테마를 추출하고, 보고서에 스캔의 주요 클러스터를 시작점으로 포함할 것을 권장합니다.
  • 대상: 코드(소스 폴더, diff 또는 PR), 캔버스 아티팩트 또는 스크린샷입니다. review와 마찬가지로 어떤 유형인지 명시하고 각 결과를 확인됨(코드, 토큰 파일 또는 캔버스에서 측정) 또는 가능성(이미지에서 판단)으로 표시합니다. diff의 경우 변경된 내용을 검토하고 추가된 표류를 기록합니다.

2. 검사 실행

  1. 테마 파일: node check.mjs design/theme.tokens.json --json을 실행합니다. 모든 오류는 결과입니다. 두 스킴에 대한 대비 테이블을 읽습니다.
  2. 코드 내 토큰 사용: node scan.mjs <소스 디렉토리> --theme design/theme.tokens.json을 실행합니다.
    • 토큰과 일치하는 원시 값: 테마 값의 하드코딩된 복사본입니다. 테마가 변경될 때 이 값들은 변경되지 않습니다 [HIG-COLOR] [PRIMER-LINT].
    • 토큰이 없는 값: 테마에서 벗어난 것입니다. 각각은 실수(가장 가까운 표시된 토큰으로 고정) 또는 실제 필요(토큰 제안)입니다.
    • 어떤 파일도 언급하지 않는 토큰: 사용되지 않을 수 있습니다. 제거를 제안하기 전에 확인하십시오. 스캔은 패턴으로 이름을 일치시킵니다.
    • 거의 중복된 색상 및 그리드에서 벗어난 간격: 라인별이 아닌 클러스터별로 하나의 결과입니다. 또한 코드에서 직접 사용된 원시 토큰(primitive. 또는 해당 플랫폼의 동등 표현)을 검색합니다. 이는 역할을 건너뜁니다(NN-1).
  3. 캔버스 또는 라이브 페이지에서: 검토 중인 요소의 계산된 스타일을 읽습니다. 구성 감사(shared/composition/audit.mjs, shared/input/drive.mjs를 통해 실행)는 섹션별 컨트롤 스타일, 유형 크기 및 간격을 보고하여 두 번째 버튼 스타일이나 잘못된 유형 크기를 즉시 보여줍니다.
  4. references/checklist.md의 패스를 따라 진행합니다: 테마 건강, 토큰 사용, 컴포넌트 재사용, 화면 간 일관성, 두 스킴 및 특성.

스크립트는 패턴을 찾지만 증명하지는 않습니다. 각 단서를 열고 결과가 되기 전에 확인하십시오.

3. 평가 및 보고

review와 동일한 0–4 척도(체크리스트의 심각도 가이드라인 참조)로 평가하고, 이 스킬의 체크리스트에 있는 기준을 사용합니다. 여러 곳에 있는 하나의 문제는 개수와 주요 위치가 포함된 하나의 결과입니다.

## 평결
<테마 버전 및 대상, 증거, 심각도별 개수, 가장 큰 표류 원인>

## 결과
### T1 · 3 주요 · <짧은 제목>
- **위치:** <파일:줄, 화면 › 요소 또는 토큰 경로>; ×<개수>
- **증거:** 확인됨 | 가능성
- **문제:** <무엇이 표류하는지, 그리고 그 비용: 사람들이 보는 불일치 또는 다음 테마 변경을 따르지 않을 값>
- **규칙:** <NN-n / EV-n / CR-n> [<소스 키>]
- **수정:** <구체적으로: "3곳에서 #8e3f27을 var(--color-primary)로 교체">

## 제안된 테마 변경 사항
<theme 스킬이 적용할 내용. 각각: 추가 / 사용 중단 / 잠금, 토큰 또는 결정, 별칭으로서의 값, 이유, 그리고 어떤 결과에 필요한지. 기존 토큰이 이미 다루는 것은 생략합니다.>

## 작동하는 부분
## 확인되지 않은 내용

수정 사항을 테마 내에서 유지합니다: 먼저 기존 토큰에 고정하고, 두 번째로 토큰을 제안하며, 필수 규칙을 위반하는 값을 절대 제안하지 마십시오. 코드 수정 사항을 적용하고 제안된 변경 사항에 대해 theme 스킬을 실행할 것을 제안합니다.

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

관련 스킬