그릴링(Grilling),
결정 트리를
HTML 폼으로.

TL;DR

무엇이 다른가

grill-with-docs는 채팅 안에서 결정을 내립니다. 이 스킬은 그 결정을 구조화된 HTML 폼으로 내보내, 나란히 비교하고 클립보드로 복사할 수 있게 합니다.

Live Sample

한 카드의 모양

실제 스킬이 생성하는 HTML 폼의 구성 요소입니다. 라디오 버튼을 클릭해 보세요.

패널 규칙

다섯 가지 패널

모든 결정 카드는 색상으로 구분된 패널을 사용합니다. 좌측 테두리 색상이 패널 종류를 나타냅니다.

검증 게이트

Mermaid 검증 — 렌더 실패가 사용자에게 도달하지 않음

HTML 파일을 쓰기 전에 모든 Mermaid 블록을 mmdc로 검증합니다. 실패하면 MERMAID-SAFE-SUBSET.md를 다시 읽고 수정한 뒤 재실행합니다. 모든 블록이 SVG를 출력할 때만 HTML을 확정합니다.

# 1) 초안 HTML을 임시 경로에 먼저 씁니다
DRAFT=/tmp/grill-decisions-draft.html

# 2) 모든 mermaid 블록 추출
python3 - <<'PY'
import re, os
src = open('/tmp/grill-decisions-draft.html').read()
blocks = re.findall(r'<div class="mermaid">\n(.*?)\n\s*</div>', src, re.DOTALL)
out = '/tmp/mermaid-validate'
os.makedirs(out, exist_ok=True)
for i, b in enumerate(blocks, 1):
    open(f'{out}/d{i:02d}.mmd', 'w').write(b.strip() + '\n')
print(f'extracted {len(blocks)} blocks')
PY

# 3) 각 블록 렌더링 — mmdc는 오류 시 비정상 종료
cd /tmp/mermaid-validate && for f in d*.mmd; do
  echo "=== $f ==="
  npx --yes -p @mermaid-js/mermaid-cli mmdc -q -i "$f" -o "${f%.mmd}.svg" 2>&1 \
    | grep -Ei 'error|syntax|parse|warn' | head -5
done

# 4) SVG 개수 = 추출 블록 개수 확인
ls /tmp/mermaid-validate/*.svg 2>&1 | wc -l   # 추출 수와 같아야 함

설치 + 트리거

설치

Node.js + npx가 필요합니다 (Mermaid 검증용). 첫 실행 시 @mermaid-js/mermaid-cli를 자동 설치합니다. grill-with-docs 스킬도 함께 필요합니다.

# 옵션 A — sparse 클론 (스킬만)
mkdir -p ~/.claude/skills/grill-with-docs-html
curl -sL https://github.com/cskwork/grill-with-docs-html/archive/main.tar.gz | \
  tar -xz --strip-components=2 -C ~/.claude/skills/grill-with-docs-html grill-with-docs-html-main/skill

# 옵션 B — 전체 클론 후 심볼릭 링크
git clone https://github.com/cskwork/grill-with-docs-html ~/code/grill-with-docs-html
ln -s ~/code/grill-with-docs-html/skill ~/.claude/skills/grill-with-docs-html

# grill-with-docs 가 없다면
git clone https://github.com/obra/grill-with-docs ~/.claude/skills/grill-with-docs

트리거 키워드

구조

grill-with-docs 와의 관계

이 스킬은 grill-with-docs를 대체하지 않고 보완합니다. 인터뷰 행동(CONTEXT.md 발견, ADR 제안, 용어 다듬기)은 상위 스킬을 그대로 재사용하고, 이 스킬의 파일들은 HTML 내보내기 레이어만 담당합니다.

파일 구성

파일 맵