와이어프레임, 프로토타입, 다이어그램 등 결과물을 HTML로 만들 때 참고할 수 있는 에이전트 스킬 모음입니다. html, design-artifact, html-wireframe, html-prototype, html-plan, html-diagram 여섯 개 스킬로 나뉘어 있는데, 예를 들어 wireframe 스킬은 일부러 저해상도로 미완성 느낌을 유지해서 리뷰어가 디테일이 아니라 구조에 집중하게 만들고, prototype 스킬은 실제 동작하는 하나의 플로우와 관련 상태들을 구현하는 식으로 스킬마다 역할이 명확히 나뉘어 있는 점이 인상적이었습니다.
npx skills add plannotator/effective-html로 전체 설치가 가능하고, --skill html-diagram처럼 필요한 스킬만 골라 설치할 수도 있어서 프로젝트 성격에 맞게 가볍게 가져다 쓰기 좋아 보입니다. 저는 이 스킬을 활용해서 이번 지피터스 종합사례글 발표자료도 HTML로 만들어봤는데, 확실히 구조 잡기가 한결 수월했습니다.
HTML로 보고서·설명자료·아키텍처 다이어그램까지 만들어야 하는 작업이 잦으신 분들은 한 번쯤 살펴보시길 추천드립니다!