docs-renderer
Visual Artist. Converts Markdown to beautiful HTML and PDF with Themes, LaTeX, and Mermaid support. Triggers: "render pdf", "export html", "generate docs output", "usar tema oscuro".
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
Docs Renderer (The Artist)
"Separation of Content and Presentation."
Este skill se encarga de que tu documentación se vea increíble. Toma Markdown crudo (con matemáticas, diagramas y links) y lo convierte en documentos profesionales.
🎨 Características Clave
1. Sistema de Temas (Themes)
Separa el contenido del estilo.
- Modern: Tipografía sans-serif limpia (Inter/Roboto), espaciado generoso.
- Classic: Serif (Merriweather), estilo académico/libro.
- Dark: Tema de alto contraste para lectura en pantalla.
- Technical: Estilo denso, mono-spaced para documentación de API.
2. Soporte Rico (Rich Media)
-
Math: Renderizado LaTeX via KaTeX (
$E=mc^2$). - Diagrams: Renderizado Mermaid.js nativo con soporte de temas variables (colores, curvas).
-
WikiLinks: Resolución de enlaces
[[WikiLink]]a anclas HTML.
3. Formatos de Salida
- HTML: Un solo archivo (o sitio estático) autocontenido.
- PDF: Impresión de alta fidelidad via Puppeteer.
4. Theme Gallery
View visual examples of all themes
Uso
Comando Principal
# Ejecutar via Docker wrapper
./skills/docs-renderer/bin/render.sh <input> <output> [options]
Opciones
-
--theme <name>: modern, classic, dark, technical. -
--format <fmt>: pdf, html (default: pdf). -
--title <text>: Título del documento.
Patrones de Implementación
Markdown-it Stack
El corazón del renderizado usa markdown-it con plugins:
-
markdown-it-texmath(LaTeX) -
markdown-it-wikilinks(Obsidian links) -
markdown-it-container(Callouts/Admonitions) -
markdown-it-anchor(Permalinks)
Isolation
Todo corre dentro de un contenedor Docker para garantizar que las fuentes y herramientas de renderizado (Puppeteer/Chromium) sean idénticas en desarrollo y CI.
Configuración de Temas
Los temas viven en assets/themes/. Un tema se compone de:
- CSS: Estilos para el HTML.
- Mermaid Config: JSON con configuración de colores para diagramas.
Comportamiento del Agente
-
Selección de Tema: Si el usuario no especifica, usa
modern. - Validación: Verifica que el input exista.
- Feedback: Reporta la ruta absoluta del archivo generado.
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-03-11
- Index updated
- 2026-03-11
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!