agentsclimarketplace

Svg emote generation

Skill meyverick/agy-skills/skills/svg-emote-generation

A collection of elite, modular, and validated AI agent skills and system rules for Google Antigravity.

Install
npx -y skills add meyverick/agy-skills --skill svg-emote-generation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Designs production-ready, perfectly looping SVGs. Use when generating animated emotes, loaders, or math-driven vector graphics.

SKILL.md

2.3 KB, as published. Nobody here has run it

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

RationalizationReality
"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.

Gives 0 of the 12 instructions most images graphics skills give

Counted across 371 of the 372 authors here whose files we hold, read 2026-08-06

  • create a complete brand world in one imagein 19 of 371, across 5 files
  • infer the brand strategy before generatingin 19 of 371, across 5 files
  • use a clean presentation gridin 19 of 371, across 5 files
  • confirm connection status is activein 19 of 371, across 4 files
  • base the visual system on meaningin 17 of 371, across 3 files
  • use very little textin 17 of 371, across 3 files
  • make every panel feel connectedin 17 of 371, across 3 files
  • call RUBE_SEARCH_TOOLS firstin 17 of 371, across 3 files
  • convert dash-format node IDs to colon formatin 17 of 371, across 5 files
  • match reference quality and rhythm if providedin 16 of 371, across 2 files
  • narrow scope or reduce depth to avoid oversized payloadsin 16 of 371, across 4 files
  • generate a simple and memorable logoin 15 of 371, across 1 file

Said here and by no other author read

  • match start and end animation states mathematically
  • make 0% and 100% CSS keyframes exactly identical
  • omit hardcoded width and height in pixels
  • use relative transforms over absolute pixel coordinates
  • prefer CSS keyframes over SMIL
  • set SMIL repeatCount to indefinite

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.