ckm:slides

Descripción general

¿Qué es ckm:slides?

ckm:slides es una skill de IA para diseñar decks de diapositivas HTML completos y estratégicos. En lugar de devolver un conjunto suelto de viñetas, guía al agente para producir una estructura de presentación coherente y lista para el navegador usando:

• Chart.js para visualizaciones de datos
• Design tokens para temas visuales coherentes
• Diseños responsivos para distintos dispositivos
• Fórmulas de copywriting para mensajes persuasivos
• Estrategias de diapositivas probadas para tipos de decks habituales

La skill está optimizada para crear presentaciones de marketing, pitch decks, informes para stakeholders y demos de producto donde importan tanto la historia como la estructura.

¿Para quién es ckm:slides?

ckm:slides encaja bien si:

• Creas decks de diapositivas para marketing, ventas, fundraising o reporting
• Prefieres presentaciones en HTML/JavaScript en lugar de archivos PowerPoint tradicionales
• Quieres patrones de maquetación y plantillas reutilizables en vez de partir de una diapositiva en blanco
• Necesitas estructuras narrativas claras (p. ej., YC seed deck, sales pitch, QBR) integradas en tu proceso

Desarrolladores, product marketers, founders y equipos de analytics pueden usar esta skill para pasar de “tema + número deseado de diapositivas” a un plan de presentación HTML estructurado.

¿Qué problemas resuelve?

ckm:slides te ayuda a evitar:

• Decks desorganizados sin un arco narrativo claro
• Diseños y tipografía inconsistentes entre diapositivas
• Copys débiles y genéricos que no persuaden
• Tener que conectar manualmente gráficos Chart.js en cada nueva presentación

Al combinar patrones de maquetación, fórmulas de copywriting y una plantilla HTML lista para usar, la skill le da al agente todo lo necesario para planificar un buen deck y generar HTML listo para implementar.

¿Cuándo no es buena opción ckm:slides?

Probablemente ckm:slides no sea ideal si:

• Necesitas archivos nativos de PowerPoint o Keynote en lugar de HTML
• No trabajas con front‑end o no puedes alojar assets HTML/JS
• Solo necesitas una diapositiva puntual y no un deck completo

En esos casos, puede ser más adecuado un generador de diapositivas más sencillo basado solo en texto o una herramienta que exporte .pptx.

Cómo usarla

Instalación y configuración

Para añadir la skill de slides desde el repositorio nextlevelbuilder/ui-ux-pro-max-skill a tu entorno de agente, instálala con:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides
``

Después de la instalación:

1. Abre `SKILL.md` en `.claude/skills/slides` para entender el comportamiento general y los argumentos.
2. Revisa la carpeta `references/` para ver los patrones y plantillas en los que se basa la skill:
   - `references/layout-patterns.md`
   - `references/html-template.md`
   - `references/copywriting-formulas.md`
   - `references/slide-strategies.md`
   - `references/create.md`

No se requiere ningún paso de build adicional para la propia skill; se ejecuta como parte de tu entorno de agente existente. Eso sí, necesitarás una forma de servir o abrir el HTML generado (por ejemplo, guardarlo en un archivo y abrirlo en un navegador).

### Patrón básico de invocación
La skill espera argumentos con la forma:

- `[topic] [slide-count]`

y admite el subcomando `create`. Una llamada típica desde el prompt de tu agente podría ser:

```text
Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

Internamente, el enrutado sigue este flujo (tal y como se define en SKILL.md):

1. Analizar el subcomando desde $ARGUMENTS (la primera palabra, p. ej. create).
2. Cargar el archivo de referencia correspondiente (para create, es references/create.md).
3. Usar los argumentos restantes (tema y número de diapositivas) para generar la estructura y el contenido del deck.

Flujo de trabajo recomendado para crear un nuevo deck

1. Define el objetivo y la audiencia

Antes de invocar ckm:slides, aclara:

• Objetivo (p. ej., cerrar una ronda seed, cerrar un acuerdo enterprise, actualizar al consejo)
• Audiencia principal (VCs, prospectos, dirección, equipos internos, asistentes a una conferencia)
• Número aproximado de diapositivas

Incluye este contexto en tus argumentos para que la skill pueda elegir la estructura y los patrones adecuados.

2. Elige una estrategia de deck o deja que la skill la elija

El archivo references/slide-strategies.md recoge 15 estructuras de deck habituales, como:

• YC Seed Deck (10–12 diapositivas)
• Sales Pitch (7–10 diapositivas)
• Product Demo (5–8 diapositivas)
• QBR, Board Meeting, Webinar, Workshop y más

Puedes:

• Pedir explícitamente una estructura (p. ej., “Use a YC seed deck structure”), o
• Dejar que el agente infiera el mejor encaje según tu objetivo y audiencia.

Cada estrategia incluye un esquema diapositiva por diapositiva y un arco emocional (p. ej., curiosity → frustration → hope → confidence → trust → urgency) para mantener una historia coherente.

3. Genera el copy usando fórmulas persuasivas

El archivo references/copywriting-formulas.md incluye 25 fórmulas, entre ellas:

• PAS (Problem–Agitate–Solution) para diapositivas de problema
• AIDA (Attention–Interest–Desire–Action) para hooks y CTAs
• FAB (Features–Advantages–Benefits) para diapositivas de producto y funcionalidades
• Cost of Inaction y Before–After–Bridge para urgencia y transformación

La skill usa estas fórmulas para estructurar titulares, cuerpo de texto y CTAs por diapositiva. Pídele que:

• Asigne a cada tipo de diapositiva una fórmula adecuada
• Use el lenguaje de plantilla proporcionado como punto de partida
• Ajuste el tono a tu marca y al nivel de sofisticación de tu audiencia

4. Aplica patrones de maquetación y animaciones

El archivo references/layout-patterns.md define 25 patrones de maquetación basados en CSS, como:

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Cada patrón de maquetación incluye:

• Un caso de uso recomendado
• Clases de animación de ejemplo (animate-fade-up, animate-stagger, animate-scale, etc.)
• Estructuras CSS de ejemplo para tipos de diapositivas habituales

Cuando pidas al agente que genere tu deck, añade instrucciones como:

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

Así mantendrás tu deck visualmente coherente y fácil de tematizar con CSS.

5. Usa la plantilla de diapositivas HTML

El archivo references/html-template.md proporciona una estructura HTML completa para el deck, que incluye:

• <head> con Chart.js incluido vía CDN
• Un sistema de theming basado en tokens usando variables CSS en :root
• Un contenedor .slide-deck y elementos .slide dimensionados para ratio 16:9
• Estilos base para tipografía y maquetación

Un flujo de trabajo típico es:

1. Partir de la plantilla HTML proporcionada.
2. Insertar las diapositivas generadas como elementos <section> o <div> con las clases correspondientes.
3. Pegar tus design tokens (p. ej., desde embed-tokens.cjs) en el bloque :root.
4. Añadir los elementos <canvas> de Chart.js y el JavaScript correspondiente para los gráficos.

La skill puede generar:

• Un borrador del archivo HTML completo, o
• Solo la estructura de diapositivas del <body> para que la pegues en tu propia plantilla base.

6. Conecta las visualizaciones de datos con Chart.js

Para decks basados en datos (dashboards de métricas, diapositivas de tracción, QBRs, informes al consejo), ckm:slides está diseñada para trabajar con Chart.js (como se muestra en html-template.md).

Puedes guiar al agente para que:

• Cree elementos <canvas> para gráficos dentro de las maquetaciones de diapositivas relevantes
• Sugiera objetos de configuración de Chart.js (datasets, labels, colors) en función de tus métricas
• Incruste bloques <script> que inicialicen estos gráficos al cargar la página

Tú eres responsable de aportar los datos reales y validar la configuración de los gráficos, pero la skill te proporciona el andamiaje estructural.

7. Exporta y presenta

Cuando el HTML del deck esté listo:

1. Guárdalo como archivo .html en tu proyecto.
2. Ábrelo directamente en tu navegador o sírvelo mediante tu servidor web preferido.
3. Usa navegación por teclado o JS personalizado (si lo añades) para moverte entre diapositivas.

Si necesitas compartirlo con stakeholders acostumbrados a PowerPoint, puedes compartir pantalla con el navegador o exportar las diapositivas como imágenes/PDF usando la función de impresión a PDF del navegador.

Consejos para obtener mejores resultados con ckm:slides

• Sé explícito con el número de diapositivas y la estructura siempre que sea posible.
• Indica al agente qué decisión debe facilitar el deck (financiación, compra, alineamiento, etc.).
• Señala qué diapositivas deberían incluir gráficos y de qué tipo (línea, barras, tarta, etc.).
• Pide una tabla que liste número de diapositiva, título, objetivo, layout y fórmula de copywriting principal para revisar el plan antes de generar el contenido completo.

FAQ

¿Qué genera exactamente ckm:slides?

ckm:slides está diseñada para generar:

• Un esquema diapositiva por diapositiva con objetivos y arco narrativo
• Copy de borrador para cada diapositiva, usando fórmulas como PAS, AIDA y FAB
• Sugerencias de layout basadas en los patrones predefinidos en layout-patterns.md
• Estructura HTML/CSS para un deck de diapositivas responsivo y basado en tokens
• Andamiaje de Chart.js para diapositivas con visualización de datos

El resultado exacto depende de cómo formules las instrucciones al agente, pero el núcleo es contenido estratégico de diapositivas HTML, no un documento de texto genérico.

¿ckm:slides crea archivos de PowerPoint (.pptx)?

No. ckm:slides se centra en decks de diapositivas HTML. Usa HTML, CSS y Chart.js para crear presentaciones que puedes abrir en un navegador. Si necesitas archivos .pptx, tendrás que usar un paso de exportación o conversión aparte, fuera de esta skill.

¿Puedo personalizar el diseño para ajustarlo a mi marca?

Sí. El archivo html-template.md usa design tokens mediante variables CSS. Puedes:

• Sustituir los valores de tokens de :root de ejemplo por los colores, tipografías y espaciados de tu marca
• Ampliar las clases CSS para layouts o animaciones personalizados
• Añadir tus propios componentes (logos, footers, estilos de marca de agua)

ckm:slides proporciona un punto de partida estructurado; tú aportas el sistema de marca.

¿Cómo funciona el subcomando create?

El subcomando create es el punto de entrada principal descrito en references/create.md. Cuando invocas create con argumentos, la skill:

1. Trata <task>$ARGUMENTS</task> como la descripción del deck que quieres.
2. Usa la base de conocimiento (patrones de maquetación, fórmulas de copywriting, estrategias de diapositivas, plantilla HTML) para diseñar un deck persuasivo alineado con esa tarea.

Normalmente no llamas a create directamente desde un CLI; en su lugar, indicas a tu agente que use la skill ckm:slides con el subcomando create.

¿Para qué tipo de decks es mejor ckm:slides?

Basándose en los patrones de slide-strategies.md, ckm:slides es especialmente útil para:

• Decks de fundraising (YC Seed Deck, Series A)
• Sales pitches y demos de producto
• Quarterly business reviews (QBRs) y actualizaciones al consejo
• Webinars, workshops y charlas en conferencias
• Presentaciones de casos de éxito y análisis competitivo

Todos ellos dependen de una historia clara, copy persuasivo y, a menudo, gráficos: exactamente para lo que está afinada la base de conocimiento de la skill.

¿Cómo gestiono la navegación y los controles de teclado?

La plantilla HTML base se centra en el layout y los aspectos visuales. La navegación (flechas del teclado, clic para avanzar, indicadores de progreso) no está totalmente definida en el fragmento de referencia y se deja a tu implementación. Puedes:

• Añadir JavaScript para escuchar las teclas ArrowLeft / ArrowRight y cambiar la diapositiva visible
• Usar hashes en la URL o data attributes para rastrear la diapositiva activa
• Integrarte con un framework de presentaciones HTML existente si lo prefieres

ckm:slides te ayuda a diseñar el contenido y la estructura; el comportamiento de navegación depende de tu setup de front‑end.

¿Necesito saber JavaScript para usar ckm:slides?

Tener nociones básicas de front‑end es muy útil, especialmente si:

• Quieres modificar o ampliar la plantilla HTML
• Necesitas configurar gráficos y elementos interactivos con Chart.js

Sin embargo, gran parte del trabajo pesado (estructura de la historia, selección de layouts, patrones de copywriting) no es técnico. Las personas no desarrolladoras también pueden beneficiarse colaborando con un desarrollador para rematar el HTML y los gráficos.

¿Dónde puedo ver todos los patrones y estrategias disponibles?

Abre el directorio de la skill (normalmente .claude/skills/slides) y revisa:

• SKILL.md para el comportamiento general, argumentos y enrutado
• references/layout-patterns.md para patrones de layout y estructuras CSS
• references/html-template.md para la plantilla base del deck de diapositivas HTML
• references/copywriting-formulas.md para frameworks de copy persuasivo
• references/slide-strategies.md para estructuras completas de decks y arcos emocionales

Explorar estos archivos te da una visión clara de lo que puede hacer ckm:slides y te ayuda a formular prompts más precisos al generar decks.