effective-html
무엇인가
effective-html은 코딩 에이전트가 HTML 산출물을 만들 때 적용할 충실도·구조·검증 기준을 스킬 파일로 주입하는 묶음이다. 와이어프레임, 인터랙티브 프로토타입, 계획 문서, 다이어그램처럼 긴 텍스트 대신 HTML로 의도를 보여주는 작업을 규율 대상으로 삼는다.
어떻게 동작하나
저장소는 선택적으로 설치하는 6개 스킬로 구성된다. 넓은 범위를 라우팅하는 html 스킬이 작업을 배분하고, design-artifact가 재사용 가능한 디자인 프로세스를, html-wireframe·html-prototype·계획·다이어그램 스킬이 각각 충실도와 동작을 담당한다. 규칙 본문은 SKILL.md 형식으로 두고 상세 지침은 필요한 지점에만 배치한다. 모든 산출물은 반응형·접근성·자기완결적이어야 하며 브라우저에서 검증하는 절차를 포함한다.
무엇과 다른가
프롬프트에 매번 시각 지침을 직접 쓰는 방식과 달리, 시각적 방향은 대화·프로젝트·청중·주제에서 나오게 하고 스킬은 재현 가능한 절차만 고정한다. design-artifact는 특정 룩을 지정하지 않고 프로세스만 제공하며, 와이어프레임은 의도적으로 미완성 상태로 남겨 리뷰어가 구조에 집중하게 한다. 프로토타입은 하나의 신뢰할 수 있는 흐름과 관련 상태만 구현하고, 계획 문서는 원문의 약속을 보존하며, 다이어그램은 설명할 관계에 맞는 시각 모델과 렌더링 방식을 고른다.
어떻게 쓰나
설치는 npx skills add plannotator/effective-html로 묶음을 한 번에 넣거나 --list, --skill 플래그로 개별 스킬을 고른다. Claude Code에서는 /plugin marketplace add plannotator/effective-html 뒤 /plugin install plannotator-effective-html@effective-html로 붙이고, Codex에서는 codex plugin marketplace add와 codex plugin add를 쓴다. 설치 없이 참조 문서로 먼저 읽는 사용도 허용된다.
전제와 한계
지원 대상은 Claude Code이며 README는 Codex 플러그인 경로도 함께 제시한다. 스킬 설치는 선택 사항이고, 브라우저 검증을 전제로 하므로 렌더링·주석·공유 링크 도구(Plannotator, tot 등)를 쓰려면 해당 도구가 별도로 필요하다. 모델·에이전트 버전별 동작 차이나 HTML 외 형식(PDF·이미지) 산출은 다루지 않는다.