Codifica el formato de diapositivas, la barra de progreso basada en niveles, las reglas de navegación y la estructura de secciones para una presentación HTML de un solo archivo.
npx clawhub@latest install presentation-structureLa habilidad Presentation Structure le otorga a un agente de IA un conocimiento profundo de cómo se construye y mantiene una presentación HTML de un único archivo (presentation/index.html). Abarca el formato de numeración data-slide de las diapositivas, el sistema de barra de recorrido de 4 niveles, la navegación por teclado y táctil, las convenciones de los divisores de sección y las reglas para renumerar diapositivas de forma segura tras realizar ediciones. Instala esta habilidad cuando quieras que un agente lea, modifique o genere diapositivas que se ajusten a la arquitectura de esta presentación sin romper la navegación ni la barra de progreso por nivel.
data-slide y cada referencia goToSlide() en el índice de contenidos.section-slide correcta, el atributo data-level y el texto de section-desc.goToSlide() que no coincidan.presentation/index.html.La habilidad codifica los tres tipos de diapositivas — diapositivas regulares, diapositivas de sección de transición de nivel y la diapositiva de título — junto con los atributos HTML requeridos (data-slide, data-level, clases CSS). El agente sabe qué atributos son obligatorios, cuáles son opcionales y qué elementos (como .level-badge) no deben estar codificados de forma fija en el HTML.
En lugar de un porcentaje acumulativo, la presentación utiliza cuatro niveles discretos (low, medium, high, pro) asignados a un relleno de barra del 25 / 50 / 75 / 100%. La habilidad Presentation Structure captura exactamente qué rangos de diapositivas activan cada nivel, qué diapositivas heredan el nivel anterior, y que la barra está oculta en la diapositiva 1 y vacía antes de la primera transición data-level.
Después de cualquier edición estructural, el agente debe renumerar todos los atributos data-slide secuencialmente desde 1, actualizar cada llamada goToSlide() en la diapositiva de TOC/Mapa de Recorrido, y verificar que no existan huecos ni duplicados. La habilidad Presentation Structure documenta que totalSlides se calcula automáticamente a partir del DOM y no requiere actualización manual.
La habilidad cubre la función goToSlide(n) utilizada en los enlaces del índice de contenidos, el valor totalSlides calculado automáticamente y los métodos de entrada admitidos: teclas de flecha, barra espaciadora y deslizamiento táctil. Esto permite al agente validar que los enlaces del índice de contenidos permanezcan coherentes tras la renumeración.
Los divisores de sección siguen un formato preciso: clase section-slide, atributo opcional data-level, un párrafo section-number, un título <h1> y un párrafo section-desc que indica el nivel. La habilidad Presentation Structure hace que el agente conozca el marcado completo esperado, de modo que las secciones recién generadas sean inmediatamente válidas.
Un usuario pide al agente que inserte una nueva sección "Parte 7" después de la diapositiva 46. La habilidad Presentation Structure indica al agente que cree un div section-slide con el siguiente número data-slide secuencial, añada el data-level correspondiente, renumere todas las diapositivas posteriores y actualice cada llamada goToSlide() en la diapositiva del índice.
El agente analiza presentation/index.html en busca de saltos o valores data-slide duplicados, y comprueba cada llamada goToSlide() con los números de diapositiva reales, notificando cualquier discrepancia — una tarea totalmente compatible con las reglas de renumeración codificadas en esta habilidad de Presentation Structure.
Un usuario desea un resumen de qué diapositivas pertenecen a cada nivel del recorrido. El agente utiliza la tabla de transiciones de niveles en la skill de Presentation Structure para producir un mapeo preciso de rangos de diapositivas, valores data-level y porcentajes de relleno de barra correspondientes, sin necesidad de leer el archivo HTML completo.
Cuando se le pide estructurar una nueva diapositiva, el agente utiliza las plantillas HTML exactas de esta habilidad de Presentation Structure — seleccionando la clase correcta (title-slide, section-slide o slide simple), colocando los atributos correctos y sabiendo que debe omitir .level-badge del HTML fuente, ya que es inyectado por JavaScript en tiempo de ejecución.
npx clawhub@latest install presentation-structurenpx clawhub@latest install presentation-structureInicia sesión para escribir una reseña
Aún no hay reseñas. ¡Sé el primero en compartir tu experiencia!