Communitygithub.com

hraness/transmute

Un SDK visual sin cabeza, una CLI de Bun y una habilidad para agentes para diagramas, generación de imágenes, vectorización y flujos de trabajo tipados.

¿Qué es transmute?

Transmute es un conjunto de herramientas de media visual sin interfaz gráfica, diseñado para ser utilizado como una habilidad de agente de IA (compatible con Claude Code, Cursor, Codex y plataformas similares) o mediante su CLI de Bun. Su propósito principal es permitir la creación, actualización y renderizado determinista de diagramas a partir de archivos fuente `.diagram.json`, generando exportaciones en SVG, PNG y un formato de intercambio editable (`.tldr`). Además, incluye capacidades para generar imágenes raster alojadas (con límite diario y autenticación OAuth), vectorizar imágenes rasterizadas localmente (sin necesidad de autenticación) y, en el modo de escritorio, realizar flujos de trabajo de 3D y materiales utilizando Three.js. La herramienta prioriza la fidelidad a las instrucciones del usuario: no debe inventar contenido, y debe seguir literalmente las especificaciones proporcionadas. Utiliza un diseño de diseño determinista (layouts tipo `stack`) para colocar elementos sin coordenadas manuales, y recomienda la verificación mediante el comando `check --strict`. Para diagramas complejos o fuera del alcance de MCP, se debe usar la CLI directamente. El ecosistema incluye referencias detalladas para composición visual y personalización, y su uso en modo MCP ofrece herramientas específicas (`check_diagram`, `render_diagram`) para llamadas simples de compatibilidad.

Compatible con~Claude Code✓Codex CLI~Cursor
npx skills add hraness/transmute

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Crear diagramas claros

Usa la CLI transmute instalada como el adaptador determinista. Mantén el archivo fuente .diagram.json creado; trata .light.svg, .dark.svg, .light.png, .dark.png y .tldr como exportaciones reemplazables.

Sigue el mensaje al pie de la letra

Trata el mensaje del usuario como la especificación completa del contenido.

  • Conserva las etiquetas, valores, relaciones, tamaños relativos y omisiones proporcionadas.
  • Agrega solo la mecánica neutral necesaria para dibujar esos hechos.
  • No inventes un título, subtítulo, leyenda, anotación, ejemplo, implicación, categoría, métrica, marca, conector o afirmación decorativa.
  • No expandas una etiqueta corta en una oración. Prefiere la etiqueta de una a tres palabras del usuario.
  • Al actualizar, elimina el contenido rechazado sin reemplazarlo con una nueva elaboración.

Encuentra la fuente

  1. Lee las instrucciones del repositorio local y busca transmute.config.*.
  2. Busca un archivo .diagram.json existente sobre el mismo tema antes de crear uno.
  3. Actualiza esa fuente en lugar de editar imágenes generadas o crear un duplicado.
  4. En una base de conocimiento con info/, usa info/diagrams/<slug>.diagram.json y combínalo con info/notes/<slug>.md. En un repositorio que aún use kb/, usa las mismas rutas relativas allí. Inserta o enlaza la imagen clara/oscura renderizada según la convención del anfitrión, y enlaza el conocimiento a través de la nota en lugar de a través de un lienzo binario.
  5. Fuera de una base de conocimiento, usa por defecto diagrams/<slug>.diagram.json.

Compón el visual

Lee visual-communication.md antes de crear o rediseñar sustancialmente un diagrama.

Aplica estos valores predeterminados en profundidad:

  • Usa rectángulos redondeados para conceptos ordinarios. Roles iguales obtienen el mismo tamaño, radio, grosor de trazo, tamaño de icono y tratamiento de etiqueta.
  • Deja al menos 96px —y preferiblemente 120–200px— entre formas conectadas para que las flechas se lean como relaciones en lugar de costuras.
  • Coloca los iconos directamente dentro de su forma semántica. No coloques un mosaico de icono con borde dentro de otra tarjeta con borde.
  • Usa de tres a siete elementos primarios cuando el mensaje lo permita.
  • Establece un orden de lectura claro y alinea los pares a una cuadrícula compartida.
  • Usa espacios en blanco antes que bordes, colores o prosa para separar grupos.
  • Usa el color para como máximo una distinción semántica. Nunca hagas cambios arbitrarios de tamaño o estilo que impliquen una diferencia que el mensaje no proporcionó.
  • Mantén los iconos como apoyo: una etiqueta aún debe transmitir el significado.
  • Prefiere un límite visible por objeto y un trazo visible por eje o conector.

No "mejores" datos literales para satisfacer estas preferencias. El mensaje gana.

Deja que el diseño determinista posea las coordenadas ordinarias

Usa un diseño stack libre de coordenadas para una secuencia horizontal o vertical:

{
  "layout": {
    "type": "stack",
    "direction": "horizontal",
    "gap": 160,
    "align": "center"
  }
}
  • El orden del array controla solo la ubicación. Dibuja un borde solo cuando el mensaje proporcionó esa relación.
  • Mantén las formas del stack como rectángulos o elipses y omite x e y.
  • Usa el espacio predeterminado de 160px a menos que el mensaje o el marco de publicación requieran un espacio diferente.
  • Cambia al modo posicionado para ramificaciones, bordes no adyacentes, gráficos, texto libre, líneas o ubicación deliberadamente desigual. No fuerces esos significados en un stack unidimensional.
  • Si un stack no encaja, aumenta el lienzo o reduce las dimensiones creadas explícitamente. No reduzcas silenciosamente formas o espacios.

Crea y renderiza

Usa la URL del esquema público o ejecuta transmute diagram init para un inicio:

transmute diagram check diagrams/<slug>.diagram.json --strict
transmute diagram render diagrams/<slug>.diagram.json

El comando render sobrescribe las exportaciones consistentes del mismo tronco. Inspecciona tanto la salida clara como la oscura cuando el diseño o el contraste sean inciertos. Aborda todos los hallazgos de lint útiles; cambia la fuente y luego vuelve a renderizar.

Si el repositorio usa su propio paquete de fuentes o iconos, lee customization.md. No agregues MonoLisa ni otra fuente con licencia al repositorio. El renderizado predeterminado usa la pila sans-serif del sistema.

Autentícate antes de la generación de imágenes alojadas

Usa el flujo del navegador OAuth cuando la generación alojada informe AUTH_REQUIRED:

transmute auth login
transmute auth status

La devolución de llamada está fijada en http://127.0.0.1:49671/oauth/callback. Los tokens pertenecen solo al almacén de credenciales del sistema operativo a través de Bun.secrets. Nunca le pidas al usuario que pegue un token, lo copie en un archivo, lo imprima en la salida de una tarea o omita el descubrimiento. En hosts macOS y Linux compatibles, transmute auth logout revoca la credencial remota cuando es posible y elimina la credencial local. El inicio de sesión, la actualización y el cierre de sesión usan coordinación vinculada al ámbito del proceso; compartir su directorio de concesión entre espacios de nombres PID de Linux falla cerrado sin eliminar el marcador de otro ámbito. Las mutaciones de credenciales fallan cerrado en Windows hasta que Transmute tenga un primitivo de coordinación privado nativo equivalente.

Genera un WebP alojado literalmente

Cuando el usuario solicite explícitamente la generación de ráster alojado, conserva su mensaje en lugar de enriquecerlo:

transmute image generate '<mensaje literal>' --output ruta/hacia/imagen.webp

El modelo predeterminado es recraft/recraft-v4.1-utility. Usa --model openai/gpt-image-1.5 solo cuando el usuario lo solicite o su comportamiento sea relevante para el resultado solicitado. Esos son los únicos ID admitidos.

La generación alojada es una vista previa gratuita autenticada y limitada. Su límite de cuenta por día UTC es 10 y su límite de seguridad global diario es 100. El pago aún no se aplica. La vectorización se rige por separado y sigue siendo local, gratuita y sin autenticación.

  • Mantén la ruta de salida .webp requerida dentro del espacio de trabajo solicitado por el usuario.
  • Deja que la CLI cree un UUID de idempotencia. Proporciona --idempotency-key solo cuando un llamador ya posee una clave estable de 16 a 128 caracteres. El servicio almacena la clave de forma duradera dentro del ámbito de la cuenta.
  • Nunca reintentes una llamada de generación fallida: un error puede ser ambiguo incluso con idempotencia duradera a nivel de cuenta.
  • No decodifiques, escribas ni confíes en la imagen tú mismo. La CLI delimita el base64 canónico, valida la magia de medios RIFF/WebP y lo publica atómicamente.

Usa flujos de trabajo de 3D y materiales guiados por referencia deliberadamente

Lee reference-led-3d.md cuando el usuario solicite convertir una imagen generada o proporcionada en una escena de Three.js, un objeto low-poly, un bucle 3D transparente o un render metálico de producto con logotipo.

Estas son capacidades completas del anfitrión en modo de código local, actualmente distribuidas con Desktop. El ejecutor Bun público sin cabeza puede generar una imagen y ejecutar sus cuatro operaciones portátiles fijas, pero no ejecuta superposiciones HTML, Three.js ni el renderizador de proyectos privado. El shell de Desktop proporciona captura nativa, permisos y UI en lugar de otro modelo de flujo de trabajo. Nunca impliques lo contrario. En modo de código local:

  • Organiza el trabajo de imagen a Three como generación de referencia, creación de fuente, revisión, vista previa y luego render final. Nunca envíes JavaScript producido por el modelo directamente a una operación semántica.
  • Vincula el artefacto de referencia exacto a la escena revisada con createThreeReferenceScaffoldInput, incluso cuando no esté visible en la composición.
  • Usa createMetallicLogoImageRequest para el tratamiento cuadrado de producto guiado por referencia. Mantén la selección del modelo explícita e inspecciona la fidelidad de la identidad antes de aceptar el resultado.
  • Renderiza vistas previas completas a 1x primero. Aumenta la resolución o la escala del dispositivo solo después de seleccionar la fuente y el tratamiento.

Vectoriza un ráster sin cambiar su significado

Cuando el usuario solicite convertir arte ráster de su propiedad a SVG, mantén el ráster como fuente y trata el SVG como un derivado reemplazable:

transmute image vectorize ruta/hacia/entrada.png --output ruta/hacia/entrada.svg --json
  • No te autentiques para la vectorización. La conversión es local y no contacta con descubrimiento, OAuth, generación ni ningún otro endpoint de red.
  • No redibujes, reetiquetes, recortes, recoloques ni simplifiques el sujeto más allá de la mecánica de trazado que mide el comando.
  • Usa --duotone '#primario,#secundario' solo cuando el usuario solicite explícitamente esa adaptación de dos colores.
  • Conserva el recibo emitido en la salida de la tarea o en un registro de procedencia adyacente cuando la auditabilidad sea importante.
  • No omitas las compuertas de entrada, píxeles decodificados, duración, ruta, bytes o fidelidad.
  • Inspecciona el SVG en su tamaño previsto. Un trazado exitoso no es evidencia de que un símbolo desconocido comunique el concepto deseado.

VTracer se descarga desde su lanzamiento oficial con suma de verificación fijada en el primer uso. Usa TRANSMUTE_VTRACER_PATH solo para un binario local 0.6.4 compatible; Transmute aún registra su hash. Nunca agregues un modelo de mejora de escala, respaldo ráster incrustado o fuente comercial para hacer que un trazado pase.

La vectorización limitada actualmente es compatible en macOS y Linux. En Windows, informa el fallo deliberado tool_platform; no lo omitas con un archivo de salida temporal no limitado.

Usa un servidor de herramientas conectado de forma limitada

Cuando Transmute MCP esté conectado, conserva las herramientas dedicadas check_diagram y render_diagram para llamadas de compatibilidad simples. Usa search_transmute para descubrir el registro semántico fijo y execute_transmute con un código exacto devuelto y JSON tipado. Continúa editando la fuente del diagrama comprobado directamente; ninguna herramienta crea o reescribe la fuente.

  • Pasa solo rutas .diagram.json relativas a la raíz.
  • Trata check_diagram como de solo lectura.
  • Trata render_diagram como aprobación para reemplazar los cinco artefactos generados documentados, nunca la fuente.
  • Usa la CLI en lugar de MCP para una fuente de más de 64 formas o 128 bordes. MCP devuelve como máximo 40 hallazgos e informa cuando esa lista está truncada.
  • El modo MCP usa deliberadamente temas e iconos integrados y nunca ejecuta la configuración del espacio de trabajo. Usa la CLI fuera de MCP cuando se requiera una configuración local de confianza.
  • transmute.image.vectorize acepta rutas de entrada/salida relativas a la raíz, no requiere inicio de sesión y mantiene los bytes ráster locales.
  • transmute.image.generate requiere una ruta de salida .webp relativa a la raíz, escribe atómicamente la imagen limitada y devuelve solo metadatos de archivo/solicitud redactados. Usa solo los dos ID de modelo del registro y no lo reintentes.
  • Nunca pases código fuente, texto de shell, texto de importación dinámica, URL remotas o nombres de operación no registrados a la ejecución semántica.

Sin MCP, la superficie CLI equivalente legible por máquina es:

transmute code search '<términos>' --limit 4
transmute code execute <código-de-operación-exacto> --input '<objeto JSON estricto>'

Usa tldraw deliberadamente

El archivo .tldr generado es un intercambio editable y no requiere el SDK de tldraw ni la aplicación de escritorio para crearlo. Ábrelo en tldraw Offline cuando una persona quiera editar directamente el lienzo:

transmute canvas open diagrams/<slug>.tldr

Si la aplicación opcional está ausente, transmute canvas install resuelve el lanzamiento oficial actual, verifica su resumen SHA-256 publicado e inicia el instalador de la plataforma. La aplicación importa .tldr como un documento no guardado; guárdalo allí para crear su paquete nativo más nuevo .tldraw. Nunca reescribas un paquete ZIP/SQLite .tldraw nativo directamente.

Verifica

  1. Ejecuta transmute diagram check <fuente> --strict.
  2. Ejecuta transmute diagram render <fuente>.
  3. Confirma que los cinco artefactos existen junto a la fuente o en el directorio de salida solicitado.
  4. Inspecciona la salida clara y oscura en tamaño real.
  5. Confirma que las formas pares no implican diferencias falsas.
  6. Confirma que los conectores sean largos, estén vinculados a las formas previstas en .tldr y no crucen etiquetas.
  7. Si se requiere una nota acompañante, confirma su ruta y referencia visual.

Skills relacionados