Skill: graphic-media
Volver a proyectos

Skill: graphic-media

python skills opencode diagramas svg matplotlib pillow ffmpeg agents devtools

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 el pip install exacto 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.

Volver a proyectos