88 Anatomy

---
name: anatomy
description: |
  Cria figuras isometricas para explicar anatomia de sistemas.
  Trigger em: "desenhar diagrama isométrico", "figura isométrica", "isometric svg", "desenho técnico Linear-style", "isometric explainer", "diagrama de arquitetura em máquina", "ilustração isométrica", "interativo em svg", "shader webgl no svg", "anatomy diagram".
argument-hint: "<ideia técnica ou conceito a explicar> [standalone-html|react] [--light|--dark]"
allowed-tools: Read, Grep, Glob, Bash(node *), Edit, Write
metadata:
  version: "1.0.0"
---

# Anatomy — Figuras Isométricas Explicativas como Máquinas Reais

Transforma conceitos técnicos, algoritmos e sistemas de software em instrumentos e máquinas físicas interativas em SVG isométrico com sombreamento em quatro tons, física precisa e opcionais de WebGL ou 3D.

## Governança Global

Siga `GLOBAL.md`, `policies/execution.md`, `policies/tool-safety.md`, `policies/cost-optimization.md`, `policies/verification-before-completion.md` e `policies/anti-ai-writing.md`.

Regras de execução:
1. **O objeto é a explicação:** invente um mecanismo físico concreto cuja operação espelhe o conceito de software (ex.: cache como fechadura de pinos, gantry plotter para pooling de GPU, gaveteiro graduado para buffers de render). Evite caixas flutuantes e setas genéricas.
2. **Geometria determinística:** utilize o motor puro em Node (`kit/iso-kit.mjs`) ou TypeScript (`kit/iso-kit.ts`). Toda geometria estática é pré-computada; partes móveis utilizam vetores e matrizes determinísticas.
3. **Auditoria obrigatória:** toda figura complexa com tubulações, cabos ou eixos giratórios deve rodar `node build.mjs --audit` (`kit/audit.mjs`) e zerar folgas, penetrações e problemas de profundidade antes da entrega.

## Quando Usar

- Explicar um conceito técnico, algoritmo ou fluxo de sistema transformando-o em um objeto físico funcional em corte ou bancada de teste.
- Criar diagramas técnicos no estilo visual "Linear", figuras de destaque para documentação, artigos de engenharia, landing pages ou posts de blog.
- Desenvolver ilustrações vetoriais isométricas em SVG puro (standalone ou React/Next.js) compostas por sólidos detalhados, ranhuras, parafusos, manípulos serrilhados e réguas graduadas.
- Integrar efeitos visuais contínuos que linhas vetoriais não conseguem reproduzir (chamas, exaustão, fluidos em movimento, cáusticas e reflexos de água) por meio de shaders WebGL projetados na mesma câmera isométrica.
- Animar componentes em rotação 3D real (mostradores, alavancas, garras robóticas) preservando o restante da cena estático em 60 quadros por segundo.

## Quando Não Usar

- Diagramas lógicos simples de blocos ou fluxo de telas sem metáfora física: prefira `76-diagram-validated` ou Mermaid.
- Microinterações cotidianas de UI em interfaces web (hover de botões, modais, drawer): use `12-motion-design`.
- Vídeos sequenciais completos com trilha de áudio e múltiplos cortes: use `86-code-motion-film` ou `84-ai-video-direction`.
- Conjuntos simples de ícones de navegação ou ilustrações 2D planas: use `85-illustration-studio`.
- Cenas tridimensionais livres em primeira ou terceira pessoa sem a estética isométrica craft: use `74-web3d-scene-runtime`.

## Entradas Esperadas

- Conceito ou arquitetura a representar (ex.: rate limiter token bucket, pool de conexões de banco de dados, edge cache de CDN).
- Formato de destino: página HTML standalone (`pageHtml`), componente React (`kit/react/draw.tsx` + `kit/react/live.tsx`) ou arquivo SVG isolado (`figureSvg`).
- Tema visual pretendido (`--light` ou `--dark`, com o tema claro sendo a referência inicial para equilíbrio de shaders).
- Tamanho e complexidade pretendidos: Figure (40 a 80 peças), Hero (80 a 150 peças) ou Epic (sistema amplo).

## Saídas Esperadas

- Script gerador executável (`build.mjs` ou módulo `.tsx`) importando as funções utilitárias de `kit/`.
- Página HTML independente ou componente React funcional com moldura padronizada: número da figura, título, dica de controle e mostrador numérico em tempo real.
- Relatório de auditoria geométrica sem inconsistências (`node build.mjs --audit` encerrando com código zero).
- Arquivo visual exportado e verificado via script de inspeção de linhas (`node scripts/lines.mjs`).

## Protocolo de Construção

1. **Dimensionar a figura:** determine a escala do projeto antes de iniciar o código:
   - **Figure:** mecanismo único, 40 a 80 partes, SVG com no máximo uma camada WebGL.
   - **Hero:** objeto denso, múltiplas camadas WebGL ou objeto articulado em 3D, 80 a 150 partes.
   - **Epic:** veículo ou instalação inteira com múltiplos subsistemas móveis.
2. **Modelo físico de dados:** extraia os dados e coeficientes reais do conceito. Isole o modelo em módulo puro (`model.mjs` ou `rig.ts`) para alimentar tanto o movimento quanto os mostradores numéricos.
3. **Mapeamento da máquina:** defina a analogia mecânica direta. A peça em destaque iluminado (`lit`) é o foco que o leitor deve acompanhar.
4. **Inventário de componentes:** estruture as peças em camadas: base (placa, pés de borracha, parafusos nos cantos, régua graduada), estrutura (colunas, trilhos, batentes), mecanismo (carros, buchas, molas, êmbolo, agulha) e comandos (manípulo serrilhado, fuso, parafusos borboleta). Consulte receitas detalhadas em `references/craft.md`.
5. **Plano de coordenadas e projeção:** posicione elementos em coordenadas tridimensionais (x e y no solo, z na vertical). Aplique a câmera padrão em azimute de 45 graus e elevação de 30 graus via `fitProjection()`.
6. **Construção geométrica única:** pré-calcule caminhos estáticos com primitivas do kit (`slabOf`, `cylinder`, `extrude`, `planOutline`, `topTicks`, `knurl`, `coil`). Formas de revolução utilizam `kit/lathe.mjs` e tubulações/cabos utilizam `kit/tube.mjs`.
7. **Ordem do pintor e profundidade:** ordene sólidos do fundo para a frente e da base para o topo com `depthOf`. Utilize o gravador `A.recorder()` e o resolvedor `A.settle()` de `kit/audit.mjs` para garantir profundidade física de sobreposição sem cruzamentos acidentais.
8. **Moldura e interface:** posicione a figura no cartão padrão contendo `Fig n` no topo esquerdo, título no topo direito, orientação de interação no rodapé esquerdo e leitura numérica sincronizada no rodapé direito.
9. **Movimento orgânico:** aplique amortecimento exponencial ou molas elásticas. Quando em repouso, execute uma demonstração contínua e suave, pausando quando o elemento sair do campo visual ou sob preferência de movimento reduzido.
10. **Shaders WebGL integrados:** utilize shaders apenas para fenômenos fluidos ou luminosos (fogo, vapor, água, brilho). Monte a estrutura em sanduíche: SVG traseiro, lona Canvas intermediária com a mesma câmera matemática (`GLSL_ISO`), e SVG frontal para os elementos de oclusão.

## Regras de Crafting Visual

- **Sólidos opacos:** cada peça deve possuir preenchimento sólido com a cor do papel e ordem de pintura estrita. Nunca utilize linhas pontilhadas de faces ocultas ou malhas de arame transparentes.
- **Quatro tons automáticos:** preserve a iluminação calculada por `extrude`, atribuindo tons de lateral conforme o ângulo da face em relação à luz e topo mais claro.
- **Hierarquia de luminosidade:** base e apoios recebem tom `lo`, estrutura recebe tom `mid`, e o objeto sujeito recebe tom `hi`. Apenas um elemento focal recebe tom `lit`.
- **Término rigoroso de linhas:** toda aresta, linha de textura ou condutor elétrico deve terminar exatamente em uma superfície, outra aresta ou ponto de solda (`terminal dot`). Linhas flutuando no vazio configuram defeito visual.
- **Tubulações sem colisão:** nenhum tubo ou fiação cruza outro sólido sem flange, união ou furo de passagem explícito. Mantenha no mínimo 1.5 raios de distância livre.
- **Superfícies curvas contínuas:** perfis curvos gerados por `kit/lathe.mjs` utilizam curvas suaves para evitar sombreamento em degrau.

## Evidência de Conclusão

- A página gerada abre no navegador executando a animação de repouso e respondendo a ponteiro e teclado.
- A auditoria geométrica (`node build.mjs --audit`) retorna aprovação com zero problemas de penetração, extremidades soltas ou ordem de sobreposição incorreta.
- O validador de traços (`node scripts/lines.mjs`) confirma zero linhas desconectadas.
- Inspeções em ampliação de 4x nas junções entre tubos, flanges e painéis comprovam assentamento correto em temas claro e escuro.

## Handoff

- Para inclusão em aplicações web ou documentação técnica interativa: entregue para `04-frontend-integration`.
- Para publicação em guias, artigos de blog ou landing pages institucionais: entregue para `10-documenter` e `41-blog-publisher`.
- Para auditoria de acessibilidade, contraste e taxas de quadros: entregue para `22-accessibility-specialist` e `11-reviewer`.

## Integração com Pipeline

- `09-orchestrator`: aciona esta skill quando o plano de desenvolvimento exige figuras técnicas de alta definição ou explicadores mecânicos interativos.
- `02-ui-ux-design`: estabelece as variáveis de cor e espaçamento para garantir harmonia entre o cartão da figura e o layout da aplicação consumidora.
- `08-context-manager`: restringe a leitura aos guias específicos em `references/` (`craft.md`, `kit.md`, `webgl.md`, `3d.md`) conforme a necessidade de cada implementação.

## Fontes Externas

Adaptação direta de [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) (MIT, Copyright 2026 Ryan). O conjunto de ferramentas em `kit/`, as referências em `references/`, os scripts de teste em `scripts/` e os exemplos em `examples/` derivam do repositório original. O texto integral da licença MIT e os créditos do autor original estão preservados no arquivo local `LICENSE-ANATOMY`.