kubai087/kubai-icons

Ícones Kubai

Este skill vem com uma implementação completa: motor, conjunto de ícones de exemplo, página de demonstração, script de verificação automática e script de exportação estática. Seu trabalho é escrever novos ícones seguindo as regras, não reescrever o motor.

O que está incluído

• PROMPT.md: Todas as regras de design, cada uma é um requisito obrigatório. Leia completamente antes de começar.
• src/engine.js: Motor. Derivação de cores, máscara de contorno externo, espessura com gradiente, filtros de sombra projetada e brilho interno, animação por interpolação e paletas de cores estão aqui. Reutilize diretamente, não modifique.
• src/icons.js: Ícones de exemplo. Novos ícones devem ser adicionados no mesmo formato.
• src/app.js, index.html: Página de demonstração. ORDER determina quais ícones são exibidos e em que ordem.
• scripts/check.mjs: Script de verificação automática. Captura frames estáticos, hover, intermediários, 24px, 28px e todas as paletas em um Chrome headless, e lê erros de script de cada página. Arquivos temporários são colocados no diretório de saída e limpos automaticamente.
• scripts/export.mjs: Exportação estática. Renderiza ícones como arquivos SVG independentes, sem dependência de scripts ou folhas de estilo, podendo especificar paleta, cor principal e estado (estático ou hover).

Fluxo de trabalho

1. Leia PROMPT.md.

2. Determine a forma de entrega. Se o usuário não especificar, pergunte primeiro:

   • Dinâmico (padrão): SVG + JS, com deformação ao passar o mouse, executado pelo src/engine.js na página. Adequado para páginas web e interfaces que suportam JS.
   • Estático: arquivos .svg independentes, sem animação, utilizáveis em qualquer lugar: ferramentas de design, apps nativos, documentação, <img>. Quando o usuário menciona "recorte", "arquivo SVG", "colocar no Figma", "usar no App", é estático.
   • Ambos: Faça a versão dinâmica e depois exporte uma versão estática.

3. Determine onde fazer:

   • Novo conjunto: Copie o index.html, src/, scripts/ deste skill para o local de destino (um novo diretório ou repositório) e trabalhe nessa cópia. Mantenha os avisos de copyright no início de cada arquivo; PROMPT.md e SKILL.md ficam apenas no skill, não os copie (veja a cláusula 3 da LICENSE).
   • Adicionar a um conjunto existente: Adicione diretamente no src/icons.js desse conjunto.
   • Adicionar ao repositório de ícones de código aberto kubai-icons: Cada ícone em um arquivo separado em icons/, formato, nomeação e badge conforme docs/authoring.md, verificação com node tools/check.mjs --only nome --with folder,mail,download. As regras ainda seguem PROMPT.md.
   • Apenas estático: Copie para um diretório de trabalho, desenhe e entregue apenas os SVGs exportados ao usuário.

4. Leia o código do produto e liste as funcionalidades. Para a versão dinâmica, escreva uma frase "objeto + ação ao passar o mouse" para cada funcionalidade; para a versão estática, basta determinar o objeto (seção 1 do PROMPT.md).

5. Antes de escrever cada ícone, encontre um ou dois exemplos no src/icons.js com estrutura mais próxima (ex.: coisas que abrem, veja envelope e calendário; coisas com recorte frontal, veja download e upload; coisas que giram, veja engrenagem e estrela) e siga o padrão deles.

6. Adicione o nome ao ORDER em src/app.js. Ícones de exemplo não usados não serão exibidos se não estiverem em ORDER.

7. Execute a verificação automática, comparando o novo ícone com alguns existentes:

   node scripts/check.mjs --only NovoIconeA,NovoIconeB --with pasta,email,download
   

   As capturas de tela estarão em check-out/. Verifique item por item da lista da seção 10 do PROMPT.md; corrija erros reportados pelo script primeiro. Para ações de vai-e-vem, veja frames.png; para verificar fendas, adicione --scale 3; para verificar marcas em cores claras, adicione --accent #F59E0B e mude todos os ícones para a mesma cor principal. Sem --only, verifica o conjunto inteiro. Para versão estática, basta verificar rest.png, size-24.png, size-28.png e palettes.png.

8. Após passar em todas as verificações, atualize a contagem de ícones no README e o número de colunas em cada ponto de quebra da página de demonstração (as colunas devem dividir o total de ícones exatamente; pontos de quebra podem ser adicionados ou removidos).

9. Para versão estática, exporte para o diretório especificado pelo usuário e informe qual paleta foi usada:

   node scripts/export.mjs --only NovoIconeA,NovoIconeB --palette colorido --out diretorio_destino
   

   --palette seleciona a paleta pelo nome (colorido, azul-cinza, celadon, menta, lavanda, damasco, preto), --accent #hex muda todos os ícones para uma cor principal, --state hover exporta o estado final do hover, --size define o tamanho em pixels, --pad adiciona margem para a sombra projetada. Cada ícone gera um arquivo nome.svg.

Ambiente

• Node 18 ou superior e Chrome. O caminho do navegador pode ser sobrescrito pela variável de ambiente CHROME.
• Todas as verificações são executadas em modo headless, sem abrir janelas visíveis ou interferir no navegador que o usuário está usando.

---

Copyright (c) 2026 Kubai087. Licenciado sob a Licença de Ícones Kubai; veja LICENSE.