licher255/svg-techo

What does svg-techo do?

Use the reusable JavaScript modules in assets/lib/. Change appearance through generator parameters. Extend the appropriate module when a task needs new behavior, then verify its normal entry points.

Entry points

• assets/lib/index.mjs exports materialKinds, svgKinds, referencePresets, renderSvg(kind, options), and createLightRenderer(canvas, options).
• assets/lib/index.d.mts provides TypeScript declarations.
• scripts/render-svg.mjs is the Node CLI.
• scripts/self-test.mjs checks geometry, input bounds, determinism, loops, and RGBA input.
• scripts/browser-check.html checks SVG decoding, WebGL, alpha, phase, and disposal.

Resolve these paths relative to this SKILL.md. Copy the complete assets/lib/ directory into the destination project's version-controlled source before importing it, preserving internal module imports.

Workflow

1. Identify the asset's purpose, dimensions, palette, animation, and transparency requirements. Read the project's existing design tokens before choosing colors.
2. Read the API reference. Copy referencePresets[kind] and edit the generator's nested options[kind] configuration. Confirm the meaning of radius, spacing, count, and stroke width.
3. For websites or marketing videos, read the relevant section of integration guidance. Keep parameters and seed with the project so later versions can reproduce the asset.
4. Execute the code and inspect actual output. Check SVG dimensions, transparency, and clipping. Check WebGL compilation, rendering, and cleanup. Check video frame count, loop transitions, and alpha in the target workflow.
5. Deliver the requested code, invocation examples, configuration, and output files. Document the actual parameters used.

Modules

Module	Responsibility
geometry.mjs	Dispatches to geometry-a, geometry-b, and dot-matrix
dot-matrix.mjs	Dot dimensions, edge gaps, shapes, and layouts
fields.mjs	Dispatches to fields-audited for contours, halftone, ASCII, and pixel code
light.mjs	WebGL streak and flame rendering with explicit phase
common.mjs	Shared validation, seeded randomness, phase normalization, XML escaping

Extension rules

• Keep SVG generators pure and deterministic. Static generators remain static unless the caller changes their specific parameters. WebGL and contours with motion enabled accept phase.
• Keep seed fixed across video frames. Derive animation parameters from frame number.
• Update exports, declarations, parameter documentation, and relevant checks when adding a kind or parameter.
• Reuse the library when adapting to React, Three.js, or Remotion.
• Dot matrix uses dotMatrix.dotSize, spacing, layout, and range. Its default diameter is 8 and edge gap is 24. Density follows spacing or rows/cols.
• Inspect transparent graphics on the intended background. Validate decoded video alpha in the target editor.
• Use business data and a standard encoder for machine-readable barcodes.

Example tasks

• Generate brand-colored contour SVGs and retain their parameters.
• Animate hudLines.rotation from a Remotion frame number.
• Use product-image RGBA as a halftone alpha mask or ASCII input.
• Adjust the light renderer's direction and energy parameters for a looping overlay.