web-design-idioms
Installation
SKILL.md
Web Design Idioms — 웹 디자인 관용
web-pack-curator가 웹 스타일을 팩으로 증류할 때 따르는, 웹 매체 고유의 지식.
웹이 PPT와 다른 점
- 가변 뷰포트. 모바일~데스크탑. 콘텐츠 최대 폭과 브레이크포인트,
clamp()타이포를 지시한다. - 컴포넌트 단위 구성. 헤더 / 히어로 / 섹션 / 카드 / 폼 / 푸터. 슬라이드가 아니라 스크롤 흐름.
- 인터랙션이 스타일의 일부. 호버·스크롤·전환 모션의 성격(없음/절제/스내피/장난스러움)이 정체성.
- 접근성. 본문 대비 WCAG AA(4.5:1) 이상. 다크/저대비 팩도 텍스트 가독은 지킨다.
컴포넌트 위계
팩의 prompt.md는 최소 이 컴포넌트들에 대한 지시를 담는다:
- 헤더/네비 — 고정 여부, 로고·메뉴 배치, 배경 처리.
- 히어로 — 제목 타이포 스케일, 레이아웃(중앙/좌측/분할), 배경·이미지 처리.
- 섹션/콘텐츠 블록 — 섹션 간 수직 리듬, 콘텐츠 폭.
- 카드 — 보더·모서리·그림자·호버.
- 푸터 — 밀도, 색 반전 여부.