클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

HTML로 답하기 (Answer me with HTML)

복잡한 질문의 답변을 한 장짜리 시각 HTML 설명 페이지로 자동 변환해 주는 스킬.

유틸리티중급★ 2,038⑂ 138AI 점수 10/10마지막 업데이트: 2026. 10. 7.

무엇을 해주나

  • 모델이 짧은 마크다운 초안만 작성하면, 동봉된 am CLI가 레이아웃·색상·다크모드·다이어그램 좌표까지 전부 계산해 한 페이지짜리 HTML 설명서를 만들어 줍니다.
  • 정보의 '형태'에 맞는 컴포넌트를 고르도록 선택표를 제공합니다: 흐름도(flow), 시퀀스(sequence), 트리(tree), 타임라인(timeline), 수치 한계(limits), 핵심 결론 박스(callout), 의사결정 질문(ask) 등.
  • 프로젝트의 실제 코드를 src=/lines=로 인용하거나 diff 블록을 넣을 수 있어, 모델이 코드를 지어내지 않습니다.
  • STE(통제된 기술 문체) 검사로 문장 길이, 수동태, 상투어 등을 경고해 글을 다듬어 줍니다.
  • 이미 만든 페이지의 한 패널만 am patch로 교체할 수 있습니다.

이런 분께 추천

  • 아키텍처·요청 흐름·상태 머신처럼 "그림이 있어야 이해되는" 설명을 자주 주고받는 개발자
  • 기술 리뷰, 원인 분석, 선택지 비교 결과를 팀에 공유해야 하는 리드·PM
  • 글보다 한 장 요약이 편한 모든 사용자 (직군·스택 무관)

활용 예시

  1. "우리 서비스 로그인 요청이 Nginx → API → DB까지 어떻게 흐르는지 설명해줘" → 흐름도 + 단계 설명 패널이 담긴 HTML 생성.
  2. "Postgres vs MySQL vs SQLite, 우리 상황에서 뭘 써야 해?" → 3축 비교 표 + 결론 callout + 결정 질문(ask) 페이지.
  3. "이 PR이 폴더 구조를 어떻게 바꾸는지 정리해줘" → tree에 +/-/~ 변경 표시가 붙고 Before/After 전환이 가능한 페이지.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/QingYunA/answer-me-with-html/HEAD/skills/answer-me-with-html/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 QingYunA/answer-me-with-html 의 skills/answer-me-with-html 폴더를 내 ~/.claude/skills/answer-me-with-html/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html && mkdir -p ~/.claude/skills && cp -r /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. Node.js 20 이상이 설치돼 있는지 확인합니다: node -v
  2. 저장소를 내려받습니다: git clone https://github.com/QingYunA/answer-me-with-html.git
  3. 스킬 폴더를 Claude 스킬 디렉터리로 복사합니다: mkdir -p ~/.claude/skills && cp -r answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/
  4. Claude Code를 재시작한 뒤 /skills 또는 스킬 목록에서 answer-me-with-html이 보이는지 확인합니다.
  5. "HTTPS 핸드셰이크 과정 그림으로 설명해줘"처럼 설명을 요청해 보고, 출력 끝에 나오는 file:///...html 링크를 열어 봅니다.
  6. (선택) 모든 답변에 페이지를 붙이려면 CLAUDE.md에 always-on 규칙을 추가하고, 설정 변경은 config, 오래된 페이지 정리는 clean 인자를 사용하세요.
GitHub에서 원본 보기 ↗라이선스: MIT