How do I install the Svg Emote Generation skill?

Run npx skillmds@latest add meyverick/svg-emote-generation in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Svg Emote Generation safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Svg Emote Generation?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Svg Emote Generation free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Svg Emote Generation?

meyverick (@meyverick) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Svg Emote Generation by meyverick — Agent Skill

Name: Svg Emote Generation
Author: meyverick

File contents

SVG Emote Generation

This skill governs the creation of perfectly looping, animated SVG (Scalable Vector Graphics) emotes. It explicitly mandates mathematical precision over disjointed keyframing to ensure buttery smooth rendering across all browsers.

When to Use

Use when creating loaders, spinners, or animated emotes.
Use when modifying SMIL (<animateTransform>) or CSS-based SVG animations.
NOT for complex narrative animations or character rigging (use Rive/Spine instead).

Core Process

Phase 1: Perfect Looping

Ensure the start and end states of the animation are mathematically identical.
For CSS keyframes, 0% and 100% must have the exact same property values. Do not rely on browser extrapolation to bridge gaps.

Phase 2: Viewport & Scaling

SVGs must be perfectly scalable. Use viewBox="0 0 100 100" (or another square ratio) instead of hardcoding width and height in pixels.
Use percentage-based or relative transformations (transform-origin: center) rather than absolute pixel coordinates for rotation and scaling.

Phase 3: Animation Technologies

Prefer CSS @keyframes over SMIL (<animate>) where possible, as SMIL is deprecated in some environments and highly unoptimized.
If using SMIL, ensure repeatCount="indefinite" is applied.

Common Rationalizations

Rationalization	Reality
"The animation has a slight jerk at the end, but it's fine."	A jerk means the loop is mathematically imperfect. You must align the 0% and 100% keyframes flawlessly.
"I'll hardcode the SVG to be `500px` by `500px`."	SVGs must scale to the container. Omit absolute pixel dimensions on the root tag and rely exclusively on the `viewBox`.

Red Flags

Missing viewBox attribute on the root <svg> tag.
Relying on Javascript (requestAnimationFrame) to animate an SVG when CSS keyframes are perfectly capable of doing it.

Verification

Before finalizing the SVG emote:

The viewBox is square and correctly encapsulates all paths.
The animation loops flawlessly without any visual popping or jerking.
CSS @keyframes or SMIL nodes define identical start and end states.

---name: svg-emote-generationdescription: Designs production-ready, perfectly looping SVGs. Use when generating animated emotes, loaders, or math-driven vector graphics.---# SVG Emote GenerationThis skill governs the creation of perfectly looping, animated SVG (Scalable Vector Graphics) emotes. It explicitly mandates mathematical precision over disjointed keyframing to ensure buttery smooth rendering across all browsers.## When to Use- **Use when** creating loaders, spinners, or animated emotes.- **Use when** modifying SMIL (`<animateTransform>`) or CSS-based SVG animations.- **NOT for** complex narrative animations or character rigging (use Rive/Spine instead).## Core Process### Phase 1: Perfect Looping- Ensure the start and end states of the animation are mathematically identical.- For CSS keyframes, 0% and 100% must have the exact same property values. Do not rely on browser extrapolation to bridge gaps.### Phase 2: Viewport & Scaling- SVGs must be perfectly scalable. Use `viewBox="0 0 100 100"` (or another square ratio) instead of hardcoding `width` and `height` in pixels.- Use percentage-based or relative transformations (`transform-origin: center`) rather than absolute pixel coordinates for rotation and scaling.### Phase 3: Animation Technologies- Prefer CSS `@keyframes` over SMIL (`<animate>`) where possible, as SMIL is deprecated in some environments and highly unoptimized.- If using SMIL, ensure `repeatCount="indefinite"` is applied.## Common Rationalizations| Rationalization | Reality ||---|---|| "The animation has a slight jerk at the end, but it's fine." | A jerk means the loop is mathematically imperfect. You must align the 0% and 100% keyframes flawlessly. || "I'll hardcode the SVG to be `500px` by `500px`." | SVGs must scale to the container. Omit absolute pixel dimensions on the root tag and rely exclusively on the `viewBox`. |## Red Flags- Missing `viewBox` attribute on the root `<svg>` tag.- Relying on Javascript (`requestAnimationFrame`) to animate an SVG when CSS keyframes are perfectly capable of doing it.## VerificationBefore finalizing the SVG emote:- [ ] The `viewBox` is square and correctly encapsulates all paths.- [ ] The animation loops flawlessly without any visual popping or jerking.- [ ] CSS `@keyframes` or SMIL nodes define identical start and end states.

Frequently asked questions

Svg Emote Generation