splatstudio

Habilidad Página de Documentación

Genera una página de documentación de tres columnas en un solo archivo HTML.

Flujo de trabajo

1. Lee el DESIGN.md activo (inyectado arriba). Usa el token de tipo cuerpo para prosa; el token mono para código; respeta las reglas de altura de línea y ancho máximo.
2. Elige un tema del brief: la página debe parecerse a documentación real, no a un wireframe genérico. Nombres de API concretos, ejemplos de comandos, parámetros plausibles.
3. Distribuye tres regiones, expresadas en el eje en línea para que el diseño se ajuste correctamente bajo dir="rtl":
   • Navegación al inicio en línea (240–280 píxeles, fija): lista de enlaces agrupados, página actual en negrita con una franja decorativa en el borde inline-start. De 3 a 5 grupos de 4 a 8 enlaces.
   • Cuerpo del artículo (ancho máximo ~720 px, centrado en la columna central): H1, párrafo introductorio, secciones H2, bloques de código, cuadros de aviso (nota / advertencia), enlaces en línea, listas.
   • Tabla de contenidos al final en línea (200–240 px, fija): "En esta página" con los anclajes H2/H3, sección actual resaltada al desplazarse.
4. Escribe un único documento HTML:
   • Desde <!doctype html> hasta </html>, todo el CSS en línea.
   • CSS Grid para las tres columnas; posicionamiento fijo para los carriles.
   • Bloques de código: token mono, relleno de superficie suave, botón de copia (solo visual, no necesita JavaScript).
   • ID de anclaje en cada H2/H3 para que funcionen los enlaces de la TOC.
   • data-od-id en la navegación, el artículo y la TOC.
5. Prosa: escribe al menos 350 palabras de documentación creíble. Incluye al menos un comando de terminal, un fragmento de código (de 5 a 15 líneas), un cuadro de aviso y una tabla.
6. Autocomprobación:
   • El texto del cuerpo se ajusta al punto óptimo de longitud de línea del DS (60–75 caracteres).
   • El código usa el token mono del DS, no el genérico monospace.
   • El acento es discreto: se usa para el elemento de navegación activo, los enlaces y el borde de un cuadro de aviso. No en el texto del cuerpo.
   • La página es legible a 1280 px de ancho y se colapsa correctamente por debajo de 900 px (la TOC desaparece, la navegación se convierte en un cajón superior).
   • Usa CSS lógico (margin-inline-start, border-inline-start, inset-inline-end, text-align: start) en los carriles y la franja decorativa para que el diseño se ajuste correctamente bajo dir="rtl".

Contrato de salida

Emitir entre etiquetas <artifact>:

<artifact identifier="slug-de-docs" type="text/html" title="Documentos — Título de página">
<!doctype html>
<html>...</html>
</artifact>

Una frase antes del artefacto, nada después.