licher255/svg-techo

Que fait svg-techo ?

Utilisez les modules JavaScript réutilisables dans assets/lib/. Modifiez l'apparence via les paramètres du générateur. Étendez le module approprié lorsqu'une tâche nécessite un nouveau comportement, puis vérifiez ses points d'entrée normaux.

Points d'entrée

• assets/lib/index.mjs exporte materialKinds, svgKinds, referencePresets, renderSvg(kind, options) et createLightRenderer(canvas, options).
• assets/lib/index.d.mts fournit les déclarations TypeScript.
• scripts/render-svg.mjs est l'interface en ligne de commande Node.
• scripts/self-test.mjs vérifie la géométrie, les limites d'entrée, le déterminisme, les boucles et l'entrée RGBA.
• scripts/browser-check.html vérifie le décodage SVG, WebGL, l'alpha, la phase et la libération des ressources.

Résolvez ces chemins relativement à ce SKILL.md. Copiez le répertoire complet assets/lib/ dans la source sous contrôle de version du projet de destination avant de l'importer, en préservant les imports internes des modules.

Workflow

1. Identifiez le but de l'actif, ses dimensions, sa palette, son animation et ses exigences de transparence. Lisez les tokens de design existants du projet avant de choisir les couleurs.
2. Lisez la référence API. Copiez referencePresets[kind] et éditez la configuration imbriquée options[kind] du générateur. Confirmez la signification du rayon, de l'espacement, du nombre et de la largeur du trait.
3. Pour les sites web ou les vidéos marketing, lisez la section pertinente des conseils d'intégration. Conservez les paramètres et la graine avec le projet afin que les versions ultérieures puissent reproduire l'actif.
4. Exécutez le code et inspectez la sortie réelle. Vérifiez les dimensions SVG, la transparence et le recadrage. Vérifiez la compilation WebGL, le rendu et le nettoyage. Vérifiez le nombre d'images vidéo, les transitions de boucle et l'alpha dans le workflow cible.
5. Fournissez le code demandé, les exemples d'invocation, la configuration et les fichiers de sortie. Documentez les paramètres réels utilisés.

Modules

Module	Responsabilité
geometry.mjs	Distribue vers geometry-a, geometry-b et dot-matrix
dot-matrix.mjs	Dimensions des points, espacements des bords, formes et dispositions
fields.mjs	Distribue vers fields-audited pour les contours, le halftone, l'ASCII et le code pixel
light.mjs	Rendu WebGL de traînée et de flamme avec phase explicite
common.mjs	Validation partagée, aléatoire basé sur une graine, normalisation de phase, échappement XML

Règles d'extension

• Gardez les générateurs SVG purs et déterministes. Les générateurs statiques restent statiques sauf si l'appelant modifie leurs paramètres spécifiques. WebGL et les contours avec mouvement activé acceptent la phase.
• Maintenez la graine fixe sur toutes les images vidéo. Dérivez les paramètres d'animation du numéro d'image.
• Mettez à jour les exports, les déclarations, la documentation des paramètres et les vérifications pertinentes lors de l'ajout d'un type ou d'un paramètre.
• Réutilisez la bibliothèque lors de l'adaptation à React, Three.js ou Remotion.
• La matrice de points utilise dotMatrix.dotSize, spacing, layout et range. Son diamètre par défaut est 8 et l'espacement des bords est 24. La densité suit l'espacement ou le nombre de lignes/colonnes.
• Inspectez les graphiques transparents sur le fond prévu. Validez l'alpha vidéo décodé dans l'éditeur cible.
• Utilisez des données métier et un encodeur standard pour les codes-barres lisibles par machine.

Exemples de tâches

• Générer des SVG de contour aux couleurs de la marque et conserver leurs paramètres.
• Animer hudLines.rotation à partir d'un numéro d'image Remotion.
• Utiliser le RGBA d'une image produit comme masque alpha halftone ou entrée ASCII.
• Ajuster les paramètres de direction et d'énergie du moteur de rendu lumineux pour une superposition en boucle.