SVG를 손으로 그리는 애니메이션으로 전환하는 에이전트 지향적인 기술.

이 저장소는 의도적으로 작습니다. 기술 정의, 재사용 가능한 자산 및 하나의 예 데모만 포함합니다.

기본 제공:

• [T0]]
• 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. 이 과태 산출을 예상하십시오:

• [T6]]
• [T7]]

일반적인 요청 예제:

• “이 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.