svg-hand-drawn-preview

svg-hand-drawn-preview is a skill for Claude Code, Codex from Ertinox7711/SGRR-AGI-V2. It costs 56 tokens per session (1,111 once invoked), scanned A, original, MIT.

An SVG animation package generator for turning an SVG image into a hand-drawn-style preview. SVG is a web image format that describes shapes and paths as text.

In plain words
What is it for?
Use it to animate SVG paths and fills, create a preview.html file, and provide a player.js file for embedding the animation elsewhere.
Why use it?
It provides a browser-openable preview and reusable playback code without requiring a separate build step.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to animate SVG paths and fills, create a preview.html file, and provide a player.js file for embedding the animation elsewhere.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add Ertinox7711/SGRR-AGI-V2 --skill svg-hand-drawn
Clone the repo
git clone --depth 1 https://github.com/Ertinox7711/SGRR-AGI-V2

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for svg-hand-drawn-preview

README.md
[![agentmods](https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn/github.svg)](https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn)
Your own site
<a href="https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for svg-hand-drawn-preview

Your own site · 80×15
<a href="https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/svg-hand-drawn.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,111 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00056 $0.01111
Opus 5 $0.00028 $0.00556
Sonnet 5 $0.00011 $0.00222
Haiku 4.5 $0.00006 $0.00111

Measured 3d ago against content hash 075f4c321a84, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

svg-hand-drawn-preview scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/svg-hand-drawn/SKILL.md · 134 lines

How it starts

The opening of the file, as written. The whole thing — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.

SVG Hand-Drawn Preview

Use this skill when the task is to turn an SVG into a hand-drawn animation deliverable.

Default operating mode:

  • The agent should generate the output files directly for the user.
  • Do not require the user to run Python, Node, or any local build step unless they explicitly ask for a self-serve generator.

Default output:

  • A standalone preview.html file that can be opened directly in the browser
  • A reusable player.js file for embedding into another web page

Optional side outputs:

  • animated.svg
  • animation-plan.json
  • an embed demo page when the user wants component-style integration

Keep this skill independent from any project-specific demo page unless the user explicitly asks to integrate into an existing file.

What To Produce

By default, produce:

  • a self-contained preview.html
  • a reusable player.js

The default result should:

  • load a target SVG file or inline SVG markup
  • animates path drawing first
  • animates fill afterward
  • expose a compact control surface when useful: play, speed, progress
  • preserves source colors as closely as possible
  • reuse the same playback core across both outputs

Only produce side artifacts when they help:

  • animated.svg for reuse in other apps
  • animation-plan.json when the user wants structured animation metadata
  • an embed demo page when the user wants to show integration inside a normal web page

Inputs

Accept either:

  • a local SVG file path
  • an SVG URL

Optional inputs:

  • preferred animation mode
  • desired output file name
  • whether to include playback controls
  • whether to emit side artifacts

If the user does not specify these, use:

  • output: preview.html plus player.js
  • include controls: yes
  • default animation: path draw plus fill reveal

Workflow

  1. Inspect the SVG source first.
  • Check whether shapes are stroke-based, fill-only, or mixed.
  • Check whether colors live in attributes or inline style.
  • Check whether there are unsupported constructs such as foreignObject, raster images, or masks that cannot be reproduced faithfully.

Read the full file on GitHub · 134 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 134 lines · 56 tokens per session scan A 075f4c321a84

Subscribe to this mod's changes

svg-hand-drawn-preview is a skill published in the GitHub repository Ertinox7711/SGRR-AGI-V2 (1 stars, last pushed 4d ago), licensed MIT. It adds 56 tokens to every session and 1,111 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-09.

Related

Other skills, from other repositories

cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). PROACTIVE ACTIVATION: Use this skill automatically when working in Next.js projects that have cacheComponents: true in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best…

sangrokjung/claude-forge · 183 tokens

frontend-code-review

Trigger when the user requests a review of frontend files (e.g., .tsx, .ts, .js). Support both pending-change reviews and focused file reviews while applying the checklist rules.

sangrokjung/claude-forge · 42 tokens

docs-release-notes

Use when a change needs a user-visible release-note, changelog, or changeset entry — "add a release note", "add a changeset for this", "what goes in the changelog?", "write up what shipped", "note this for the next release" — or when finalizing a branch whose customer-visible features, bug fixes, or UI changes should…

The01Geek/prflow · 106 tokens

ag-referencia-design-presentation

Taxonomia de 86 layouts apresentacao/marketing (hero, pricing, auth, nav, CTA, etc) adaptada do VibeUI. Consultar ANTES de landing pages, onboarding, auth screens.

andregusman-raiz/a-gusman-claude · 50 tokens

ag-auditar-react-hooks

Auditor de Hooks React. Detecta violacoes das Rules of Hooks, deps faltando/excessivas em useEffect/useMemo/useCallback, candidatos a custom hook, useState que deveria virar useReducer. Use para audit qualidade React proativo.

andregusman-raiz/a-gusman-claude · 57 tokens

ag-referencia-motion

Motion/animação de UI: gate de frequência, 3 curvas canônicas, durações <300ms, springs, interruptibilidade, 13 receitas prontas (RECIPES.md). Carregar ANTES de animar qualquer componente, revisar motion ou escolher lib de animação.

andregusman-raiz/a-gusman-claude · 63 tokens