https://github.com/cskwork/grill-with-docs-html
Default HTML-form variant of grill-with-docs: interactive decision form with FACTS, trade-offs, WHY panels, and mmdc-validated Before/After Mermaid diagrams.
https://github.com/cskwork/grill-with-docs-html
architecture-review claude-code claude-skill claude-skills grilling mermaid
Last synced: 18 days ago
JSON representation
Default HTML-form variant of grill-with-docs: interactive decision form with FACTS, trade-offs, WHY panels, and mmdc-validated Before/After Mermaid diagrams.
- Host: GitHub
- URL: https://github.com/cskwork/grill-with-docs-html
- Owner: cskwork
- License: mit
- Created: 2026-05-27T02:01:02.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2026-05-27T04:41:23.000Z (22 days ago)
- Last Synced: 2026-05-27T06:07:18.599Z (22 days ago)
- Topics: architecture-review, claude-code, claude-skill, claude-skills, grilling, mermaid
- Size: 32.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# grill-with-docs-html
`grill-with-docs`의 기본(default) HTML 폼 출력 변형 스킬입니다.
같은 Socratic 인터뷰로 플랜을 검증하면서, 결정 트리를 언제나 인터랙티브 HTML 폼으로 내보냅니다.
## 랜딩 페이지 (Landing page)
[https://cskwork.github.io/grill-with-docs-html/](https://cskwork.github.io/grill-with-docs-html/)
## 이 스킬이 하는 일
- CONTEXT.md / ADR 기반 Socratic 인터뷰로 플랜·후보를 검증합니다 (grill-with-docs와 동일)
- 후보별 **FACTS 패널** — 파일 경로 + 라인 번호, 실제 상수·SQL·DTO 목록, 마찰 신호
- **결정 카드** — 선택지마다 한 줄 trade-off, 권장 옵션 사전 선택, **WHY 패널** (녹색)
- **Before / After Mermaid 다이어그램** 나란히 배치 (mmdc 검증 필수)
- **SIDE EFFECTS 패널** (노란색) — 추가할 CONTEXT.md 용어, ADR 후보, 하위 테스트·계약 영향
- **스티키 하단 바** — "결정 텍스트 생성" + "클립보드로 복사" 버튼, 구조화 마크다운 생성
## grill-with-docs 와의 관계
이 스킬은 `grill-with-docs`를 대체하지 않고 보완합니다.
인터뷰 행동(CONTEXT.md 발견, ADR 제안, 용어 다듬기)은 `grill-with-docs`를 그대로 재사용하고,
이 스킬의 파일들은 HTML 내보내기 레이어만 담당합니다.
`grill-with-docs/SKILL.md`는 이 스킬을 기본 동작으로 가리킵니다.
## 설치
```bash
# 옵션 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` 스킬도 함께 필요합니다:
```bash
# grill-with-docs 가 없다면
git clone https://github.com/obra/grill-with-docs ~/.claude/skills/grill-with-docs
```
## 사용 트리거
| 언어 | 키워드 |
|------|--------|
| 한국어 | "그릴링", "디자인 결정", "결정 폼", "후보 그릴링" |
| English | "grilling", "design decision", "decision form", "grill candidates" |
## 요구사항
- **Node.js + npx** — Mermaid 다이어그램 검증에 사용 (`@mermaid-js/mermaid-cli`). 첫 실행 시 `npx` 가 자동으로 설치합니다.
- `gh` CLI (선택) — 스킬 업데이트 확인 목적.
## 파일 구성
| 파일 | 역할 |
|------|------|
| `skill/SKILL.md` | 스킬 진입점 — 인터뷰 순서, HTML 내보내기 조건, skip 규칙 |
| `skill/HTML-FORM.md` | 자체 완결 HTML 폼 템플릿 (Tailwind CDN, Mermaid CDN, Pretendard 폰트) |
| `skill/MERMAID-SAFE-SUBSET.md` | mmdc 렌더링 안전 부분집합 — 금지 패턴 목록 및 허용 문법 |
| `skill/VALIDATION.md` | Mermaid 블록 추출·검증 스니펫 (mmdc 파이프라인) |
| `docs/index.html` | 랜딩 페이지 (GitHub Pages 제공) |
## 예시 출력
스크린샷은 `screenshots/` 디렉토리가 추가되면 확인할 수 있습니다.
## 라이선스 (License)
MIT — see [LICENSE](LICENSE).