메뉴
하네스의 모든 HTML 산출물(문서·가이드·랜딩·리포트·데모 등)을 일관된 디자인 시스템으로 작성·갱신하는 범용 스킬. anti-ai-slop 하드 게이트 + theme-factory(색·폰트)·frontend-design(레이아웃 방향) 디자인 검토 + 1000px 반응형 + 임베드(SPA) 안전 + 실측 검증을 기본 탑재. HTML을 "예쁘게/그럴듯하게" 만들 때 발동. 릴리스 시 carve-workflow-guide.html 갱신은 §7 특수 모드(이 리포 전용).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | carve-guide |
| description | 하네스의 모든 HTML 산출물(문서·가이드·랜딩·리포트·데모 등)을 일관된 디자인 시스템으로 작성·갱신하는 범용 스킬. anti-ai-slop 하드 게이트 + theme-factory(색·폰트)·frontend-design(레이아웃 방향) 디자인 검토 + 1000px 반응형 + 임베드(SPA) 안전 + 실측 검증을 기본 탑재. HTML을 "예쁘게/그럴듯하게" 만들 때 발동. 릴리스 시 carve-workflow-guide.html 갱신은 §7 특수 모드(이 리포 전용). |
| disable-model-invocation | true |
harness의 모든 HTML 산출물을 검증된 디자인 시스템 + 제약으로 만든다. run-ai.kr 게시(임베드)·GitHub Pages 호스팅을 전제로 한다. v0.0.13부터 하네스 번들에 포함 — 소비자도 §0~6(범용 HTML 작성)을 쓴다. §7(릴리스 인벤토리 갱신)만 이 리포 전용이다.
carve-workflow-guide.html 실측 갱신 (§6 특수 모드)HTML 착수 전 아래를 순서대로 검토·발동한다. 방향은 풍부하게 뽑되, 실행은 anti-slop 안에서.
anti-ai-slop (하드 게이트 · 항상 · 필수) — 시각 작업 전 먼저 발동. 금지 목록(그라데이션·글로우·색그림자·blur≥20·장식 모션·이모지 불릿·카드 상단 컬러바·마케팅 상투어)은 예외 없음. 최종 산출물은 이 게이트를 통과해야 한다.theme-factory (색·폰트 방향) — 10개 프리셋(또는 즉석 생성)에서 문서 성격에 맞는 팔레트·폰트 페어링을 능동 선택(기술문서=차분/무채색+청록, 랜딩=대비 강한 단색, 교육=따뜻한 중립 등). 단 anti-slop이 이긴다: 테마의 다색·그라데이션은 버리고 무채색 베이스 + 액센트 1색 + 폰트 페어링만 취한다.frontend-design 플러그인 (레이아웃·타이포 방향) — 템플릿 기본값(Inter/system-ui 수렴, 밋밋한 카드 나열)을 피할 의도적 레이아웃·위계·타이포 방향 탐색에 쓴다. anti-slop 금지 목록과 충돌하면 금지 목록이 이긴다.규칙 순위:
anti-ai-slop(하드) >theme-factory·frontend-design(방향 제안). 디자인 요소는 이 셋을 적극 조합해 풍부하게, 그러나 게이트 위반은 0.
정본 CSS 시작점: docs/html/carve-workflow-guide.html의 <style> 블록을 복사 기반으로 쓴다(검증된 anti-slop 통과본). 핵심 토큰·컴포넌트:
Pretendard(한/영/숫자 정합), 코드·수치 JetBrains Mono. theme-factory가 다른 페어링을 제안하면 그 이유를 CSS 주석 한 줄로 남기고 교체 가능(단 system-ui 기본 수렴 금지).--ink/--surface/--border) + 액센트 1색(기본 teal #0F766E, theme-factory 선택색으로 교체 가능). 색은 의미(위계·상태·판정)에만.1px solid border + 여백. 그림자는 중성 회색 1단계 또는 없음..callout(accent/warn/good), .mono-panel(고정폭 요약), table(1px border), .doc-meta(3열 메타), nav.toc(2열 목차). 필요한 것만 가져오고 안 쓰는 규칙은 제거(죽은 CSS 금지).<style>) — 임베드 CSP style-src 'unsafe-inline'만 허용, 외부 CSS 링크는 차단될 수 있다.!important 고정run-ai.kr는 이 HTML을 <iframe srcdoc="…">로 감싸고 <head> 최상단에 .wrap{max-width:80%!important;margin-left:0!important}를 주입한다. 파일 .wrap은 소스 순서상 뒤라 !important로 그 주입을 이긴다(같은 specificity는 뒤 규칙 승 — 실측: computed max-width=1000px). 따라서:
.wrap { max-width: 1000px !important; margin: 0 auto !important; padding: 64px 32px 96px; }
@media print { .wrap { padding: 0; max-width: none !important; } }
@media (max-width: 640px) { .wrap { padding: 32px 18px 64px; } } /* 좁으면 자연 축소(반응형) */
<body> 끝에 필수)내부 앵커가 URL 해시를 바꾸면 호스트 SPA(React) 라우터가 오작동(CORS fetch·크래시). 외부 링크는 마크다운/호스트가 target="_blank"를 지울 수 있다. 둘 다 JS로 처리:
<script>
document.querySelectorAll('a[href^="#"]').forEach(function (a) { // 내부 앵커: 해시 미변경 스크롤
a.addEventListener('click', function (e) {
e.preventDefault(); // 항상 — 빈("#")·미존재 ID라도 해시 변경 차단(SPA 크래시 방지)
var id = this.getAttribute('href').slice(1);
var el = id && document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
document.querySelectorAll('a.ext').forEach(function (a) { // 외부 링크: 새 탭 강제
a.addEventListener('click', function (e) { e.preventDefault(); window.open(a.href, '_blank', 'noopener'); });
});
</script>
외부/새 창 링크에는 class="ext" + GitHub Pages 절대 URL을 쓴다(상대경로는 소스로 뜨거나 안 열림).
gradient·backdrop-filter/blur(·@keyframes/animation:·색 box-shadow·이모지 = 모두 0..wrap{max-width:80%!important} 주입을 앞에 넣고 렌더 → getComputedStyle(.wrap).maxWidth === '1000px' 확인.대상 HTML 덮어쓰기. 커밋·푸시·PR은 명시 요청 시에만.
carve-workflow-guide.html 릴리스 갱신기능 출시마다 개요 가이드를 실측으로 다시 채운다.
ls .claude/hooks/*.sh | wc -l # 훅
ls .claude/commands/*.md | wc -l # 커맨드
ls .claude/agents/*.md | wc -l # 에이전트
ls .claude/skills | wc -l # 스킬 (carve-guide 포함 — v0.0.13부터 배포)
find .claude/rules -name '*.md' | wc -l # 규칙
ls .claude/workflows | wc -l # 워크플로
bash .claude/hooks/tests/run-all.sh 2>&1 | grep -oE '[0-9]+ passed' | awk '{s+=$1}END{print s}' # 테스트
carve-guide 포함.CHANGELOG.md 최신 5~8 버전을 표로. 헤더 버전 = VERSION 값.https://github.com/claude-code-expert/carve-harness 고정.class="ext" + Pages 절대 URL(…/docs/html/harness-demo/index.html).docs/html/carve-workflow-guide.html 덮어쓰기.정합 축(한 곳 고치면 전부): 인벤토리 수치는 이 HTML · README.md · README.en.md · GUIDE.md · CHANGELOG.md 공유.
anti-ai-slop(하드 게이트) > theme-factory·frontend-design(방향). 게이트 위반 0이 완료 기준..wrap 폭은 !important로 고정(임베드 호스트 주입을 이김), @media print는 none !important.preventDefault+scrollIntoView(해시 미변경), 외부 링크는 a.ext+window.open — SPA 임베드 호환.되돌릴 수 없는 결정(ADR)과 그 근거를 시간순으로 specs/DECISIONS.md에 append-only 기록한다. 아키텍처·의존성·API 계약 변경 시 사용. 주의 — 이건 결정 로그이지 릴리스 버전 이력이 아니다(VERSION·CHANGELOG.md 갱신은 version-changelog 스킬).
개발이 스펙대로 됐는지 구현 주장 항목을 코드 대조로 0~100 채점하고, 95점 미만은 되먹여 재작업하는 검증 루프를 돈다. carve-verify-loop 워크플로가 없거나(타 에이전트·일반 세션) 손으로 돌릴 때 사용.
프로젝트를 전수 분석(스택+코드베이스)해 ① CLAUDE.md·AGENTS.md 설정 정합성을 검증·제안하고 ② 스택에 필요한데 없는 요소(하네스 규칙·외부 개발도구·설정 스캐폴딩)를 보강 제안하며 ③ 불필요한 구성을 prune한다. FIX/ADD/KEEP/PRUNE 통합 제안표 → 1회 확인 → 적용 → evaluator 독립 평가표. 전체 설치 후 프로젝트에 맞게 맞춤화할 때 사용.
이미지·HTML·SVG·슬라이드·PDF 등 시각 산출물과 문서·리포트·카피 글쓰기를 생성·수정하기 전 반드시 발동한다. 그라데이션·글로우·장식 모션 등 AI 특유의 조악한(slop) 디자인을 차단하고, 상투어·균질 구조·불릿 남발 등 AI 티가 나는 글쓰기 흔적을 제거한다. 정보 위계·여백·타이포·근거·절제로 시니어 실무자가 만든 수준의 고급 산출물을 만드는 품질 게이트. 무언가를 "예쁘게" 또는 "그럴듯하게" 만들려는 순간마다 이 게이트를 통과시킨다.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
릴리스 버전이 바뀔 때 VERSION·CHANGELOG.md·README 버전 이력을 함께 갱신한다. 버전 업/릴리스 준비 시 반드시 사용 — VERSION만 바꾸면 pre-commit이 커밋을 차단한다.