| name | gemini-design-review |
| description | Gemini CLI를 활용한 HTML 디자인 리뷰 스킬. 생성된 HTML 파일을 Gemini에게 전달하여 시각 디자인 개선 지침을 받고, 메인 세션에서 CSS/HTML을 수정한다. gemini CLI 미설치 시 quiet pass. 트리거: "디자인 리뷰", "gemini review", "design review", "디자인 검토", "디자인 보완". |
Gemini Design Review
Overview
HTML 파일의 시각 디자인 품질을 Gemini CLI로 검토하고, 반환된 개선 지침을 메인 세션(Claude)이 직접 적용하는 스킬이다.
다른 스킬(예: yowu-create-slides)의 후처리 단계로 호출되거나, 사용자가 직접 호출할 수 있다.
핵심 원칙: gemini CLI가 없으면 아무 일도 하지 않는다 (quiet pass).
Input
이 스킬은 아래 정보를 필요로 한다:
| 파라미터 | 필수 | 설명 |
|---|
| HTML 파일 경로 | Yes | 리뷰 대상 HTML 파일의 절대 경로 |
| 디자인 경로 | No | 사용된 디자인 스타일 (예: "frontend-design", "자체 심플", "직접 제공"). Gemini에게 맥락을 전달하여 디자인 방향에 맞는 리뷰를 유도한다 |
| 보호 규칙 | No | 호출자가 지정하는 수정 금지 항목 (예: deck 엔진, 특정 폰트) |
호출 패턴:
- 다른 스킬에서 호출: 호출자가 파일 경로와 보호 규칙을 컨텍스트로 전달
- 사용자 직접 호출: 대화에서 HTML 파일 경로를 파악하거나 AskUserQuestion으로 확인
Workflow
Step 1: gemini CLI 설치 확인
command -v gemini
종료 코드가 0이 아니면 이 스킬 전체를 즉시 종료한다.
- 사용자에게 설치를 권유하지 않는다
- 에러 메시지를 표시하지 않는다
- 호출자에게
skipped 상태를 반환한다 (텍스트 출력: "Gemini CLI를 사용할 수 없어 디자인 리뷰를 건너뜁니다." 수준도 출력하지 않음)
Step 2: 리뷰 프롬프트 로드
이 스킬의 references/gemini-review-prompt.md 파일을 Read 도구로 읽는다.
파일이 없으면 quiet pass로 종료한다.
Step 3: Gemini 호출
아래 패턴으로 Bash 실행:
cat "{html-file-path}" | gemini -p "$(cat "{skill-references-dir}/gemini-review-prompt.md")
Design path used: {design-path}" -o text
- HTML 전문을 stdin으로 전달
- 리뷰 프롬프트를
-p 옵션으로 전달하며, 디자인 경로 정보를 프롬프트 끝에 추가
-o text로 plain text 출력- 디자인 경로가 전달되지 않은 경우
Design path used: 행을 생략
- 타임아웃: 120초
- 타임아웃 또는 에러 발생 시 quiet pass (기존 HTML 유지, 에러 미표시)
Step 4: 지침 적용
Gemini가 반환한 개선 지침을 그대로 Edit 도구로 CSS/HTML에 적용한다.
적용 원칙:
- Gemini의 지침을 있는 그대로 적용한다. Claude가 자체 판단으로 지침을 필터링하거나 추가 보정하지 않는다.
- 각 지침의 Target(셀렉터)을 HTML에서 찾아 Fix에 명시된 값을 정확히 반영한다.
- 지침에 없는 추가 개선을 임의로 수행하지 않는다.
호출자 보호 규칙만 예외:
호출자가 보호 규칙을 전달한 경우, 해당 규칙에 정확히 위배되는 지침만 제외한다.
예시:
엔진 보호: deck → .slide.on 토글·position:absolute 슬라이드·.deck·HUD(#hudBar/#hudMeta)·전환 JS 변경 지침 제외애니 보호: 의도된 모션 → .rv 등장·시퀀서·SVG 드로잉 제거 지침 제외 (타이밍/이징 보정만 허용)폰트 보호: NanumSquareNeo → 폰트 변경 지침만 제외콘텐츠 보호: 텍스트 원문 → Gemini가 제목·본문·노트 문구를 수정하라고 해도 무시. 시각 디자인만 적용구조 보호: 슬라이드 타입 클래스 → slide--{type} 클래스명 변경, <aside class="slide-notes"> 제거 지침 무시위계 보호: label/heading/desc 3단 구조 → label 제거, heading과 description 병합 지침 무시
보호 규칙에 해당하지 않는 모든 지침은 무조건 적용한다.
Step 5: 결과 보고
적용 완료 후 사용자에게 간략히 요약:
Gemini 디자인 리뷰 반영: {적용 항목 수}/{전체 지침 수}건 적용
- {적용한 항목 1줄 요약}
- {적용한 항목 1줄 요약}
...
적용된 항목이 0건이면: Gemini 디자인 리뷰 완료: 추가 개선 사항 없음
Quiet Pass 조건
아래 모든 경우에서 에러 없이 조용히 건너뛴다:
| 조건 | 동작 |
|---|
gemini CLI 미설치 | 즉시 종료, 메시지 없음 |
gemini-review-prompt.md 파일 없음 | 즉시 종료, 메시지 없음 |
| Gemini 호출 타임아웃 (120초 초과) | 기존 HTML 유지, 메시지 없음 |
| Gemini 호출 에러 (API 오류, 네트워크 등) | 기존 HTML 유지, 메시지 없음 |
| HTML 파일 경로가 유효하지 않음 | 즉시 종료, 메시지 없음 |
Anti-Patterns
- Claude가 Gemini 지침을 자체 판단으로 필터링하거나 추가 보정하지 않는다 -- 보호 규칙 위반 외에는 전부 적용
- 한 번에 전체
<style> 블럭을 교체하지 않는다 -- 개별 CSS 속성 단위로 Edit
- Gemini 설치를 사용자에게 권유하지 않는다
- 리뷰 실패를 에러로 취급하지 않는다 -- 이 스킬은 항상 "성공"으로 종료
Reference Files
references/gemini-review-prompt.md: Gemini에 전달하는 디자인 리뷰 프롬프트. 리뷰 기준 6가지, 출력 포맷(Target/Issue/Fix), 제약 조건 정의.
