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

<div id="svg-player"></div>
<script src="./player.js"></script>
<script>
  createSvgHanddrawPlayer("#svg-player", {
    svgMarkup: "<svg>...</svg>",
    speed: 1
  });
</script>

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.