Агент-ориентированный навык для превращения SVG в ручную анимацию.

Это хранилище намеренно небольшое. Он содержит только определение навыков, многоразовые активы и один пример демонстрации.

Результаты по умолчанию:

• [[Т0]]
• [[Т1]]

Поведение по умолчанию:

• сначала нарисуйте пути 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
• Контракт на выпуск: [[Т5]]

##Как использовать этот навык

Типичное использование агентов:

1.Предоставьте локальный путь файла SVG или URL-адрес SVG. 2. Попросите агента сгенерировать конечные результаты. 3. Ожидайте эти выходы по умолчанию:

• [[Т6]]
• [[Т7]]

Типичные примеры запросов:

• “Включите этот SVG в нарисованную вручную страницу предварительного просмотра”. Создайте preview.html и player.js из этого SVG.
• “Примените нарисованный вручную путь и заполните анимацию к этому 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.