HTML 문서 및 페이지
생성하는 결과물
하나의 자급자족 .html 파일입니다. 전달된 모든 파일을 ~/.opencode/html/<slug>.html에 저장하며, 수정본도 포함합니다. 필요시 mkdir -p ~/.opencode/html 명령으로 디렉터리를 생성하세요. 출력물을 저장소, 데스크톱 또는 임시 디렉터리 여기저기에 흩뿌리지 마십시오.
파일은 디스크에서 열리며 오프라인에서 작동합니다. CSS, JavaScript, 이미지 및 다이어그램을 내장하세요. 외부 자산, 네트워크 요청, 빌드 단계 또는 패키지 설치는 사용하지 마십시오.
이 스킬은 표준 스타일시트와 간단한 출력 규칙을 제공합니다. 컴포넌트 카탈로그는 시작점일 뿐, 에이전트가 표현할 수 있는 것을 제한하지 않습니다.
빠른 경로: 작성 → 표시 → 반복
- 소스와
components/shell.html을 읽습니다. - 콘텐츠에 필요한 컴포넌트만 읽습니다.
- 스타일시트 플레이스홀더와 함께 파일을 작성합니다.
- 플레이스홀더를
styles/base.css의 내용 그대로 대체합니다. 필요시 스킨을 추가합니다. execute도구를 통해tools.browser.preview로 파일을 표시합니다.
먼저 유용한 문서를 작성하십시오. 단순한 페이지를 검증 프로젝트로 만들지 마십시오. 문제가 보이면 수정합니다. 별도 버전이 요청되지 않는 한 동일한 파일을 수정합니다.
구성 및 확장
- 적합할 때 컴포넌트 마크업을 재사용하십시오. 기존
c-클래스를 유지하여 스타일시트가 계속 적용되도록 하십시오. .c-wrap,.c-section,.c-stack,.c-grid,.c-split,.c-rail,.c-card를 사용하여 레이아웃을 구성하십시오.- 카탈로그가 작업을 다루지 못할 때 마크업, CSS, 인라인 SVG 또는 바닐라 JavaScript를 추가하십시오.
- 사용자 정의 스타일에는
--c-*토큰을 선호하십시오. 재정의는 표준 스타일시트 뒤에 두십시오. style="--v: 62%"와 같이 막대 채우기에 사용자 정의 속성을 일상적인 조정에 사용하십시오.
사용자 정의 코드 줄 제한은 없습니다. 확장은 작업이 허용하는 한 간단하게 유지하십시오. 단지 하나의 문서를 완성하기 위해 이 스킬을 편집하거나 공유 컴포넌트를 추가하지 마십시오.
스타일시트: 교체 가능한 디자인 언어
| 파일 | 역할 |
|---|---|
styles/base.css | 완전한 기본 디자인 언어. 마커: /* html-skill: standalone */. |
styles/editorial.css | 스킨: 따뜻한 종이, 세리프 읽기. 마커: /* html-skill: skin */. |
규칙:
- 선택한 스타일시트를
<head>의<style>태그 사이에 그대로 붙여넣으십시오. 문서별 재정의는 붙여넣은 사본을 편집하는 대신 그 뒤에 두십시오. - standalone 스타일시트는 단독으로 사용됩니다. skin은
base.css뒤에 붙여넣어집니다. 스킨은 토큰과 선택적 규칙만 재정의하며 마크업은 동일하게 유지됩니다. - 스킨을 전환해도 마크업 변경이 필요하지 않아야 합니다. 확장은 고유한 마크업과 클래스를 추가할 수 있습니다.
- 디자인 언어를 추가하려면:
styles/editorial.css를 복사하고 먼저 토큰(--c-bg,--c-ink,--c-accent,--c-font-*,--c-radius-*,--c-measure)을 재정의한 다음, 여전히 잘못 보이는 부분을 수정하십시오. 모든 규칙을 실제로 대체하지 않는 한skin마커를 부여하고, 대체한다면standalone을 부여하십시오.
문서 구조
components/shell.html에서 시작하십시오. 다음 출력 규칙을 따르십시오:
- 정확히 하나의
<h1>이 있으며<title>과 일치합니다; <title>과<meta name="description">은 문서가 무엇인지 설명합니다;<meta name="color-scheme" content="light dark">와 첫 페인트 전 테마 스크립트가<head>에 있어야 합니다 — 그렇지 않으면 페이지가 깜빡입니다;<main id="main">로 건너뛰기 링크;- 섹션은
<section class="c-section" id="…">이며, id는 안정적이고 사람이 읽을 수 있습니다; - 내비게이션에 도움이 될 때 TOC(
components/navigation.html)를 포함하며 모든 링크 대상이 존재해야 합니다; - 인쇄 전용 유인물이 아닌 경우 테마 토글 버튼과 푸터를 포함합니다.
콘텐츠 규칙
- 제목 수준은 구조를 나타냅니다. 크기를 위해 수준을 선택하지 마십시오.
- 긴 문서의 경우 각
h2/h3에 앵커 링크(.c-hlink)를 제공하십시오. - 산문은 사용자의 작성 선호도를 따릅니다. 평이하고, 직접적이며, 단락당 하나의 아이디어입니다. 불필요한 내용과 과장 형용사를 제거하십시오.
<pre>내부의<,>,&는 이스케이프 처리하십시오.- 테이블에는
<thead>가 필요하며, 숫자는.c-num으로 오른쪽 정렬합니다. - 모든
<img>에는alt가 있어야 합니다. 증거 이미지에는.c-figure캡션을 추가하십시오. - 파일 이름: 짧고, 설명적이며, 하이픈으로 연결 —
production-finalization.html,commits-2026-09-22.html,api-settings-explainer.html.
JavaScript
테마, 인쇄, 복사, 내비게이션, 대화상자, 필터, 탭 및 모션을 위한 컴포넌트 블록을 재사용하십시오. 문서가 사용하는 기능만 포함하십시오.
사용자 정의 바닐라 JavaScript는 허용됩니다. 인라인 및 오프라인으로 유지하십시오. 프레임워크를 추가하거나 데이터를 가져오지 마십시오. 필수 콘텐츠는 JavaScript 없이도 읽을 수 있어야 합니다.
모션 및 접근성
prefers-reduced-motion은base.css에서 존중됩니다; 애니메이션을 수행하는 JS도 이를 확인해야 합니다(카운터 블록이 패턴을 보여줍니다).- 랜드마크(
header,nav,main,footer)와 모든nav에aria-label. - 포커스 상태는 스타일시트에서 제공됩니다; 아웃라인을 제거하지 마십시오.
- 모바일 우선으로 디자인하십시오. 360px 너비에서 페이지에 가로 스크롤바가 없어야 합니다.
.c-table-wrap, 코드 블록, diff, 터미널 및.c-tabs-nav만 내부 스크롤이 허용됩니다(overflow-x: auto는 스타일시트에서 제공됩니다). - 팝업(
.c-drop-body, 미니레일 TOC, 툴팁)은calc(100vw - 2rem)내에 유지됩니다. 터치 대상은 각 방향으로 최소 24px입니다. - 모든
<table>을.c-table-wrap으로 감싸십시오. 고정 열이 필요하지 않은 경우 일반.c-grid(auto-fit)을 선호하십시오.
다이어그램
.c-shot 프레임(components/media.html)에 인라인 SVG를 포함하거나 data:image/svg+xml;base64, URI로 포함하십시오. PNG 이미지에는 data:image/png;base64,를 사용하십시오. 별도의 이미지 파일에 링크하지 마십시오.
가벼운 검토
파일을 한 번 표시하십시오. 명백한 레이아웃이나 콘텐츠 문제를 수정하십시오. 기본적으로 검사기, 스크린샷 매트릭스 또는 반복 감사를 실행하지 마십시오. 사용자가 요청하거나 특정 문제를 진단해야 할 때 대상 검사를 사용하십시오.
python3 <skill-dir>/scripts/check.py FILE.html은 마크업, 클래스, 제목, 앵커, 코드 이스케이프 및 일부 자산 참조에 대한 선택적 진단 도구입니다. 이는 전달 게이트나 오프라인 동작 또는 접근성 증명이 아닙니다.
사용자가 명시적으로 포함을 요청하지 않는 한 비밀 및 개인 정보를 보관하지 마십시오. 미리보기를 열 수 없는 경우 파일 경로를 제공하고 렌더링이 확인되지 않았음을 명시하십시오.
파일
| 경로 | 내용 |
|---|---|
styles/base.css | 표준 스타일시트: 토큰, 테마, 리셋, 모든 컴포넌트. |
styles/editorial.css | 스킨: 세리프, 따뜻한 종이. |
components/shell.html | 뼈대, 헤더, 푸터, 테마, 인쇄. |
components/layout.html | 컨테이너, 그리드, 영역, 카드. |
components/reading.html | 제목, 산문, 인용구, 콜아웃, 평결, 각주. |
components/evidence.html | 코드 블록, diff, 터미널, 칩, 복사 JS. |
components/data.html | 테이블, 통계, 막대, 측정기, 타임라인, 비교. |
components/navigation.html | TOC, 레일, 이동 경로, 페이지 매김, 스크롤 스파이 JS. |
components/interaction.html | 아코디언, 대화상자, 툴팁, 드롭다운, 필터, 탭. |
components/forms.html | 필드, 선택, 버튼, 유효성 검사 상태. |
components/media.html | 그림, 스크린샷, 다이어그램, 임베드. |
components/motion.html | 나타내기, 카운터, 마키, 슬라이드 데크. |
specimen.html | 모든 컴포넌트가 렌더링된 — 시각적 참조. |
scripts/check.py | 선택적 마크업 진단. |