SVGを手描きのアニメーションに変えるエージェント指向のスキルが実現可能。

このリポジトリは意図的に小さいです。 スキル定義、再使用可能なアセット、例1つのデモのみが含まれています。

デフォルトの成果物:

• [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 URLを提供します。 2。 エージェントに最終的な成果物を生成するように依頼してください。 3. これらのデフォルト出力を期待する:

• [preview.html
• [player.js

典型的な例: 要求

• 「このSVGを手描きのプレビューページに入れる」
• 「このSVGからプレビュー.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.