Repolode
Enviar
wheresryan22

wheresryan22/anatomy

Uma Claude Agent Skill que cria ilustrações isométricas interativas em SVG, WebGL e 3D de máquinas para explicar ideias técnicas.

Ver no GitHubSite
Estrelas
14,993
Forks
1,145
Issues abertas
46
Último commit
há 3 dias

O que é?

Anatomy é uma skill de agente que pede ao Claude para explicar uma ideia técnica inventando um objeto físico cujo funcionamento espelhe o conceito e, em seguida, construindo-o como uma figura isométrica. Uma chave de cache que evita o processamento quando nada mudou, por exemplo, pode virar uma fechadura de pinos que só gira quando todos os pinos estão alinhados. O resultado é composto por várias peças pequenas com sombreamento, dentro de um cartão com moldura, título, dica e indicador atualizado em tempo real, e reage a interações com o mouse e o teclado.

As figuras vêm em três tipos: SVG puro, SVG com uma camada de shader WebGL para fogo, água, luz e vapor, e um modo 3D beta em que as peças móveis são reprojetadas a cada frame. O resultado pode ser uma página HTML independente, um arquivo SVG avulso ou componentes React e Next.js. O kit usa apenas módulos integrados do Node, e o repositório inclui oito figuras de exemplo com seus scripts de build.

A skill também inclui verificações com Chrome headless que capturam screenshots e executam uma auditoria de geometria para detectar peças que atravessam umas às outras. Ela funciona com Claude Code, e o mesmo formato é carregado pelo OpenCode, Codex e Antigravity.

Recursos principais

  • 01Transforma um conceito técnico em uma máquina física representada como uma figura isométrica.
  • 02Gera figuras em SVG com sombreamento de quatro tons e um indicador atualizado em tempo real.
  • 03Adiciona camadas de shader WebGL para fogo, água, luz e vapor.
  • 04Oferece um modo 3D beta em que as peças móveis recebem novo sombreamento a cada frame.
  • 05Exporta HTML independente, um único arquivo SVG ou componentes React/Next.js.
  • 06Executa uma auditoria de geometria e verificações com screenshots no Chrome headless.

Casos de uso

  • Criar ilustrações explicativas para documentação técnica ou uma publicação em blog.
  • Desenvolver um material explicativo interativo para uma landing page ou curso.
  • Ilustrar o funcionamento de um sistema, como um limitador de taxa ou um pool de conexões.
  • Incorporar um componente React que visualize um processo em um site Next.js.

Tópicos

#agent-skill#svg#isometric#webgl#claude#visualization#documentation#react#open-source#vizualization

Perguntas frequentes

O que é anatomy?
Uma Claude Agent Skill que cria ilustrações isométricas interativas em SVG, WebGL e 3D de máquinas para explicar ideias técnicas. Anatomy é uma skill de agente que pede ao Claude para explicar uma ideia técnica inventando um objeto físico cujo funcionamento espelhe o conceito e, em seguida, construindo-o como uma figura isométrica. Uma chave de cache que evita o processamento quando nada mudou, por exemplo, pode virar uma fechadura de pinos que só gira quando todos os pinos estão alinhados. O resultado é composto por várias peças pequenas com sombreamento, dentro de um cartão com moldura, título, dica e indicador atualizado em tempo real, e reage a interações com o mouse e o teclado.
anatomy é gratuito? Qual é a licença?
anatomy é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
anatomy ainda é mantido?
Manutenção ativa. O último commit de anatomy foi em 15 de out. de 2026.
Para que posso usar anatomy?
Criar ilustrações explicativas para documentação técnica ou uma publicação em blog. Desenvolver um material explicativo interativo para uma landing page ou curso. Ilustrar o funcionamento de um sistema, como um limitador de taxa ou um pool de conexões. Incorporar um componente React que visualize um processo em um site Next.js.
Onde consigo anatomy?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/wheresryan22/anatomy

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados