Skill: graphic-media
Cada vez que un agente de IA «dibuja» algo, improvisa. Un snippet de matplotlib que nadie ejecuta, un Mermaid a medias pegado dentro de un SVG, un PNG entregado sin abrirlo. Esta skill convierte ese caos en un taller: un enrutador que decide la tecnología, 11 scripts que hacen el trabajo y 21 referencias que ya traen la respuesta — sin salir del propio paquete.
Qué hace la skill y cómo lo resuelve
| Lo que hace | Cómo lo resuelve |
|---|---|
| Decide la herramienta correcta para cada encargo | El SKILL.md trae un árbol de decisión y una tabla petición → sección → referencia → script: clasifica el trabajo (diagrama, plano, gráfico, imagen, vídeo, audio, 3D, poster) y solo abre la referencia que toca — sin carga masiva de contexto. |
| Genera gráficos de datos desde un CSV | grafico.py con autoescala de ejes, inversión de Y, regresión lineal y salida PNG/SVG: el modelo pasa de «recuerda cómo va plt» a un comando con --help. |
| Dibuja diagramas de flujo, arquitectura o proceso | render_mermaid.py para Mermaid (ejecutado, no pegado como código) y 4 guías embebidas para PlantUML, Graphviz DOT, BPMN y C4 — cada tipo con su syntax y su modo de render. |
| Traza planos con escala y cotas | plano_2d.py aplica la escala del JSON, dibuja cotas ISO (línea, extensión, punta de flecha, texto) y cajetín opcional; references/ingenieria.md completa con DXF/ezdxf para CAD. |
| Dibuja circuitos eléctricos normalizados | circuito.py compone RC, RLC, LED, divisor de voltaje o puente de Wheatstone con símbolos IEC sobre rejilla de 10 px — nada de íconos inventados. |
| Modela en 3D y lo anima | plot3d.py con 5 modos (superficie, malla, nube de puntos, barras 3D y GIF rotatorio de 12 fotogramas) — numpy sin simbolos manuales. |
| Edita imagen sin reescribir Pillow cada vez | editar_imagen.py: recorte, filtros, transparencia, contactos, GIF y verificación de dimensiones al terminar; svg_a_raster.py rasteriza SVG a cualquier dpi cuando el SVG no basta. |
| Edita y convierte vídeo | video.py envuelve FFmpeg en 10 verbos (convertir, recortar, denoise, comprimir, frames, GIF, ensamblar, mutar, extraer audio): FFmpeg deja de ser una sentencia que el modelo olvida. |
| Trata audio con estándar real | audio.py aplica loudnorm EBU R128 en dos pasadas (medir → aplicar), recorta silencios, hace ducking y dibuja la forma de onda. |
| Convierte formatos de imagen, vídeo, audio y SVG | convertir.py detecta la familia por extensión y delega al convertidor correcto con un solo comando. |
| Instala lo que falte una sola vez | references/instalacion.md con rutas winget/apt/npm/carpeta-portable al PATH; y si algo falta, cada script emite el pip install o comando exacto — mensajes limpios, nunca trazas. |
| Entrega artefactos verificados | El circuito de 4 pasos exige revisar el archivo real (existe, dimensiones, formato, legibilidad) antes de dar la tarea por terminada. |
Detrás de cada fila gobierna el mismo circuito de cuatro pasos, sin saltarse ninguno:
(1) Clasifica → árbol de decisión: UNA tecnología por tarea
(2) Lee → SOLO la referencia que toca (nunca todas)
(3) Ejecuta → el script que resuelve (no un snippet improvisado)
(4) Verifica → el artefacto real: existe, dimensiones, formato, legibilidad
Y sobre todo él gobierna una regla de oro: la skill es autocontenida — resuelve con su propio contenido, jamás delega en otra skill, y todo su conocimiento va embebido sin depender de documentación externa.
Qué incluye
| Dominio | Qué hay |
|---|---|
| Diagramas | Mermaid, PlantUML, Graphviz DOT, BPMN, C4, draw.io/Excalidraw, estilo boceto |
| Gráficos de datos | grafico.py (CSV → PNG/SVG), histograma_animado.py (GIF/MP4) |
| Planos e ingeniería | plano_2d.py (escala, cotas, cajetín), cotas ISO, DXF con ezdxf |
| Circuitos eléctricos | circuito.py (RC, RLC, LED, divisor, Wheatstone, símbolos IEC) |
| 3D | plot3d.py (superficie, malla, nube, barras + GIF orbitando 360°) |
| Arte vectorial SVG | paths, filtros, animación, optimización, svg_a_raster.py |
| Posters y arte | flujo filosofía → lienzo + 46 fuentes OFL en canvas-fonts/ |
| Imagen | editar_imagen.py (recorte, filtros, transparencia, GIF, hoja de contacto) |
| Vídeo | video.py (convertir, recortar, denoise, comprimir, frames ↔ GIF) |
| Audio | audio.py (convertir, loudnorm EBU R128, silencios, ducking, waveform) |
| Conversión | convertir.py (imagen/vídeo/audio/svg en un solo comando) |
| Instalación | references/instalacion.md: una vez por equipo, en el PATH compartido |
Cómo está construido
flowchart TB
U["Petición del usuario<br/>(dibuja, diagrama, plano, recorta, vídeo, audio...)"]
R["SKILL.md — enrutador<br/>árbol de decisión · circuito de 4 pasos"]
subgraph Refs["references/ · 21 guías embebidas"]
T["tipos-diagrama · diagramas-texto · C4"]
I["ingenieria · planos-3d · maquinas-isometricas"]
M["video-edicion · audio-tools · animacion-ia"]
S["como-hacerlo · scripts · instalacion"]
end
subgraph Scr["scripts/ · 11 CLIs probados"]
G["grafico · histograma_animado · plot3d"]
P["plano_2d · circuito · render_mermaid · svg_a_raster"]
E["editar_imagen · video · audio · convertir"]
end
OUT["Artefacto verificado<br/>(dimensiones · formato · legibilidad)"]
U --> R
R -.lee solo la que toca.-> Refs
R --> Scr
Refs -.recetas y flags.-> Scr
Scr --> OUT
OUT -.checklist.-> U
Decisiones de diseño:
- Scripts que resuelven, no snippets que copiar: cada tarea frecuente tiene un CLI con
--help, mensajes de error con elpip installexacto y salida verificada — el modelo ejecuta en vez de inventar. - Autocontenida por regla dura: nunca carga otras skills para hacer su trabajo; sus 21 referencias reemplazan la documentación externa.
- Instalación única por equipo: FFmpeg, Graphviz o mermaid-cli se instalan una vez (winget/apt/npm o carpeta portable en el PATH) — documentado en
references/instalacion.md, no por proyecto. - Verificación obligatoria: el circuito no termina en «generé el archivo», sino en comprobar que el artefacto tiene las dimensiones y el formato pedidos.
- Límites honestos: la skill declara dónde NO sirve (personas ni mapas exactos en figuras isométricas; no es una librería de gráficos) en vez de fallar en silencio.
Impacto medido
- 11 scripts, ~45 comandos reales ejecutados en la validación funcional de la skill: recortes, filtros, GIFs, conversiones, denoise de vídeo, normalización y planos — todos probados sobre archivos de prueba, no solo compilados.
- Normalización de audio real: un archivo medido en -21.85 LUFS pasó a -16 LUFS objetivo con loudnorm de dos pasadas (medir → aplicar), el estándar EBU R128 que usan podcasts y plataformas.
- Evaluaciones completas: 17 queries de activación (mitad que deben dispararla, mitad casi-acierto que no) y 10 evals de rendimiento con salida esperada.
- Validada y auditada:
quick_validate= Skill is valid! y auditoría anti-skill-maliciosa = PASA (0 hallazgos de error). - Autoverificada: el poster y la miniatura de esta propia entrada del portafolio se generaron con la skill (Pillow + sus 46 fuentes OFL).
Instalación
npx skills add gilmanpro/graphic-media
O a mano:
git clone https://github.com/gilmanpro/graphic-media.git ~/.agents/skills/graphic-media
Núcleo: pip install pillow matplotlib. El resto de herramientas (FFmpeg,
Graphviz, mermaid-cli…) se instala una sola vez por equipo siguiendo la
propia references/instalacion.md.
Stack
| Capa | Tecnología |
|---|---|
| Lenguaje | Python 3.10+ (Pillow, matplotlib, numpy) · FFmpeg (vídeo/audio) |
| Formato | Agent Skills: SKILL.md + references/ + scripts/ + evals/ |
| Plataforma | OpenCode, Claude Code y cualquier harness compatible |
| Licencia | MIT (+ Open Font License en las 46 fuentes) |
Repositorio
Open source (MIT):
👉 github.com/gilmanpro/graphic-media
La skill crece con peticiones: el repo incluye plantillas de issues de solicitud de mejoras (qué dibujar, en qué formato) y bugs de script (comando, salida esperada, error), más plantillas para PRs con scripts nuevos.