licer255/svg-techo

¿Qué hace svg-techo?

Utiliza los módulos JavaScript reutilizables en assets/lib/. Cambia la apariencia mediante parámetros del generador. Extiende el módulo adecuado cuando una tarea necesite un nuevo comportamiento, luego verifica sus puntos de entrada normales.

Puntos de entrada

• assets/lib/index.mjs exporta materialKinds, svgKinds, referencePresets, renderSvg(kind, options) y createLightRenderer(canvas, options).
• assets/lib/index.d.mts proporciona declaraciones TypeScript.
• scripts/render-svg.mjs es la CLI de Node.
• scripts/self-test.mjs verifica geometría, límites de entrada, determinismo, bucles y entrada RGBA.
• scripts/browser-check.html verifica decodificación SVG, WebGL, alfa, fase y limpieza.

Resuelve estas rutas relativas a este SKILL.md. Copia el directorio completo assets/lib/ en el código fuente controlado por versiones del proyecto de destino antes de importarlo, conservando las importaciones internas de módulos.

Flujo de trabajo

1. Identifica el propósito, dimensiones, paleta, animación y requisitos de transparencia del activo. Lee los tokens de diseño existentes del proyecto antes de elegir colores.
2. Lee la referencia de API. Copia referencePresets[kind] y edita la configuración anidada options[kind] del generador. Confirma el significado de radio, espaciado, cuenta y grosor de trazo.
3. Para sitios web o videos de marketing, lee la sección relevante de guía de integración. Conserva los parámetros y la semilla con el proyecto para que versiones posteriores puedan reproducir el activo.
4. Ejecuta el código e inspecciona la salida real. Verifica dimensiones SVG, transparencia y recorte. Verifica la compilación, renderizado y limpieza de WebGL. Verifica el número de fotogramas del video, transiciones de bucle y alfa en el flujo de trabajo de destino.
5. Entrega el código solicitado, ejemplos de invocación, configuración y archivos de salida. Documenta los parámetros reales utilizados.

Módulos

Módulo	Responsabilidad
geometry.mjs	Despacha a geometry-a, geometry-b y dot-matrix
dot-matrix.mjs	Dimensiones de puntos, espacios entre bordes, formas y diseños
fields.mjs	Despacha a fields-audited para contornos, medios tonos, ASCII y código de píxeles
light.mjs	Renderizado WebGL de estelas y llamas con fase explícita
common.mjs	Validación compartida, aleatoriedad con semilla, normalización de fase, escape XML

Reglas de extensión

• Mantén los generadores SVG puros y deterministas. Los generadores estáticos permanecen estáticos a menos que la persona que llama cambie sus parámetros específicos. WebGL y contornos con movimiento habilitado aceptan fase.
• Mantén la semilla fija entre fotogramas de video. Deriva los parámetros de animación del número de fotograma.
• Actualiza exportaciones, declaraciones, documentación de parámetros y verificaciones relevantes al agregar un tipo o parámetro.
• Reutiliza la biblioteca al adaptarla a React, Three.js o Remotion.
• La matriz de puntos utiliza dotMatrix.dotSize, spacing, layout y range. Su diámetro predeterminado es 8 y el espacio entre bordes es 24. La densidad sigue el espaciado o filas/columnas.
• Inspecciona gráficos transparentes sobre el fondo previsto. Valida el alfa del video decodificado en el editor de destino.
• Utiliza datos comerciales y un codificador estándar para códigos de barras legibles por máquina.

Ejemplos de tareas

• Generar SVG de contorno con colores de marca y conservar sus parámetros.
• Animar hudLines.rotation a partir de un número de fotograma de Remotion.
• Usar RGBA de una imagen de producto como máscara alfa de medios tonos o entrada ASCII.
• Ajustar los parámetros de dirección y energía del renderizador de luz para una superposición en bucle.