From proposal-specialist
제안서 HTML 도표/차트/다이어그램 작성 시 공통 디자인 시스템을 적용합니다. HTML 컴포넌트 작성, 스타일 적용 시 사용합니다.
How this skill is triggered — by the user, by Claude, or both
Slash command
/proposal-specialist:html-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
제안서의 모든 도표, 차트, 다이어그램, 개념도는 HTML/CSS/JS로 작성한다.
제안서의 모든 도표, 차트, 다이어그램, 개념도는 HTML/CSS/JS로 작성한다. 이 스킬은 공통 CSS/JS 파일과 컴포넌트 템플릿을 제공한다.
generate-section 커맨드에서 섹션을 작성할 때, 도표와 도안은 섹션 HTML 파일 내에 인라인으로 작성한다.
별도 HTML 파일로 분리하거나 Chrome 스크린샷으로 이미지 변환하지 않는다.
<!-- 섹션 HTML (sections/01_제안사일반현황.html) -->
<link rel="stylesheet" href="../_common/page-frame.css">
<script src="../_common/page-frame.js"></script>
<div class="a4-page">
<h3>1.1 제안사 일반현황</h3>
<p>본문...</p>
<div class="table-title">표 1. 기업 개요</div>
<table><!-- 인라인 테이블 --></table>
<div class="table-title">그림 1. 사업 추진 체계</div>
<div class="flow-container"><!-- 인라인 도안 --></div>
</div>
PPTX 생성 파이프라인에서는 별도 HTML 파일을 만들어 Chrome headless로 고해상도 PNG 스크린샷을 캡처한 뒤 python-pptx로 삽입한다. 이 워크플로우는 PPTX 변환 시에만 사용한다.
--primary: #1B3A5C — 네이비 블루 (메인 컬러)--primary-light: #2E5C8A — 라이트 블루--accent: #0078D4 — 액센트 블루--accent-light: #E8F4FD — 연한 하늘색 배경--success: #2E7D32 — 그린 (긍정/완료)--warning: #F57C00 — 오렌지 (주의)--danger: #C62828 — 레드 (위험)'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif11pt, 표 내부: 10pt, 각주: 9pt'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif794px (96 DPI 기준)210mm x 297mm20px 40pxgenerate-common 명령이 실행 시 아래 파일을 _common/ 디렉토리에 복사한다:
_common/page-frame.css — 페이지 프레임 + 차트 컴포넌트 통합 스타일_common/page-frame.js — 헤더/푸터 자동 주입 + 오버플로 분할_common/common-config.json — 장별 시작 페이지 설정HTML 파일에서 참조:
<link rel="stylesheet" href="../_common/page-frame.css">
<script>
var PAGE_CONFIG = { badge:"II", title:"기술 방안", project:"사업명", section:"기술 방안", startPage:15, totalPages:80 };
</script>
<script src="../_common/page-frame.js"></script>
npx claudepluginhub astra-technology-company-limited/proposal-specialist --plugin proposal-specialistCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.