Effective HTML 스킬 6종 공개

Plannotator 팀이 공개한 Effective HTML은 코딩 에이전트가 마크다운 대신 자기 완결형 HTML 파일로 산출물을 내도록 설계된 오픈소스 스킬 모음이다. 모델에 충분한 컨텍스트를 제공하고, 사용자가 직접 조작해 볼 수 있는 'Fat artifacts + fat context' 방식을 지향한다.

6가지 스킬 구성

• html: 범용 요청을 받아 전문 스킬로 라우팅하는 허브 역할
• html-wireframe: 저충실도 와이어프레임을 생성해 구조와 정보 위계를 검토
• html-prototype: 실제 상호작용과 반응형 동작을 갖춘 프로토타입 생성
• html-plan: 계획, 로드맵, 구현 순서 등 문서형 산출물 검증
• html-diagram: 아키텍처, 시퀀스, 프로세스 등 다이어그램 생성
• design-artifact: 재사용 가능한 디자인 시스템을 강요하지 않고 주제에 맞는 창작 방향 제시

설계 철학 및 산출물 계약

이 프로젝트는 일관된 '외관(look)'보다 일관된 '주의(care)'를 강조하며, 기존 프로젝트의 디자인 시스템이 있으면 이를 우선 따르도록 한다. 산출물은 빌드 단계 없이 바로 열려야 하는 단일 .html 파일이어야 하며, 인라인 CSS/JS를 포함하고 네트워크 연결을 요구하지 않는 것이 기본 조건이다. 또한 시맨틱 HTML, 키보드 접근성, 모션 감소 설정 처리 등 접근성 요건을 충족해야 한다.

설치는 npx skills add plannotator/effective-html 명령으로 가능하며, Claude Code나 Codex 등 기존 에이전트 환경에 플러그인으로 통합해 사용할 수 있다.