- Grupo: Diseño gráfico y marca
- Cuándo se activa: Presentaciones HTML
- Se instala: Opcional: llega con un paquete de skills.
Documentación completa upstream (inglés): SKILL.upstream.md (40 líneas). No la leas entera: usa el mapa y lee solo la sección que necesites (Read con offset/limit o Grep). Todo el contenido real está en references/.
- Usar: pitch deck (YC seed, ventas, demo de producto) en HTML autocontenido con narrativa y estructura de slides.
- Usar: slides con datos (Chart.js) y layouts predefinidos (título, dos columnas, grid de features, dashboard de métricas).
- Usar: redactar titulares y copy de slides con fórmulas (AIDA, PAS, etc.).
- NO usar: gráficos o dashboards fuera de una presentación → skill
dataviz; paquete completo de marca con logo/CIP → design.
- NO usar: exportar a PPTX/Keynote (el upstream sólo produce HTML).
| Tarea |
Lee solo |
| Empezar una presentación |
SKILL.upstream.md L21-25 (§Subcommands) + references/create.md + references/slide-strategies.md L5-24 |
| Elegir estructura del deck |
references/slide-strategies.md L25-74 (§Common Structures, §Duarte Sparkline) |
| Maquetar una slide |
references/layout-patterns.md L5-23 (selección) y L24-98 (CSS) |
| Plantilla base y Chart.js |
references/html-template.md L5-203 (base) y L204-238 (§Chart.js Integration) |
| Escribir el copy |
references/copywriting-formulas.md |
| Depurar / rendimiento |
references/html-template.md L239-295 (animaciones, fondos, variables CSS) |
| Líneas |
Sección |
Para qué |
| 14-19 |
When to Use |
Casos de uso |
| 21-25 |
Subcommands |
create → references/create.md |
| 27-34 |
References (Knowledge Base) |
Tabla tema → archivo |
| 36-40 |
Routing |
Resolución del subcomando desde $ARGUMENTS |
references/create.md — prompt del subcomando create (4 líneas).references/slide-strategies.md — selección de estrategia, estructuras YC/ventas/demo, patrón Sparkline de Duarte, cómo casar estrategia y contexto.references/layout-patterns.md — layouts por caso de uso, estructuras CSS, variantes de card/métrica, tratamientos visuales y árbol de decisión.references/html-template.md — estructura HTML base, integración Chart.js, clases de animación, fondos, variables CSS.references/copywriting-formulas.md — fórmulas de titulares y cuerpo para slides.- No hay
scripts/ ni assets/.
- Un mensaje por slide; elegir la estrategia (YC 10 slides, ventas 9, demo 6) antes de maquetar.
- Usar los design tokens del proyecto (variables CSS de
html-template.md), no colores hardcodeados.
- Chart.js sólo cuando el dato aporta; cada gráfico con título y etiquetas legibles, sin más de una serie destacada.
- Layouts responsive con las estructuras de
layout-patterns.md; animaciones sólo con las clases previstas y respetando prefers-reduced-motion.
- Copy con fórmula explícita (
copywriting-formulas.md): titular corto + una idea de apoyo.
- Detecta el stack como indica la skill
front-activation/skill-router (senzu/senzu.json → package.json). La salida es un HTML estático independiente del framework; si el proyecto tiene assets/design-tokens.css (skill brand/design-system), enlázalo en lugar de redefinir variables.
