Documentos y páginas HTML

¿Qué hace Documentos y páginas HTML?

Lo que produces

Un archivo .html autónomo. Guarda cada archivo entregado en ~/.opencode/html/<slug>.html, incluyendo revisiones. Crea el directorio con mkdir -p ~/.opencode/html si es necesario. No disperses la salida por el repositorio, Escritorio o directorios temporales.

El archivo se abre desde el disco y funciona sin conexión. Incrusta CSS, JavaScript, imágenes y diagramas. No uses activos externos, solicitudes de red, paso de compilación ni instalaciones de paquetes.

Esta habilidad proporciona una hoja de estilo estándar y reglas de salida simples. El catálogo de componentes es un punto de partida, no un límite sobre lo que el agente puede representar.

Ruta rápida: escribir → mostrar → iterar

1. Lee la fuente y components/shell.html.
2. Lee solo los componentes necesarios para el contenido.
3. Escribe el archivo con un marcador de posición de hoja de estilo.
4. Reemplaza el marcador de posición con styles/base.css textualmente. Añade una piel si es útil.
5. Muestra el archivo con tools.browser.preview a través de la herramienta execute.

Escribe primero el documento útil. No conviertas una página simple en un proyecto de validación. Corrige los problemas visibles cuando aparezcan. Revisa el mismo archivo a menos que se solicite una versión separada.

Componer y extender

• Reutiliza el marcado de componentes cuando encaje. Conserva las clases c- existentes para que la hoja de estilo siga funcionando.
• Compón diseños con .c-wrap, .c-section, .c-stack, .c-grid, .c-split, .c-rail y .c-card.
• Añade marcado, CSS, SVG en línea o JavaScript vainilla cuando el catálogo no cubra la tarea.
• Prefiere los tokens --c-* para estilos personalizados. Mantén las anulaciones después de la hoja de estilo estándar.
• Usa propiedades personalizadas para ajustes rutinarios, como style="--v: 62%" en un relleno de barra.

No hay límite de líneas para código personalizado. Mantén las extensiones tan simples como lo permita la tarea. No edites la habilidad ni añadas un componente compartido solo para terminar un documento.

Hojas de estilo: lenguajes de diseño intercambiables

Archivo	Rol
styles/base.css	Lenguaje de diseño predeterminado completo. Marcador: /* html-skill: standalone */.
styles/editorial.css	Piel: papel cálido, serifa de lectura. Marcador: /* html-skill: skin */.

Reglas:

• Pega la hoja de estilo elegida textualmente entre las etiquetas <style> en <head>. Coloca las anulaciones específicas del documento después de ella en lugar de editar la copia pegada.
• Una hoja de estilo independiente se usa sola. Una piel se pega después de base.css — las pieles anulan solo tokens y reglas selectivas; el marcado permanece idéntico.
• Cambiar una piel no debería requerir cambios en el marcado. Las extensiones pueden añadir su propio marcado y clases.
• Para añadir un lenguaje de diseño: copia styles/editorial.css, anula primero los tokens (--c-bg, --c-ink, --c-accent, --c-font-*, --c-radius-*, --c-measure), luego corrige lo que aún se vea mal. Dale el marcador skin a menos que realmente reemplace cada regla, entonces standalone.

Anatomía del documento

Empieza desde components/shell.html. Sigue estas reglas de salida:

• exactamente un <h1>, y coincide con el <title>;
• <title> y <meta name="description"> indican qué es el documento;
• <meta name="color-scheme" content="light dark"> y el script de tema antes del renderizado en <head> — antes del primer pintado, o la página parpadea;
• enlace de salto a <main id="main">;
• las secciones son <section class="c-section" id="…">; los ids son estables y legibles;
• un TOC (components/navigation.html) cuando ayuda a la navegación, con cada destino de enlace presente;
• botón de cambio de tema y pie de página, a menos que el formato sea un folleto solo para imprimir.

Reglas de contenido

• Los niveles de encabezado llevan estructura. Nunca elijas un nivel por su tamaño.
• Para documentos largos, asigna a cada h2/h3 un enlace de anclaje (.c-hlink).
• La prosa sigue las preferencias de escritura del usuario. Clara, directa, una idea por párrafo. Elimina relleno y adjetivos promocionales.
• Escapa <, >, & dentro de cada <pre>.
• Las tablas necesitan <thead>, y los números se alinean a la derecha con .c-num.
• Cada <img> tiene alt. Las imágenes de evidencia obtienen un pie de foto .c-figure.
• Nombre de archivo: corto, descriptivo, con guiones — production-finalization.html, commits-2026-09-22.html, api-settings-explainer.html.

JavaScript

Reutiliza los bloques de componentes para tema, impresión, copia, navegación, diálogos, filtros, pestañas y movimiento. Incluye solo las características que el documento utiliza.

Se permite JavaScript vainilla personalizado. Mantenlo en línea y sin conexión. No añadas frameworks ni obtengas datos. El contenido esencial debe permanecer legible sin JavaScript.

Movimiento y accesibilidad

• prefers-reduced-motion es respetado por base.css; el JS que anima debe verificarlo también (el bloque contador muestra el patrón).
• Hitos (header, nav, main, footer) y aria-label en cada nav.
• Los estados de enfoque provienen de la hoja de estilo; nunca elimines contornos.
• Diseño mobile-first. A 360px de ancho la página no tiene barra de desplazamiento horizontal. Solo .c-table-wrap, bloques de código, diffs, terminales y .c-tabs-nav pueden desplazarse internamente (overflow-x: auto proviene de la hoja de estilo).
• Los popups (.c-drop-body, miniraíl TOC, tooltips) permanecen dentro de calc(100vw - 2rem). Los objetivos táctiles tienen al menos 24px en cada dimensión.
• Envuelve cada <table> en .c-table-wrap. Prefiere .c-grid simple (auto-ajuste) a menos que se requieran columnas fijas.

Diagramas

Incrusta SVG en línea en un marco .c-shot (components/media.html) o como una URI data:image/svg+xml;base64,. Usa data:image/png;base64, para imágenes PNG. No enlaces archivos de imagen separados.

Revisión ligera

Muestra el archivo una vez. Corrige problemas obvios de diseño o contenido. No ejecutes un verificador, matriz de capturas de pantalla o auditoría repetida por defecto. Usa comprobaciones específicas cuando el usuario lo solicite o se necesite diagnosticar un problema concreto.

python3 <skill-dir>/scripts/check.py FILE.html es un diagnóstico opcional para marcado, clases, encabezados, anclajes, escape de código y algunas referencias de activos. No es una puerta de entrega ni una prueba de comportamiento sin conexión o accesibilidad.

Mantén secretos e información privada fuera a menos que el usuario solicite explícitamente su inclusión. Si la previsualización no puede abrirse, proporciona la ruta del archivo e indica que no se pudo verificar el renderizado.

Archivos

Ruta	Contenido
styles/base.css	Hoja de estilo canónica: tokens, tema, reinicio, todos los componentes.
styles/editorial.css	Piel: serifa, papel cálido.
components/shell.html	Esqueleto, encabezado, pie de página, tema, impresión.
components/layout.html	Contenedores, cuadrículas, regiones, tarjetas.
components/reading.html	Encabezados, prosa, citas, llamados, veredictos, notas al pie.
components/evidence.html	Bloques de código, diffs, terminales, chips, JS de copia.
components/data.html	Tablas, estadísticas, barras, medidores, líneas de tiempo, comparaciones.
components/navigation.html	TOC, raíl, migas de pan, paginador, JS de scroll-spy.
components/interaction.html	Acordeón, diálogo, tooltip, desplegable, filtro, pestañas.
components/forms.html	Campos, opciones, botones, estados de validación.
components/media.html	Figuras, capturas de pantalla, diagramas, incrustaciones.
components/motion.html	Revelaciones, contadores, marquesina, diapositivas.
specimen.html	Cada componente renderizado — la referencia visual.
scripts/check.py	Diagnóstico de marcado opcional.