svg-techo は何をしますか？

assets/lib/ にある再利用可能なJavaScriptモジュールを使用します。ジェネレーターのパラメータを変更して外観を変えます。タスクに新しい動作が必要な場合は適切なモジュールを拡張し、その後通常のエントリポイントが動作することを確認します。

エントリポイント

assets/lib/index.mjs は materialKinds、svgKinds、referencePresets、renderSvg(kind, options)、createLightRenderer(canvas, options) をエクスポートします。
assets/lib/index.d.mts はTypeScriptの型宣言を提供します。
scripts/render-svg.mjs はNode CLIです。
scripts/self-test.mjs はジオメトリ、入力範囲、決定性、ループ、RGBA入力をチェックします。
scripts/browser-check.html はSVGデコード、WebGL、アルファ、フェーズ、後処理をチェックします。

これらのパスはこのSKILL.mdからの相対パスで解決します。assets/lib/ ディレクトリ全体をインポート前に、コピー先プロジェクトのバージョン管理下のソースにコピーしてください。内部モジュールのインポートはそのまま維持します。

アセットの目的、寸法、パレット、アニメーション、透明度の要件を特定します。色を選ぶ前に、プロジェクトの既存のデザイントークンを読んでください。
APIリファレンスを読んでください。referencePresets[kind] をコピーし、ジェネレーターのネストされた options[kind] 設定を編集します。半径、間隔、カウント、ストローク幅の意味を確認してください。
ウェブサイトやマーケティング動画の場合は、統合ガイダンスの該当セクションを読んでください。パラメータとシードをプロジェクトと一緒に保持し、後のバージョンでアセットを再現できるようにします。
コードを実行し、実際の出力を確認します。SVGの寸法、透明度、クリッピングをチェックしてください。WebGLのコンパイル、レンダリング、クリーンアップをチェックします。動画のフレーム数、ループ遷移、ターゲットワークフローでのアルファをチェックします。
要求されたコード、呼び出し例、設定、出力ファイルを提供します。実際に使用したパラメータを文書化します。

モジュール	責務
`geometry.mjs`	geometry-a、geometry-b、dot-matrix へのディスパッチ
`dot-matrix.mjs`	ドットの寸法、エッジギャップ、形状、レイアウト
`fields.mjs`	fields-audited へのディスパッチ（等高線、ハーフトーン、ASCII、ピクセルコード）
`light.mjs`	明示的なフェーズを持つWebGLストリークおよびフレームレンダリング
`common.mjs`	共有のバリデーション、シード付き乱数、フェーズ正規化、XMLエスケープ

SVGジェネレーターは純粋で決定論的に保ちます。静的ジェネレーターは、呼び出し元が特定のパラメータを変更しない限り静的のままです。モーションが有効なWebGL、等高線はフェーズを受け入れます。
シードは動画フレーム間で固定します。アニメーションパラメータはフレーム番号から導出します。
種類やパラメータを追加するときは、エクスポート、宣言、パラメータのドキュメント、関連するチェックを更新します。
React、Three.js、Remotionに適応する際はライブラリを再利用します。
ドットマトリックスは dotMatrix.dotSize、spacing、layout、range を使用します。デフォルトの直径は8、エッジギャップは24です。密度は間隔または行/列に従います。
透明なグラフィックスは意図した背景で検査します。ターゲットエディタでデコードされた動画のアルファを検証します。
機械可読なバーコードにはビジネスデータと標準エンコーダを使用します。