answer-me-with-html
무엇인가
Answer me with HTML은 AI 에이전트의 답변 출력 형식을 바꾸는 스킬이다. 에이전트가 결론·요약·비교를 낼 때 텍스트 대신 읽을 수 있는 HTML 문서 한 장을 산출물로 붙인다. 코딩 에이전트에 설치되는 플러그인 계열에 속하며, 답변 자체의 내용이 아니라 답변이 전달되는 매체를 담당한다.
어떻게 동작하나
동작은 두 단계다. 에이전트가 먼저 짧은 Markdown 초안을 쓰고, 그것을 스킬에 포함된 CLI에 넘긴다. CLI가 초안을 HTML 페이지로 렌더링하며 약 50ms가 걸린다. 결과물은 `~/.answer-me-with-html/pages/`에 저장된다. 페이지 우상단 버튼은 테마와 라이트/다크 모드를 전환하고, 답글을 수집하고, 페이지를 만든 Markdown을 복사한다. 영상 모드에서는 같은 초안에 비트별 나레이션 한 줄을 더해 `am video`로 플레이어 페이지를 만든다. 음성은 페이지 안에 들어 있어 오프라인에서 재생되고, 챕터 스트립·배속 버튼·브라우저 인코딩 내보내기 버튼을 갖는다.
무엇과 다른가
모델에게 HTML을 직접 쓰게 하는 방식과의 차이는 토큰량이다. 손으로 쓴 9개 페이지는 평균 4,893토큰이었고, 같은 질문에 이 스킬을 쓰면 평균 612토큰으로 약 1/8이다. 비용 절감은 약 15%로 글자량보다 작은데, 매 턴 시스템 프롬프트와 질문, 대화를 함께 읽기 때문이다. Archify는 JSON 스펙에서 인터랙티브 다이어그램 하나를 만들고, dsh-genui 같은 GenUI 플러그인은 채팅 앱 안에 컴포넌트를 표시한다. 이 스킬은 텍스트·표·코드·다이어그램을 포함한 질문 전체를 한 페이지로 답하며, 셸 명령을 실행할 수 있는 에이전트면 어디서든 동작한다.
어떻게 쓰나
설치는 에이전트에게 INSTALL.md를 읽고 따르라고 지시하는 방식이 권장된다. `npx -y skills add QingYunA/answer-me-with-html -g -y -a claude-code`처럼 설치 대상 에이전트를 지정할 수도 있고, `skills/answer-me-with-html` 폴더를 에이전트의 스킬 폴더에 직접 복사해도 된다. 설정은 슬래시 명령으로 바꾸며 `open`, `theme`, `mode`, `style`, `update_check`, `close_after_reply`, `voice` 항목이 있다. always-on 모드를 켜면 결론·요약·계획·비교가 나올 때마다 2~4개 패널짜리 작은 페이지가 답변 끝에 경로로 붙는다.
전제와 한계
Node.js 20 이상이 필요하고 npm install 단계는 없다. always-on 모드는 기본적으로 꺼져 있으며 규칙 파일에 규칙 한 줄을 넣어 켠다. 영상은 요청할 때만 만들고, `--mp4` 내보내기는 ffmpeg를 요구한다. `--webm`은 페이지가 브라우저에서 직접 인코딩하므로 ffmpeg가 필요 없다. 페이지는 `~/.answer-me-with-html/`에 쌓이며 `am clean`으로 지운다. Claude Code는 plan 모드에서 페이지를 만들지 않는다.