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、Alpha、相位和释放。
这些路径是相对于本 SKILL.md 的。在导入之前，将完整的 assets/lib/ 目录复制到目标项目的版本控制源代码中，并保持内部模块导入不变。
工作流程
- 确定资源的用途、尺寸、调色板、动画和透明度要求。在选择颜色之前，阅读项目现有的设计 Token。
- 阅读 API 参考。复制
referencePresets[kind]并编辑生成器的嵌套options[kind]配置。确认半径、间距、数量和笔画宽度的含义。 - 对于网站或营销视频，阅读相关 集成指南 部分。将参数和种子与项目一起保留，以便后续版本可以复现该资源。
- 执行代码并检查实际输出。检查 SVG 尺寸、透明度和裁剪。检查 WebGL 编译、渲染和清理。检查目标工作流中的视频帧数、循环过渡和 Alpha。
- 提供所请求的代码、调用示例、配置和输出文件。记录实际使用的参数。
模块
| 模块 | 职责 |
|---|---|
geometry.mjs | 分发到 geometry-a、geometry-b 和点阵 |
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。密度由间距或行/列数决定。 - 在预期背景上检查透明图形。在目标编辑器中验证解码后的视频 Alpha。
- 使用业务数据和标准编码器生成机器可读的条形码。
示例任务
- 生成品牌色轮廓 SVG 并保留其参数。
- 根据 Remotion 帧号动画化
hudLines.rotation。 - 使用产品图像 RGBA 作为半色调 Alpha 蒙版或 ASCII 输入。
- 调整光渲染器的方向和能量参数以创建循环叠加层。