kubai087/kubai-icons

Kubai Icons

Este skill incluye una implementación completa: motor, un conjunto completo de iconos de ejemplo, página de demostración, scripts de autocomprobación y scripts de exportación estática. Tu trabajo es escribir nuevos iconos según las reglas, no reescribir el motor.

¿Qué contiene?

• PROMPT.md: todas las reglas de diseño, cada una es un requisito estricto. Léelo completo antes de empezar.
• src/engine.js: el motor. Derivación de colores, máscara de borde exterior, grosor con degradado, filtros de sombra y brillo interior, animación por interpolación y paletas de colores. Reutilízalo directamente, no lo modifiques.
• src/icons.js: iconos de ejemplo. Los nuevos iconos se añaden en el mismo formato.
• src/app.js, index.html: página de demostración. ORDER determina qué iconos se muestran y en qué orden.
• scripts/check.mjs: script de autocomprobación. Captura en Chrome sin cabeza los estados estático, hover, fotogramas intermedios del hover, 24px, 28px y todas las paletas, y lee los errores de script de cada página. Los archivos temporales se guardan en el directorio de salida y se limpian automáticamente.
• scripts/export.mjs: exportación estática. Renderiza los iconos como archivos SVG independientes que no dependen de scripts ni hojas de estilo. Puedes especificar paleta, color principal y estado estático o hover.

Flujo de trabajo

1. Lee PROMPT.md.

2. Determina el formato de entrega. Si el usuario no lo especifica claramente, pregunta primero:

   • Dinámico (por defecto): SVG + JS, se deforma al pasar el ratón, ejecutado por src/engine.js en la página. Ideal para páginas web e interfaces que soportan JS.
   • Estático: archivos .svg independientes, sin animación, utilizables en cualquier lugar: herramientas de diseño, aplicaciones nativas, documentación, <img>. Si el usuario menciona "recortar", "archivo SVG", "meter en Figma", "usar en la App", etc., quiere estático.
   • Ambos: hazlo dinámico y luego exporta una copia estática.

3. Determina dónde hacerlo:

   • Crear un nuevo conjunto: copia index.html, src/, scripts/ a la ubicación de destino (un nuevo directorio o repositorio) y trabaja en esa copia. Conserva las declaraciones de derechos de autor al inicio de cada archivo; PROMPT.md y SKILL.md solo se quedan en el skill, no los copies (consulta la cláusula 3 de LICENSE).
   • Añadir a un conjunto existente: añade directamente en ese src/icons.js.
   • Añadir al repositorio de iconos open source de kubai-icons: cada icono en un archivo separado bajo icons/, con formato, nombre y marcadores según docs/authoring.md. Autocomprobación con node tools/check.mjs --only nombre --with folder,mail,download. Las reglas siguen siendo las de PROMPT.md.
   • Solo estático: copia igualmente al directorio de trabajo, dibuja y entrega solo los SVG exportados.

4. Lee el código del producto y lista las funcionalidades. Para la versión dinámica, escribe cada funcionalidad como "objeto + acción hover"; para la estática, solo necesitas determinar el objeto (sección 1 de PROMPT.md).

5. Antes de escribir cada icono, busca en src/icons.js uno o dos ejemplos con estructura similar (por ejemplo, para algo que se abre, mira el sobre y el calendario; para algo con una pieza frontal recortada, mira descarga y subida; para algo que gira, mira el engranaje y la estrella) y sigue su enfoque.

6. Añade el nombre a ORDER en src/app.js. Los ejemplos que no se usen no se mostrarán si no se ponen en ORDER.

7. Ejecuta la autocomprobación y compara el nuevo icono con algunos existentes:

   node scripts/check.mjs --only IconoNuevoA,IconoNuevoB --with carpeta,correo,descarga
   

   Las capturas estarán en check-out/. Revisa cada punto de la lista de la sección 10 de PROMPT.md; si el script reporta errores, corrígelos primero. Para acciones repetitivas, mira frames.png; para grietas finas, añade --scale 3; para marcas sobre colores claros, añade --accent #F59E0B y cambia todos los iconos al mismo color principal. Sin --only, comprueba todo el conjunto. Para la versión estática, basta con mirar rest.png, size-24.png, size-28.png y palettes.png.

8. Cuando todo esté correcto, actualiza el número de iconos mencionado en README y las columnas de cada punto de ruptura en la página de demostración (el número de columnas debe dividir exactamente el total de iconos; los puntos de ruptura se pueden añadir o eliminar).

9. Para exportación estática, exporta al directorio especificado por el usuario e indícale qué paleta se usó:

   node scripts/export.mjs --only IconoNuevoA,IconoNuevoB --palette color --out directorio_destino
   

   --palette selecciona la paleta por nombre (color, azul-gris, celadón, menta, lavanda, albaricoque, negro), --accent #hex cambia todos los iconos a un solo color principal, --state hover exporta el estado final del hover, --size establece el tamaño en píxeles, --pad deja margen para la sombra. Cada icono se guarda como nombre.svg.

Entorno

• Node 18 o superior, y Chrome. La ruta del navegador se puede sobrescribir con la variable de entorno CHROME.
• Todas las comprobaciones se realizan en modo sin cabeza, no se abre ninguna ventana visible ni se afecta el navegador que esté usando el usuario.

---

Copyright (c) 2026 Kubai087. Licenciado bajo la Licencia de Iconos Kubai; consulta LICENSE.