Biblioteca Illos
O Illos.dev possui 158 ilustrações SVG animadas em quatro temas, cada um nos modos claro e escuro. Cada uma é um único arquivo SVG com sua animação embutida. Esta skill encontra as ilustrações certas para um projeto e as adiciona.
1. Encontre os lugares que precisam de uma imagem
Leia as páginas em que você está trabalhando. Para cada hero, seção de recursos, estado vazio, página de documentação ou etapa de onboarding, anote em poucas palavras o que ela explica: "chaves de API", "uma caixa de entrada de notificações vazia", "um deploy em andamento". Essa frase é o que você usará para pesquisar.
2. Escolha um tema para todo o site
Todas as páginas devem usar o mesmo tema, para que as ilustrações pareçam um conjunto coeso.
| Tema | Aparência | Adequado para |
|---|---|---|
| Shader | Um campo de densidade de barras finas com caixas ciano na parte que importa | Produtos de IA, dados e infraestrutura |
| HUD | Wireframe brilhante e leituras de instrumentos | Monitoramento, status, segurança, dashboards |
| Isométrico | Ilustrações isométricas com rótulos; as cores seguem o cartão | Ferramentas de desenvolvedor, APIs, documentação, funcionalidades SaaS |
| Interface | Telas de produto: caixas de entrada, quadros de tarefas, gráficos | Estados vazios e onboarding dentro de um aplicativo |
Se o projeto já possui ilustrações Illos (SVGs com um atributo data-illos, ou componentes chamados Illos...), mantenha o tema delas. Caso contrário, sugira um tema ao usuário e use-o em todos os lugares, a menos que ele escolha outro.
3. Encontre ilustrações correspondentes
- Se as ferramentas MCP do Illos estiverem disponíveis (
find_illustrations,get_illustration), use-as: elas pesquisam por significado e retornam o comando de instalação. - Caso contrário, acesse
https://illos.dev/catalog.json. Cada entrada possuiname(nome),sentence(frase que mostra o que é),theme(tema),size(tamanho:spot,sectionoupage),access(acesso:freeoupro),page(página) e, para as gratuitas,svg. Compare sua frase comnameesentence, dentro do tema escolhido.
Tamanhos: spot para cartões, seções pequenas e estados vazios; section para uma seção de recurso ou hero; page para uma faixa de largura total.
Prefira ilustrações gratuitas. Quando a melhor correspondência for Pro, informe ao usuário que ela acompanha o Illos Pro (https://illos.dev/pro) e ofereça a gratuita mais próxima. Nunca copie uma ilustração Pro a partir de suas imagens de pré-visualização ou página.
4. Adicione cada uma
O slug do tema e o id são as duas últimas partes do endereço da page. Para https://illos.dev/library/isometric/queue, eles são isometric e queue.
Projeto React com shadcn (ou que possa executá-lo):
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
Isso adiciona a ilustração como um componente. Renderize-o onde a seção explica aquela ideia e mantenha o arquivo do componente como está: ele é reproduzido uma vez quando entra na visualização e faz loop enquanto o mouse passa sobre ele.
Qualquer outro projeto: baixe o arquivo do endereço svg da entrada e coloque-o inline na página (ele mantém sua animação e segue as cores da página), ou use-o como <img>. Uma ilustração Shader mostra seu quadro estático sem o componente React.
Toda ilustração funciona em fundos claros e escuros; sua página mostra ambos.
5. Verifique o resultado
- Um tema em todo o site.
- Cada ilustração explica a seção em que está inserida, não um objeto aleatório.
- Mantenha o comentário de licença dentro de cada SVG. Ilustrações gratuitas podem ser usadas em sites comerciais e trabalhos de clientes, sem necessidade de crédito: https://illos.dev/license
Quando a biblioteca não tem nada que se encaixe
As skills do Illos Pro ensinam ao Claude Code, Codex e Cursor as regras de um tema, para que eles possam desenhar novas ilustrações que correspondam às já existentes no site e verificar cada uma. Elas acompanham o Illos Pro: https://illos.dev/pro. Configure-as com npx -y illos setup.