From wrap-balancer
단일 제목·헤드라인(또는 몇 개의 제목 요소)에 wrap-balancer.js(react-wrap-balancer의 무의존성 바닐라 포트)를 CDN <script>로 주입해 줄바꿈을 균형 잡고, 한국어로 적용 전/후를 렌더링·스크린샷해 전/후 시각 변화와 전용 루브릭 평가 에이전트로 개선 여부를 채점하는 스킬. 사용자가 특정 제목·타이틀·히어로 카피의 줄바꿈을 '예쁘게/균형있게' 만들고 싶을 때, 마지막 줄에 단어 하나만 외롭게 떨어지는 고아(orphan)를 없애고 싶을 때, 한국어 제목이 단어 중간에서 끊기는 걸 고치고 싶을 때, 사이트에 wrap-balancer나 react-wrap-balancer를 붙이고 싶을 때, 한 제목의 적용 전/후 모습을 비교·평가하고 싶을 때 — 라이브러리 이름을 직접 말하지 않아도 — 적극적으로 사용한다. "제목 줄바꿈 예쁘게", "타이틀 밸런싱", "마지막 줄에 단어 하나만 떨어져", "헤드라인 균형", "wrap-balancer 적용", "text-wrap balance 줬는데 한국어가 단어 중간에서 끊겨" 같은 요청에 트리거된다. Also triggers in English for "balance the heading line wrapping", "fix the orphan word on the last line", "add wrap-balancer". 경계(이 스킬이 아님): 페이지나 슬라이드 덱 '전체'를 훑어 줄바꿈 문제를 전수로 찾아 감사·채점(scan/audit)하려는 경우는 linebreak-audit을 쓴다. text-align의 양쪽 정렬(justify), line-height(줄간격) 조정, 레이아웃 정렬, 번역은 이 스킬과 무관하다.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wrap-balancer:wrap-balancerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
이 스킬은 두 가지를 한 흐름으로 한다:
이 스킬은 두 가지를 한 흐름으로 한다:
wrap-balancer(react-wrap-balancer의 바닐라 포트)를 CDN
<script> 한 줄로 넣고, 제목 요소에 data-br-balance + 한국어 줄바꿈 CSS를 단다.밸런싱은 "줄 수를 늘리지 않으면서 각 줄 너비를 고르게, 마지막 줄 외톨이를 없애는" 것이 목표다. 줄바꿈이 눈에 띄게 바뀌는 것은 실패가 아니라 성공 신호다.
이 스킬 디렉터리(아래
SKILL_DIR)는.claude/skills/wrap-balancer/. 경로는 이 기준으로 읽는다.
단순 한 줄 제목, 본문 긴 문단은 대상이 아니다(효과 없음).
references/integration.md를 읽고 프로젝트 타입에 맞게 적용한다:
</body> 직전 / Next는 next/script).data-br-balance 부착.word-break: keep-all; overflow-wrap: anywhere;
(어절은 통으로 유지, 너무 긴 토큰만 예외적으로 끊어 넘침 방지). 누락하면 단어 중간이
끊겨 밸런싱 품질이 떨어진다.--width 360,480처럼 함께 넣어도 된다.python3 SKILL_DIR/scripts/make_harness.py \
--title "<한국어 제목1>" [--title "<한국어 제목2>" ...] \
--width <px>[,px2] --font-size <px> --line-height <lh> \
--out <WORKDIR>/harness
before.html(미적용) / after.html(밸런싱·JS 경로 고정) / compare.html(나란히) 생성.references/rendering.md의 방법으로 고정 뷰포트에서
[data-ready]를 기다린 뒤 before.png / after.png를 찍는다. 가능하면
scripts/measure_lines.js로 metrics.json(줄 수·줄별 너비)도 만든다 — 평가가 수치 근거를
갖게 된다.(A) 시각 변화 확인 — "무엇이 어떻게 바뀌었나"
before.png·after.png(있으면 metrics.json)를 직접 열어 줄 수·줄별 너비·마지막 줄
상태를 비교한다. Claude Code는 Read로 PNG를 그대로 볼 수 있으니 외부 도구나 플러그인이
필요 없다. 맥락을 분리하고 싶으면 Agent 도구로 "비교만 하는" 서브에이전트를 띄워도 된다
(불가하면 인라인). 이 단계의 목적은 합격 판정이 아니라 **전→후 시각 변화 목록(differences)**을
만드는 것이다.
inputs:
before: <WORKDIR>/harness/before.png
after: <WORKDIR>/harness/after.png
metrics: <WORKDIR>/harness/metrics.json # 있으면
task: 텍스트 밸런싱 적용 전→후의 줄바꿈 변화를 differences로 나열하라.
유사도가 아니라 "무엇이 바뀌었는지"가 관심사다.
(B) 전용 루브릭 평가 에이전트 — "개선됐나, 몇 점인가" (권위 있는 판정)
루브릭 기반 채점을 한다. 가능하면 Agent 도구로 별도 서브에이전트를 띄워 다음을 시킨다
(서브에이전트 스폰이 불가한 환경 — 중첩 호출 제한·Claude.ai 등 — 이면 인라인으로 동일
절차를 직접 수행한다):
SKILL_DIR/agents/balance-quality-evaluator.md와SKILL_DIR/references/balance-rubric.md를 Read로 읽고,<WORKDIR>/harness/before.png·after.png(있으면metrics.json)를 근거로 루브릭 §6 JSON 계약대로 평가 결과를 반환하라.
별도 에이전트로 띄우는 편이 좋은 이유: 평가자가 주입·렌더링 맥락에 오염되지 않고 루브릭만으로
독립적으로 판정하므로 더 공정하다. 결과 JSON은 <WORKDIR>/verdict.json으로 저장한다.
이 에이전트는 하드 게이트(줄 수 보존·넘침 없음·내용 보존)와 5개 채점 기준(고아 제거·줄 균형·
한국어 어절 보존·가독성·부작용)으로 0–100점과 verdict(improved/marginal/noop/regression)를
낸다. 이 verdict가 적용 유지/재적용/설정 변경을 결정하는 권위 있는 근거다.
verdict가 improved/noop → 적용을 유지. 끝.marginal/regression → 루브릭 §5의 조치(보통 word-break: keep-all 추가 또는
data-br-ratio="1")를 적용하고 Phase 2–3을 재실행한다. 합격선은 80점.| 시각 변화 확인 | balance-quality-evaluator (이 스킬) | |
|---|---|---|
| 묻는 것 | 두 이미지가 무엇이 다른가 | 후가 전보다 나아졌는가, 몇 점인가 |
| 점수 의미 | 별도 점수를 쓰지 않는다 | 밸런싱 품질(높을수록 좋음, 합격 80) |
| 한국어 특화 | 눈으로 변화 확인 | 어절 보존(keep-all)·고아·줄 균형을 1급 기준으로 |
| 쓰임 | differences[]로 변화 서술 | 합/불 판정(권위) |
둘은 보완 관계다. 시각 변화 확인으로 "무엇이 바뀌었는지" 서술하고, 루브릭 에이전트로 "그 변화가 개선인지" 판정한다.
SKILL_DIR/
├── SKILL.md # (이 파일) 오케스트레이션
├── assets/
│ └── wrap-balancer.min.js # 헤르메틱 렌더용 로컬 복사본(오프라인/CDN 차단 시도 대안)
├── scripts/
│ ├── make_harness.py # 전/후 한국어 비교 하니스 생성기
│ └── measure_lines.js # 페이지에서 줄 수·줄별 너비 측정(→ metrics.json)
├── references/
│ ├── integration.md # CDN 우선 주입 + 한국어 keep-all (프로젝트 타입별)
│ ├── rendering.md # 렌더/스크린샷/지표 수집 방법(도구별)
│ └── balance-rubric.md # 한국어 밸런싱 품질 루브릭(게이트·기준·판정)
└── agents/
└── balance-quality-evaluator.md # 루브릭으로 채점하는 전용 평가 에이전트
references/integration.mdreferences/rendering.mdreferences/balance-rubric.mdagents/balance-quality-evaluator.md를 읽혀 스폰<script>(jsDelivr). 오프라인/CSP 차단 환경은 사용자에게 알리고
assets/wrap-balancer.min.js 로컬 복사 방식을 제안.prefer-native="false"). 실제 주입은 기본
(네이티브 우선). 둘은 같은 균형 결과로 수렴한다.word-break: keep-all 누락이다 — 먼저 의심.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub mineru98/vanilla-wrap-balancer --plugin wrap-balancer