Babysitter svg-optimizer

Optimize SVG assets, generate sprites, and convert to React components

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/ux-ui-design/skills/svg-optimizer" ~/.claude/skills/a5c-ai-babysitter-svg-optimizer && rm -rf "$T"

manifest: library/specializations/ux-ui-design/skills/svg-optimizer/SKILL.md

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
});