# Docimations

> Crea diagramas animados SVG a GIF para Google Docs: flowcharts, diagramas de proceso, líneas de tiempo, árboles de decisión y mapas de contexto listos para insertar en un Doc nativo.

Fuente: https://skillsagentes.com/skills/rbrown101010/rileys-skills/docimations
Markdown: https://skillsagentes.com/skills/rbrown101010/rileys-skills/docimations.md

Repositorio: https://github.com/rbrown101010/rileys-skills
Autor: rbrown101010
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 86 tok instalada, 867 tok al activarse, 5.6k tok con todos los archivos del bundle
Bundle: 4 archivos, 22 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 rbrown101010/rileys-skills --skill docimations --agent claude-code
# Cursor
npx -y skills add rbrown101010/rileys-skills --skill docimations --agent cursor
# Codex
npx -y skills add rbrown101010/rileys-skills --skill docimations --agent codex
# Gemini CLI
npx -y skills add rbrown101010/rileys-skills --skill docimations --agent gemini
# Windsurf
npx -y skills add rbrown101010/rileys-skills --skill docimations --agent windsurf
# Cline
npx -y skills add rbrown101010/rileys-skills --skill docimations --agent cline
```

## Qué hace

- Genera diagramas animados en SVG y los convierte a GIF para insertarlos en Google Docs
- Usa `scripts/docimation_charts.py` para crear gráficos comunes (linear, loop, branch, stack, timeline, hub)
- Renderiza los frames SVG a PNG con `sips` y los une en un GIF con Pillow
- Inserta las imágenes en un Google Doc reemplazando marcadores de texto de abajo hacia arriba con `insertInlineImage`
- Crea una `preview_sheet.png` para revisar el resultado antes de insertarlo

## Cuándo usarla

- Crear flowcharts, diagramas de proceso, líneas de tiempo, árboles de decisión o mapas de contexto animados
- Insertar gráficos tipo GIF en un Google Doc nativo
- Necesitar diagramas editables a partir de frames SVG en vez de animación SVG reproducida en Docs

## Qué la activa

- "Crea un diagrama animado de flujo para este Google Doc"
- "Hazme un GIF explicativo de este proceso para insertarlo en el documento"
- "Genera un árbol de decisión animado para el doc"

## Antes de instalar

- Necesita Python 3, Pillow y `/usr/bin/sips` (macOS) para generar los GIF, además del conector de Google Drive para insertarlos en el Doc.
- Necesita en el PATH: python3
- makes network requests

## Archivos

- SKILL.md — 3 KB
- agents/openai.yaml — 203 B
- references/svg-to-gif-patterns.md — 2 KB
- scripts/docimation_charts.py — 17 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/rbrown101010/rileys-skills/blob/main/docimations/SKILL.md

## Dónde encaja

- Categoría: [Documentos](https://skillsagentes.com/categorias/documentos.md) — Lee, escribe y transforma archivos PDF, DOCX, XLSX y PPTX.
- Creador: [rbrown101010](https://skillsagentes.com/creators/rbrown101010.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

- [Firebase Cli](https://skillsagentes.com/skills/rbrown101010/rileys-skills/firebase-cli.md): Trabaja con Firebase desde la terminal: repara o instala el CLI, autentica, selecciona proyectos, gestiona bases Firestore y Realtime Database, registra apps e imprime la config del SDK.
- [Mobile App](https://skillsagentes.com/skills/rbrown101010/rileys-skills/mobile-app.md): Crea, prototipa, despliega, previsualiza, firma e instala apps móviles. Cubre proyectos móviles con Vibecode CLI, prototipos de diseño local y herramientas integradas de build/firma/instalación para iOS.
- [Notion Full Control](https://skillsagentes.com/skills/rbrown101010/rileys-skills/notion-full-control.md): Acceso directo y completo a la API de Notion fuera del conector integrado: buscar páginas y bases de datos, inspeccionar esquemas, consultar filas, crear o actualizar páginas, añadir bloques y peticiones raw.
- [Remotion Html In Canvas](https://skillsagentes.com/skills/rbrown101010/rileys-skills/remotion-html-in-canvas.md): Úsala al crear o modificar videos de Remotion con efectos HTML-en-canvas: el componente HtmlInCanvas, postprocesado Canvas 2D/WebGL/WebGPU, transiciones personalizadas y renderizado con @remotion/web-renderer.
- [Chronicle](https://skillsagentes.com/skills/rbrown101010/rileys-skills/chronicle.md): Permite ver la pantalla del usuario y varias horas de historial. Debe usarse para resolver ambigüedad en una petición, o si el usuario pregunta sobre Chronicle o qué se ve en su pantalla.

---

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