Name: Animate SVG Wrapper Instead of SVG Element
Author: David-Li0406

About

Imported from David-Li0406/meta-skill-evloving (skill-flow/data/skills-refined-agentskillos-36k/skillsmp/animate-svg-wrapper-instead-of-svg-element/SKILL.md). Install upstream with npx skills add David-Li0406/meta-skill-evloving --skill animate-svg-wrapper-instead-of-svg-element. Copyright stays with the author.

Animate SVG Wrapper Instead of SVG Element

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead.

Incorrect (animating SVG directly - no hardware acceleration):

function LoadingSpinner() {
  return (
    <svg 
      className="animate-spin"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <circle cx="12" cy="12" r="10" stroke="currentColor" />
    </svg>
  )
}

Correct (animating wrapper div - hardware accelerated):

function LoadingSpinner() {
  return (
    <div className="animate-spin">
      <svg 
        width="24" 
        height="24" 
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="10" stroke="currentColor" />
      </svg>
    </div>
  )
}

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/david-li0406-meta-skill-evloving-animate-svg-wrapper-ins-df6060/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

david-li0406-meta-skill-evloving-animate-svg-wrapper-ins-df6060.ocm.jsonjson

{
  "ocm": "1",
  "id": "david-li0406-meta-skill-evloving-animate-svg-wrapper-ins-df6060",
  "kind": "skill",
  "name": "Animate SVG Wrapper Instead of SVG Element",
  "description": "enables hardware acceleration",
  "publisher": "David-Li0406",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "rendering",
      "svg",
      "css",
      "animation",
      "performance",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "enables hardware acceleration"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/David-Li0406/meta-skill-evloving",
      "path": "skill-flow/data/skills-refined-agentskillos-36k/skillsmp/animate-svg-wrapper-instead-of-svg-element/SKILL.md",
      "ref": "ca3a335628981df10c36e00cb9850df2c247ab9a",
      "url": "https://github.com/David-Li0406/meta-skill-evloving/blob/ca3a335628981df10c36e00cb9850df2c247ab9a/skill-flow/data/skills-refined-agentskillos-36k/skillsmp/animate-svg-wrapper-instead-of-svg-element/SKILL.md",
      "key": "David-Li0406/meta-skill-evloving/skill-flow/data/skills-refined-agentskillos-36k/skillsmp/animate-svg-wrapper-instead-of-svg-element/SKILL.md"
    }
  },
  "instructions": "## Animate SVG Wrapper Instead of SVG Element\n\nMany browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.\n\n**Incorrect (animating SVG directly - no hardware acceleration):**\n\n```tsx\nfunction LoadingSpinner() {\n  return (\n    <svg \n      className=\"animate-spin\"\n      width=\"24\" \n      height=\"24\" \n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" />\n    </svg>\n  )\n}\n```\n\n**Correct (animating wrapper div - hardware accelerated):**\n\n```tsx\nfunction LoadingSpinner() {\n  return ",
  "cost": {
    "context_tokens": 253
  }
}

Fetch it by URL: GET /api/v1/registry/david-li0406-meta-skill-evloving-animate-svg-wrapper-ins-df6060/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.