Hairline: skill grátis que cria ilustrações lineares animadas

Hairline é um projeto de Lucas Markes, publicado no GitHub com o nome lucasmarkes/hairline. Ele reúne trinta e três figuras isométricas feitas só de linhas finas, que respondem ao movimento do mouse: uma gaveta que desliza, um cadeado que abre, um disco que gira. Dentro do projeto há duas skills para agentes de IA, a hairline-create e a hairline-adopt.

Vale corrigir uma ideia comum. A animação não é um vídeo nem um GIF. A figura é um desenho em SVG dentro de uma página HTML e se move quando o ponteiro chega perto, ou sozinha quando você aperta o botão de play. O resultado é bom para seções de site, páginas de produto e demonstrações, mas não é um arquivo de vídeo para postar direto nas redes.

A hairline-create recebe uma ideia e cria uma figura nova no estilo Hairline. Ela primeiro oferece duas ou três opções de conceito, espera você escolher, desenha a figura, confere o resultado contra as regras do projeto e entrega um arquivo chamado hairline-nome.html. Esse arquivo é autossuficiente, não precisa instalar nada e abre direto do disco.

A hairline-adopt parte de um desenho que você já tem, como um ícone ou um logo em SVG. Ela lê o arquivo, reconstrói o objeto como uma figura no estilo Hairline, mantendo proporções e partes, e propõe o que o ponteiro faz com ele. Ela não anima o SVG original nem o vetoriza: o objeto é redesenhado do zero.

A skill funciona em qualquer agente que leia skills. O README cita Claude Code, Cursor e Codex, entre outros. Para o passo a passo de verificação, ela usa Node.js e um navegador: o script de conferência instala o playwright-core uma vez, fora da pasta da skill. Sem Node ou sem navegador, o agente faz uma checagem reduzida e avisa o que não conseguiu verificar.

Para instalar, rode no terminal o comando npx skills add lucasmarkes/hairline. Esse é o comando que o README oficial indica. No Claude Code, uma skill é uma pasta com um arquivo SKILL.md, guardada em ~/.claude/skills/ para todos os seus projetos ou em .claude/skills/ dentro de um repositório, segundo a documentação oficial. Cada skill vira um comando com barra, e o Claude também pode carregá-la sozinho quando o seu pedido combina com a descrição dela.

Para usar, abra o agente e digite o comando com uma ideia. O README dá este exemplo: /hairline-create a sales funnel, ou seja, um funil de vendas. Para partir de um desenho seu, use /hairline-adopt icons/deploy.svg, apontando para o seu arquivo. Depois, abra o arquivo hairline-nome.html no navegador e aperte o play para ver a figura percorrer o caminho de demonstração.

Se você só quer usar as figuras prontas em um site, não precisa das skills. O pacote npm @lucasmarkes/hairline não tem dependências e traz componentes para React. Você instala com npm i @lucasmarkes/hairline e importa uma figura, como a Terrain. A página hairline.lucasmarkes.com mostra todas as figuras funcionando.

Sobre custo e licença: o repositório usa a licença MIT, que é de código aberto de verdade e permite uso comercial. Não encontramos cobrança no projeto. Uma observação: no README e na licença o sobrenome aparece como Marques, enquanto o nome de usuário no GitHub é lucasmarkes. Trata-se da mesma conta e do mesmo projeto.

Cuidados: a skill faz o agente executar scripts Node na sua máquina, então vale ler o conteúdo da pasta skills do repositório antes de instalar, como qualquer código de terceiros. Cada figura é de uma única ideia e segue regras de estilo rígidas, então espere desenhos isométricos de linha, não ilustrações livres. Para outros estilos, essa skill não serve.