SVG Optimizer

Documents

svg-optimizer

SVG Optimizer is an Agent Skill for documents published in the a5c-ai/babysitter repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

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

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/a5c-ai/babysitter/blob/HEAD/library/specializations/ux-ui-design/skills/svg-optimizer/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/svg-optimizer, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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