Skill de Limpieza de SVG

Un skill de Claude para limpiar, optimizar y procesar por lotes archivos SVG con soporte para generación de sprites.

Características

• 🧹 Limpieza de archivos SVG: Fusionar rutas, eliminar fondos, convertir a currentColor
• ⚡ Optimización: Integración de SVGO con opción de optimización manual
• 📦 Procesamiento por lotes: Procesar carpetas completas de SVG a la vez
• 🎨 Generación de sprites: Crear automáticamente sprites SVG a partir de carpetas
• 🎯 Extracción de elementos: Extraer porciones específicas (p. ej., letras individuales de logotipos)

Qué hace

Procesamiento de un solo archivo

• Fusiona múltiples rutas en una sola
• Elimina fondos y clipPaths
• Aplica currentColor para un tema flexible
• Optimiza con SVGO (reducción de tamaño del 25-35%)

Procesamiento por lotes de carpetas

• Encuentra todos los archivos .svg en una carpeta
• Limpia cada SVG individualmente
• Guarda como filename-cc.svg
• Crea un sprite combinado como foldername-sprite-cc.svg

Instalación

A. Claude AI (Claude en la nube)

1. Descarga svg-cleaner.skill
2. Abre Claude.ai
3. Ve a Configuración → Skills
4. Sube el archivo .skill

B. Claude Code o CLI (instalación local)

1. Descarga svg-cleaner.skill
2. Cambia la extensión del archivo a zip svg-cleaner.skill → svg-cleaner.zip
3. Descomprime el archivo .zip en la carpeta ~/.claude/skills/
4. Elimina el archivo zip

Ejemplos de uso

Limpiar un solo SVG:

Limpiar este SVG de logotipo y aplicar currentColor

Procesar una carpeta:

Limpiar todos los SVG en /ruta/a/iconos/ y crear un sprite

Extraer elemento específico:

Extraer solo la letra "g" de este logotipo

Archivos de salida

Modo de archivo único:

• filename-clean.svg - Rutas fusionadas, sin fondo
• filename-currentcolor.svg - Con currentColor aplicado
• filename-optimized.svg - Procesado con SVGO

Modo de carpeta por lotes:

• filename-cc.svg - Cada SVG limpio
• foldername-sprite-cc.svg - Sprite combinado con todos los iconos

Uso del sprite

Usa los sprites generados en HTML:

<svg>
  <use href="icons-sprite-cc.svg#logo"/>
</svg>

Requisitos

• Claude Desktop o Claude.ai con Skills habilitado
• Opcional: Node.js (para optimización con SVGO)

Licencia

Licencia MIT - Consulta el archivo LICENSE para más detalles

Contribuir

¡Se aceptan informes de problemas y pull requests!

Autor

Creado por Daniel Serrano para Claude Skills