shaom/svg-hand-drawn-skill

# SVG 手绘预览技能 一个面向 Agent 的技能，用于将 SVG 转换为手绘动画交付物。 此仓库特意保持精简。它仅包含技能定义、可复用资产以及一个示例演示。  默认交付物： - `preview.html` - `player.js` 默认行为： - 先绘制 SVG 路径 - 随后显示填充 - 尽可能保留原始颜色 ## 仓库结构 ``` . ├── README.md ├── .gitignore ├── examples │ └── svg-player-demo │ ├── 975549_OGFB9T1.svg │ └── svg-player-demo.html └── skills └── svg-hand-drawn-preview ├── SKILL.md ├── assets │ ├── player.js │ └── preview-template.html └── references ├── html-preview-guidelines.md └── output-contract.md ``` ## 主要文件 - 技能入口：`skills/svg-hand-drawn-preview/SKILL.md` - 可复用播放器资产：`skills/svg-hand-drawn-preview/assets/player.js` - 预览模板：`skills/svg-hand-drawn-preview/assets/preview-template.html` - 输出契约：`skills/svg-hand-drawn-preview/references/output-contract.md` ## 如何使用此技能 典型的 Agent 驱动用法： 1. 提供本地 SVG 文件路径或 SVG URL。 2. 让 Agent 生成最终交付物。 3. 预期会有以下默认输出： - `preview.html` - `player.js` 典型请求示例： - “将此 SVG 转换为手绘预览页面。” - “从此 SVG 生成 preview.html 和 player.js。” - “对此 SVG 应用手绘路径和填充动画。” ## 示例 具体示例包含在： - `examples/svg-player-demo/975549_OGFB9T1.svg` - `examples/svg-player-demo/svg-player-demo.html` 此示例有助于展示技能输出的预期结果形态，并方便在浏览器中进行快速手动检查。 ## 技能生成的内容 默认情况下，Agent 应生成： 1. `preview.html` 2. `player.js` `preview.html` 用于直接预览。 `player.js` 用于将播放核心嵌入到其他网页中。 ## 最小 Web 嵌入 ``` ``` 当前播放器 API： - `play()` - `pause()` - `seek(ratio)` - `setSpeed(value)` - `destroy()` ## 备注 - 此仓库使该技能独立于任何特定项目的演示页面。 - 预期的工作流是 Agent 驱动的输出生成。 - 最终用户无需 Python、Node 或其他本地构建步骤，除非日后添加自助式工作流。 - 包含的示例演示仅用于快速手动检查，并不是该技能必需的运行时依赖。

标签：AI代理, Mutation, SVG, 前端动画, 可视化, 多模态安全, 数据可视化, 生成式工具, 自定义脚本