# Slides

> Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.

Fuente: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides
Markdown: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md

Repositorio: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Autor: nextlevelbuilder
Licencia: MIT
Actualizado: hace 25 días
Coste de contexto: 35 tok instalada, 430 tok al activarse, 5k tok con todos los archivos del bundle
Bundle: 6 archivos, 19 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent claude-code
# Cursor
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent cursor
# Codex
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent codex
# Gemini CLI
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent gemini
# Windsurf
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent windsurf
# Cline
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides --agent cline
```

## Qué hace

- Crea presentaciones HTML estratégicas con visualización de datos usando Chart.js
- Aplica patrones de layout, design tokens y plantillas HTML predefinidas
- Usa fórmulas de copywriting para optimizar el contenido de las diapositivas
- Aplica estrategias contextuales según el tipo de diapositiva

## Cuándo usarla

- Presentaciones de marketing y pitch decks
- Diapositivas basadas en datos con Chart.js
- Diseño estratégico de diapositivas con patrones de layout
- Contenido de presentación optimizado con copywriting

## Qué la activa

- "Crea una presentación de pitch deck sobre nuestra startup"
- "Genera slides con gráficos de Chart.js para mostrar estos datos"
- "Necesito una presentación HTML estratégica de 10 diapositivas"

## Antes de instalar

- Los scripts leen y escriben archivos del proyecto como docs/brand-guidelines.md, assets/design-tokens.json o src/, relativos a la raíz del proyecto.

## Archivos

- SKILL.md — 2 KB
- references/copywriting-formulas.md — 3 KB
- references/create.md — 153 B
- references/html-template.md — 9 KB
- references/layout-patterns.md — 4 KB
- references/slide-strategies.md — 3 KB

## SKILL.md

Reproducido tal cual desde nextlevelbuilder/ui-ux-pro-max-skill bajo MIT. Esta sección es el documento original y está en inglés.

# Slides

Strategic HTML presentation design with data visualization.

## When to Use

- Marketing presentations and pitch decks
- Data-driven slides with Chart.js
- Strategic slide design with layout patterns
- Copywriting-optimized presentation content

## Subcommands

| Subcommand | Description | Reference |
|------------|-------------|-----------|
| `create` | Create strategic presentation slides | `references/create.md` |

## Script Paths

Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.

## References (Knowledge Base)

| Topic | File |
|-------|------|
| Layout Patterns | `references/layout-patterns.md` |
| HTML Template | `references/html-template.md` |
| Copywriting Formulas | `references/copywriting-formulas.md` |
| Slide Strategies | `references/slide-strategies.md` |

## Routing

1. Parse subcommand from `$ARGUMENTS` (first word)
2. Load corresponding `references/{subcommand}.md`
3. Execute with remaining arguments

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [nextlevelbuilder](https://skillsagentes.com/creators/nextlevelbuilder.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Skills relacionadas

- [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Hig Platforms](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-platforms.md): HIG de Apple por plataforma: iOS, iPadOS, macOS, tvOS, watchOS y visionOS. No portes diseños; respeta cada modelo de interacción.
- [Hig Components Status](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-status.md): HIG de Apple para progreso y estado: progress indicators, status bars y activity rings. Cuándo usar barra determinate frente a spinner.
- [Hig Components Menus](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-menus.md): HIG de Apple para menús y botones: menu bar, toolbars, context menus, action buttons, pop-up y pull-down.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)