这是一个面向代理人的技能，用于将SVG转化为手绘动画交付物。

该仓库刻意设计得较小。它仅包含技能定义、可复用资源和一个示例演示。

默认交付物：

• preview.html
• player.js

默认行为：

• 先绘制SVG路径
• 事后揭示填充
• 尽可能保持源色的准确性

仓库结构

主文件

• 技能输入：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

如何使用这项技能

典型的代理驱动使用情况：

1. 提供本地SVG文件路径或SVG网址。
2. 让代理生成最终交付物。
3. 预期以下默认输出：

• preview.html
• player.js

典型的请求示例：

• “将这个SVG变成手绘预览页。”
• “从该SVG生成preview.html和player.js。”
• “为该SVG应用手绘路径和填充动画。”

示例

具体例子收录于：

SVG Hand-Drawn Preview Skill

An agent-oriented skill for turning an SVG into a hand-drawn animation deliverable.

This repository is intentionally small. It contains only the skill definition, reusable assets, and one example demo.

Default deliverables:

• preview.html
• player.js

Default behavior:

• draw SVG paths first
• reveal fills afterward
• preserve source colors as closely as possible

Repository Structure

.
├── 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

Main Files

• Skill entry: skills/svg-hand-drawn-preview/SKILL.md
• Reusable player asset: skills/svg-hand-drawn-preview/assets/player.js
• Preview template: skills/svg-hand-drawn-preview/assets/preview-template.html
• Output contract: skills/svg-hand-drawn-preview/references/output-contract.md

How To Use This Skill

Typical agent-driven usage:

1. Provide a local SVG file path or an SVG URL.
2. Ask the agent to generate the final deliverables.
3. Expect these default outputs:
   • preview.html
   • player.js

Typical request examples:

• “Turn this SVG into a hand-drawn preview page.”
• “Generate a preview.html and player.js from this SVG.”
• “Apply a hand-drawn path and fill animation to this SVG.”

Example

A concrete example is included in:

• examples/svg-player-demo/975549_OGFB9T1.svg
• examples/svg-player-demo/svg-player-demo.html

This example is useful for showing the intended result shape of the skill output and for quick manual inspection in a browser.

What The Skill Produces

By default, the agent should generate:

1. preview.html
2. player.js

preview.html is for direct preview.

player.js is for embedding the playback core into another webpage.

Minimal Web Embed

Current player API:

• play()
• pause()
• seek(ratio)
• setSpeed(value)
• destroy()

Notes

• This repository keeps the skill independent from any project-specific demo page.
• The intended workflow is agent-driven output generation.
• End users should not need Python, Node, or another local build step unless a self-serve workflow is added later.
• The example demo is included for quick manual inspection, not as a required runtime dependency of the skill.