# Visualizations

> Úsalo cuando alguien pida un visual dibujado a mano, una imagen PNG, un diagrama renderizado o una explicación visual. Genera imágenes PNG, no archivos editables.

Fuente: https://skillsagentes.com/skills/nateherkai/a-bunch-of-skills/visualizations
Markdown: https://skillsagentes.com/skills/nateherkai/a-bunch-of-skills/visualizations.md

Repositorio: https://github.com/nateherkai/a-bunch-of-skills
Autor: nateherkai
Licencia: no declarada
Actualizado: hace 4 meses
Coste de contexto: 50 tok instalada, 3.7k tok al activarse, 3.7k tok con todos los archivos del bundle
Bundle: 1 archivo, 14 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 nateherkai/a-bunch-of-skills --skill visualizations --agent claude-code
# Cursor
npx -y skills add nateherkai/a-bunch-of-skills --skill visualizations --agent cursor
# Codex
npx -y skills add nateherkai/a-bunch-of-skills --skill visualizations --agent codex
# Gemini CLI
npx -y skills add nateherkai/a-bunch-of-skills --skill visualizations --agent gemini
# Windsurf
npx -y skills add nateherkai/a-bunch-of-skills --skill visualizations --agent windsurf
# Cline
npx -y skills add nateherkai/a-bunch-of-skills --skill visualizations --agent cline
```

## Qué hace

- Genera diagramas PNG con estética Excalidraw dibujada a mano, siempre en modo oscuro sobre fondo exacto #121212
- Bloquea el prefijo de estilo: solo cambia la descripción del diagrama en cada petición
- Elige plantilla de layout entre flujo, hub y radios, jerarquía, comparación, pasos numerados o ciclo
- Minimiza el texto — título de 5 palabras como máximo, etiquetas de 3, menos de 30 palabras en total
- Llama a Nano Banana 2 vía kie.ai pasando siempre la imagen de referencia de estilo

## Cuándo usarla

- Alguien pide un visual dibujado a mano, una imagen PNG o un diagrama renderizado
- Alguien pide una explicación visual o dice "hazme un visual"
- Hace falta visualizar un concepto o un proceso

## Cuándo no

- Se necesita un archivo editable: esto genera imágenes PNG, no fuentes editables

## Qué la activa

- "Hazme un visual de este proceso"
- "Dibuja un diagrama de cómo funciona esto"
- "Necesito una explicación visual de este concepto"
- "Visualiza el flujo de datos de la aplicación"

## Antes de instalar

- Necesita `KIE_AI_API_KEY` en `.env`, el script `scripts/visualizations/generate-visual.js` y la imagen de referencia `brand-assets/excalidraw-style-reference.png`; la salida es 1K para no pasar de 4 MB.
- Necesita en el PATH: node

## Archivos

- SKILL.md — 14 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/nateherkai/a-bunch-of-skills/blob/master/.claude/skills/visualizations/SKILL.md

## 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: [nateherkai](https://skillsagentes.com/creators/nateherkai.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Infographic Builder](https://skillsagentes.com/skills/nateherkai/a-bunch-of-skills/infographic-builder.md): Úsalo para crear una infografía, diseñar un explicador visual o generar imágenes de infografía. Produce infografías PNG con marca usando KIE AI.
- [Skill Builder](https://skillsagentes.com/skills/nateherkai/a-bunch-of-skills/skill-builder.md): Úsalo al crear skills nuevos, optimizar los que ya tienes o auditar su calidad. Guía el desarrollo siguiendo las buenas prácticas oficiales de Claude Code.

---

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