문서 페이지 스킬 (Docs Page Skill)

문서 페이지 스킬

단일 HTML 파일로 된 세 컬럼 문서 페이지를 생성합니다.

작업 흐름

1. 활성화된 DESIGN.md를 읽습니다 (위에 주입됨). 본문에는 바디 타입 토큰을, 코드에는 모노 토큰을 사용하며, 줄 높이와 최대 너비 규칙을 준수합니다.
2. 브리프에서 주제를 선택합니다 — 페이지는 일반적인 와이어프레임이 아닌 실제 문서처럼 보여야 합니다. 구체적인 API 이름, 명령어 예제, 그럴듯한 매개변수를 포함합니다.
3. 세 영역을 배치합니다. 인라인 축으로 표현하여 dir="rtl" 아래에서 레이아웃이 올바르게 전환되도록 합니다:
   • 인라인 시작 탐색(240–280px, sticky): 그룹화된 링크 목록, 현재 페이지는 굵게 표시하고 inline-start 가장자리 강조 줄무늬를 추가합니다. 3–5개 그룹, 각 그룹에 4–8개 링크.
   • 문서 본문(최대 너비 ~720px, 중간 컬럼에 중앙 정렬): H1, 리드 단락, H2 섹션, 코드 블록, 콜아웃 박스(참고/경고), 인라인 링크, 목록.
   • 인라인 끝 목차(200–240px, sticky): "이 페이지에서"와 H2/H3 앵커 목록, 사용자가 스크롤할 때 현재 섹션 강조.
4. 단일 HTML 문서를 작성합니다:
   • <!doctype html>부터 </html>까지, 모든 CSS는 인라인.
   • 세 컬럼을 위한 CSS Grid; 사이드 레일에는 sticky 포지셔닝 사용.
   • 코드 블록: 고정폭 토큰, 부드러운 표면 채우기, 복사 버튼 모양(시각적 전용 — JS 불필요).
   • 모든 H2/H3에 앵커 ID를 추가하여 TOC 링크가 작동하도록 합니다.
   • 탐색, 문서, TOC에 data-od-id 속성을 추가합니다.
5. 문서 작성: 최소 350단어 이상의 그럴듯한 문서를 작성합니다. 최소 하나의 셸 명령어, 하나의 코드 스니펫(5–15줄), 하나의 콜아웃, 하나의 표를 포함합니다.
6. 자체 점검:
   • 본문 텍스트는 디자인 시스템의 줄 길이 적정 지점(60–75자)에서 줄바꿈됩니다.
   • 코드는 디자인 시스템의 모노 토큰을 사용하며, 일반 monospace를 사용하지 않습니다.
   • 강조는 절제되어야 합니다 — 활성 탐색 항목, 링크, 하나의 콜아웃 테두리에만 사용합니다. 본문 텍스트에는 사용하지 않습니다.
   • 페이지는 1280w에서 읽을 수 있어야 하며, 900w 이하에서는 우아하게 축소됩니다(TOC는 사라지고 탐색은 상단 서랍이 됩니다).
   • 사이드 레일과 강조 줄무늬에 논리적 CSS(margin-inline-start, border-inline-start, inset-inline-end, text-align: start)를 사용하여 dir="rtl" 아래에서 레이아웃이 올바르게 전환되도록 합니다.

출력 규약

<artifact> 태그 사이에 출력합니다:

<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>

아티팩트 앞에 한 문장, 뒤에는 아무것도 없습니다.