TL;DR

Effective HTML은 Claude Code와 Codex 같은 코딩 에이전트가 self-contained HTML wireframe, interactive prototype, plan, diagram을 만들도록 여섯 가지 agent skill을 제공하는 레포지토리입니다. 범용 `html` skill이 요청을 분류하고 전문 skill로 연결하며, 각 지침은 시각적 방향·레이아웃·상태·접근성·반응형 동작을 산출물 유형에 맞게 다룹니다. 설치하지 않고 참고 자료로 읽을 수도 있고 `npx skills add` 또는 Claude Code·Codex plugin 방식으로 재사용할 수도 있습니다. 에이전트에게 화면 구조나 구현 맥락을 HTML로 전달하고 싶다면 유용하지만, 일반적인 HTML 라이브러리나 실행 가능한 UI 프레임워크를 찾는 경우에는 목적이 다릅니다.

핵심 포인트

• 이 레포지토리는 독립 실행형 애플리케이션보다 HTML 산출물 제작을 위한 agent skill collection에 가깝습니다. Claude Code와 OpenAI Codex에 플러그인으로 연결할 수 있고, `npx skills add`로 재사용 가능한 작업 지침을 설치합니다. HTML wireframe, prototype, plan, diagram을 생성하는 코딩 에이전트 워크플로에 적합합니다.
• `html` skill이 넓은 HTML 요청을 분류한 뒤 `design-artifact`, `html-wireframe`, `html-prototype`, `html-plan`, `html-diagram` 중 알맞은 전문 skill로 작업을 연결합니다. 각 skill은 별도로 사용할 수 있으며, 창의적 방향과 구조·동작의 신뢰성을 분리하는 방식입니다. 여섯 가지 skill이 각각 보고서·랜딩 페이지·저충실도 화면·상호작용 흐름·로드맵·시스템 다이어그램을 담당합니다.
• 생성되는 결과물은 별도 설치 없이 참고 자료로 활용할 수 있고, 설치하면 에이전트의 반복 가능한 작업 지침으로 사용할 수 있습니다. README는 결과 HTML을 self-contained, responsive, accessible하게 만들고 브라우저에서 확인하도록 요구합니다. 실제 프로토타입은 현실적인 상태와 상호작용, keyboard support를 포함하는 한 가지 핵심 흐름에 집중합니다.
• 설치는 `npx skills add plannotator/effective-html` 한 줄로 시작하며 `--list`와 `--skill` 옵션으로 필요한 skill만 고를 수 있습니다. Claude Code에서는 marketplace 추가 후 `plannotator-effective-html@effective-html` 플러그인을 설치하고, Codex에서는 marketplace 등록 후 같은 계열의 plugin을 추가합니다. 완성한 HTML은 별도 Plannotator로 로컬 렌더링·주석 처리하거나 `tot`로 공유 링크를 만들 수 있습니다.