Landing
alirezarezvani/claude-skills
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth.
Turns an SVG file or URL into a hand-drawn animation: a standalone preview.html plus a reusable player.js that draws paths first and fills afterward.
Install SVG Hand-Drawn Animation Preview
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-preview --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/svg-hand-drawn-preview .claude/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .claude/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-previewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-preview --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/svg-hand-drawn-preview .agents/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .agents/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-preview --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/svg-hand-drawn-preview .cursor/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .cursor/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/shaom/svg-hand-drawn-skill.git --path skills/svg-hand-drawn-preview--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-preview --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/svg-hand-drawn-preview .gemini/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .gemini/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-previewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/svg-hand-drawn-preview .github/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .github/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shaom/svg-hand-drawn-skill svg-hand-drawn-preview --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shaom/svg-hand-drawn-skill.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/svg-hand-drawn-preview .opencode/skills/svg-hand-drawn-preview && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "svg-hand-drawn-preview" agent skill from https://github.com/shaom/svg-hand-drawn-skill/tree/main/skills/svg-hand-drawn-preview into .opencode/skills/svg-hand-drawn-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-hand-drawn-preview", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
svg-hand-drawn-preview- GitHub stars
- 264
- Token cost
- ~1.3k tokens
- SKILL.md length
- 709 words
- Files
- 5 (incl. references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Turns an SVG file or URL into a hand-drawn animation: a standalone preview.html plus a reusable player.js that draws paths first and fills afterward.
- Turning a logo or illustration SVG into a drawing animation
- SKILL.md covers What To Produce, Inputs, Workflow and Output Rules, plus 4 more sections
- Runs JavaScript scripts from its folder
- Creating a standalone HTML preview of an SVG animation
What it does
This skill turns an SVG, supplied as a local file or URL, into a hand-drawn animation deliverable. By default the agent writes the files itself, without asking you to run Python, Node or a build step, and produces a self-contained preview.html that opens in a browser plus a reusable player.js for embedding in another page.
The animation draws the paths first and then reveals the fills, keeps the source colors and opacity, and offers play, speed and progress controls when useful. The agent first inspects the SVG for stroke-based, fill-only or mixed shapes and for constructs it cannot reproduce faithfully, such as foreignObject, raster images or masks, then marks drawable paths and separates path timing from fill timing. Fill-only shapes get a fill layer plus a temporary stroke layer. Optional extras are an animated.svg, an animation-plan.json and an embed demo page.
When your agent uses it
- Turning a logo or illustration SVG into a drawing animation
- Creating a standalone HTML preview of an SVG animation
- Getting a reusable player script to embed an SVG animation in a page
- Checking whether an SVG uses constructs that cannot be animated faithfully
Example prompts
- “Turn ./logo.svg into a hand-drawn animation with a preview page.”
- “Animate this SVG from a URL so the outlines draw first and the fills fade in, with a speed control.”
- “Also give me animated.svg and the animation plan JSON for the logo.”
What it can do on your machine
Read from SKILL.md and the folder at commit 2c87dea. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
SVG Hand-Drawn Animation Preview loads about 1.3k tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 709 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 709 words (~1,349 tokens).
“Use this skill when the task is to turn an SVG into a hand-drawn animation deliverable.”
- name
- svg-hand-drawn-preview
Files
SKILL.md and 4 other files (references, assets) in skills/svg-hand-drawn-preview of shaom/svg-hand-drawn-skill.
- SKILL.md
- assets/player.js
- assets/preview-template.html
- references/html-preview-guidelines.md
- references/output-contract.md
Open the folder on GitHubat commit 2c87dea
Compare with similar skills
SVG Hand-Drawn Animation Preview next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| SVG Hand-Drawn Animation Preview this skillshaom/svg-hand-drawn-skill | 264 | — | ~1.3k | Automated safety check: Pass | None | |
| Landingalirezarezvani/claude-skills | 28k | — | ~3.8k | Automated safety check: Pass | MIT | |
| SN Motion HTMLOpenSenseNova/SenseNova-Skills | 5.7k | — | ~2.2k | Automated safety check: Notes | MIT | |
| Card TheaterUnclecheng-li/AI_Animation | 1.5k | — | ~877 | Automated safety check: Pass | MIT | |
| Tufte Reportglebis/claude-skills | 391 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Slideszarazhangrui/frontend-slides | 30k | 16 repos | ~7k | Automated safety check: Pass | MIT |
Similar skills
SN Motion HTML
OpenSenseNova/SenseNova-Skills
Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA.
Card Theater
Unclecheng-li/AI_Animation
Generates a single-file HTML presentation that pairs a narrated sidebar with a 3D card carousel, for walking through protocols, product features or step-by-step processes.
Tufte Report
glebis/claude-skills
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files.
Frontend Slides
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
Scroll World Landing Page
oso95/scroll-world
Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.
Related
Categories
Questions about SVG Hand-Drawn Animation Preview
What does SVG Hand-Drawn Animation Preview do?
Turns an SVG file or URL into a hand-drawn animation: a standalone preview.html plus a reusable player.js that draws paths first and fills afterward. This skill turns an SVG, supplied as a local file or URL, into a hand-drawn animation deliverable.js for embedding in another page.
When should I use SVG Hand-Drawn Animation Preview?
SVG Hand-Drawn Animation Preview fits situations like: turning a logo or illustration SVG into a drawing animation; creating a standalone HTML preview of an SVG animation; getting a reusable player script to embed an SVG animation in a page; checking whether an SVG uses constructs that cannot be animated faithfully.
How do I install SVG Hand-Drawn Animation Preview in Claude Code?
Run `npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a claude-code`. Or copy the skill folder (skills/svg-hand-drawn-preview in shaom/svg-hand-drawn-skill) into .claude/skills/svg-hand-drawn-preview in your project. Claude Code loads it when a task matches its description.
How do I install SVG Hand-Drawn Animation Preview in Codex?
Run `npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a codex`. Or copy the skill folder (skills/svg-hand-drawn-preview in shaom/svg-hand-drawn-skill) into .agents/skills/svg-hand-drawn-preview in your project. Codex loads it when a task matches its description.
Can I use SVG Hand-Drawn Animation Preview in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shaom/svg-hand-drawn-skill --skill svg-hand-drawn-preview -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/svg-hand-drawn-preview, .gemini/skills/svg-hand-drawn-preview, .github/skills/svg-hand-drawn-preview and .opencode/skills/svg-hand-drawn-preview in your project.
What does SVG Hand-Drawn Animation Preview need to run?
Going by SKILL.md and its folder, SVG Hand-Drawn Animation Preview needs JavaScript for the scripts in its folder.
Does SVG Hand-Drawn Animation Preview access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is SVG Hand-Drawn Animation Preview safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does SVG Hand-Drawn Animation Preview use?
No licence was found for SVG Hand-Drawn Animation Preview or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does SVG Hand-Drawn Animation Preview use?
About 1.3k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1k tokens, read only when the agent opens those files.
What are the alternatives to SVG Hand-Drawn Animation Preview?
Skills that share tags, products or a category with SVG Hand-Drawn Animation Preview: Landing (alirezarezvani/claude-skills, 28k stars), SN Motion HTML (OpenSenseNova/SenseNova-Skills, 5.7k stars), Card Theater (Unclecheng-li/AI_Animation, 1.5k stars) and Tufte Report (glebis/claude-skills, 391 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains SVG Hand-Drawn Animation Preview?
shaom (a GitHub user) maintains it in shaom/svg-hand-drawn-skill, which has 264 GitHub stars. The repository was last updated on April 13, 2026.
Source: shaom/svg-hand-drawn-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.