Svg optimizer

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/svg-optimizer

Optimize SVG assets, generate sprites, and convert to React componentsFrom its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill svg-optimizer

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

SKILL.md

2.7 KB, 563 tokens by cl100k_base, as published. Nobody here has run it

SVG Optimizer Skill

Purpose

Optimize SVG assets for web and mobile use, including compression, sprite generation, and React component conversion.

Capabilities

Remove unnecessary metadata and comments
Optimize paths and shapes
Generate SVG sprites for icon systems
Convert SVGs to React/Vue components
Minify SVG file sizes
Ensure accessibility attributes (aria-labels, roles)
Generate icon documentation

Target Processes

component-library.js (iconSystemDesignTask)
design-system.js

Integration Points

SVGO for optimization
svgr for React component generation
svg-sprite for sprite generation

Input Schema

{
  "type": "object",
  "properties": {
    "inputPath": {
      "type": "string",
      "description": "Path to SVG file or directory"
    },
    "outputPath": {
      "type": "string",
      "description": "Output directory"
    },
    "generateSprite": {
      "type": "boolean",
      "default": false
    },
    "generateComponents": {
      "type": "boolean",
      "default": false
    },
    "componentFormat": {
      "type": "string",
      "enum": ["react", "vue", "svelte"],
      "default": "react"
    },
    "optimizationLevel": {
      "type": "string",
      "enum": ["minimal", "standard", "aggressive"],
      "default": "standard"
    },
    "addAccessibility": {
      "type": "boolean",
      "default": true
    }
  },
  "required": ["inputPath"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "optimizedFiles": {
      "type": "array",
      "description": "List of optimized SVG files"
    },
    "spritePath": {
      "type": "string",
      "description": "Path to generated sprite file"
    },
    "componentPaths": {
      "type": "array",
      "description": "Paths to generated components"
    },
    "sizeSavings": {
      "type": "object",
      "description": "File size reduction statistics"
    },
    "accessibilityReport": {
      "type": "object",
      "description": "Accessibility attributes added"
    }
  }
}

Usage Example

const result = await skill.execute({
  inputPath: './icons',
  outputPath: './optimized-icons',
  generateSprite: true,
  generateComponents: true,
  componentFormat: 'react',
  addAccessibility: true
});

What ships with it: 1 file

1.2 KB alongside SKILL.md

README.md1.2 KB