102.3K+Baixar
Ir para o guia de uso
Anatomypor wheresryan22

Anatomy Skill.

Explique uma ideia técnica como uma máquina que o leitor consiga entender. O Anatomy orienta seu agente de código por geometria isométrica em SVG, metáforas físicas e leituras que concordam com as partes em movimento.

  • SVG isométrico
  • Explicações técnicas
  • Figuras interativas
Baixar OpenDesignVer guia de uso
Revisão da fonte · anatomySKILL.md
Tarefa Ilustração técnica Produz • Uma figura SVG, uma página HTML independente ou componentes React • Uma metáfora física com valores orientados por modelo e interação opcional • Evidências de geometria e de revisão no navegador quando as verificações são executadas Antes de começar O kit exige Node.js 20.10+ e Chrome ou Chromium para as verificações. A CLI de skills tem seu próprio requisito de Node; o README registra 22.20+ para a CLI 1.7.1.
Resumo editorial · fonte revisada em 2026-10-12 · não é um exemplo gerado

01 O que ela faz

Explique o sistema por meio de um mecanismo físico

O Anatomy usa um objeto reconhecível para explicar uma relação técnica. A descrição aqui se baseia na fonte, não em uma figura que geramos.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Uma fila pode virar um mecanismo que segura e libera objetos; um limite pode virar um medidor com uma marca de limite. O que importa é o mapeamento: o que se move, o que isso mede e o que o espectador deve aprender. A skill pede que o agente estabeleça esse modelo antes de desenhar as partes.

O kit incluído constrói formas isométricas sólidas com faces sombreadas e ordem de profundidade explícita. Uma figura pode ser entregue como SVG, HTML independente ou componentes React. As versões interativas ligam controles, movimento e leituras ao mesmo modelo; o WebGL opcional adiciona efeitos como água ou luz dentro da cena SVG.

Entregas esperadas

  • Uma figura SVG editável, uma página HTML independente ou componentes React
  • Uma legenda e, nas figuras interativas, controles e leituras orientadas por modelo
  • Verificações de geometria e capturas do navegador, quando executadas no ambiente de destino
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Associe a ideia a um objeto

    Forneça o comportamento real e escolha um mecanismo que o explique. Defina o que cada movimento e cada leitura significam antes de acrescentar detalhes decorativos.

  2. 02
    Planeje as partes e a câmera

    Liste a estrutura de apoio, o mecanismo em funcionamento e os controles. Escolha um ângulo que revele a relação em vez de escondê-la atrás da carcaça.

  3. 03
    Construa a geometria e o comportamento

    Use o kit para formas sólidas e ordem de profundidade. Calcule a geometria estática uma vez; ligue as partes interativas e os valores exibidos ao mesmo modelo.

  4. 04
    Inspecione a figura em contexto

    Execute as verificações de geometria e de linhas pertinentes e depois inspecione as capturas do navegador nos dois temas. Uma auditoria bem-sucedida não comprova que a explicação seja precisa nem que a composição seja legível.

02 Quando usar

Quando usar

Use o Anatomy quando uma analogia física tornar uma ideia técnica mais fácil de entender. Ele é mais especializado que um gerador genérico de diagramas ou ilustrações.

Boa adequação

  • Documentação que explica um mecanismoMostre como uma fila, um limite, um controle ou um componente se comporta por meio de uma única relação física visível.
  • Figuras técnicas editoriaisCrie uma figura detalhada para um post de blog ou landing page em que o próprio objeto carrega a explicação.
  • Explicações interativasDeixe o leitor alterar um parâmetro e ver movimento e valores se atualizarem juntos, considerando o comportamento com teclado e com movimento reduzido.

Limites a verificar

  • Não é uma ferramenta geral de fluxogramasPara um processo que se explica melhor com caixas rotuladas e setas, essa abordagem de objeto físico pode acrescentar complexidade desnecessária.
  • O 3D é um beta opcionalA fonte fixada limita a evidência de 3D a um exemplo e a uma figura de teste. Geometria densa em movimento exige verificações de desempenho próprias; um resultado fluido não é garantido.
  • As verificações exigem um navegadorO Node.js 20.10+ executa o kit; Chrome ou Chromium é necessário para as verificações no navegador. Instalar a skill não faz essas verificações passarem nem fornece todas as dependências do projeto.

Traga estas informações

  • O comportamento a explicarInforme os estados, limites ou equações reais, além do conhecimento prévio do público. Indique como hipotéticos os valores hipotéticos.
  • Uma metáfora físicaDescreva o objeto, o que se move e o que esse movimento significa. Compartilhe referências visuais de acabamento ou materiais, não como pedido para copiar uma figura existente.
  • Escopo de saída e interaçãoEscolha SVG, HTML independente ou componentes React; especifique tamanho, tema e se interação, WebGL ou 3D experimental são realmente necessários.

03 Decisões que importam

Decisões que importam

  1. As leituras compartilham o modelo de movimento

    Um número só é útil se refletir o mesmo estado do mecanismo. A skill pede um modelo comum para movimento, legenda e valores exibidos.

  2. A ordem de profundidade faz parte do desenho

    Sólidos, tubos e partes móveis que se sobrepõem precisam de uma ordem consistente de frente para trás. A auditoria incluída verifica a geometria; as terminações de linha exigem uma verificação separada.

  3. A interação tem uma versão estática

    O fluxo documentado inclui controle por teclado, pausa fora da tela e movimento reduzido. Se o WebGL for usado, o SVG deve continuar compreensível sem ele.

04 Experimente um briefing focado

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

O comando abaixo instala a skill em um projeto e permite escolher um agente. Consulte o README do repositório original antes de executá-lo.

Comando de instalação documentado
npx skills add wheresryan22/anatomy

O kit precisa do Node.js 20.10+; o README registra Node.js 22.20+ para a CLI de skills 1.7.1. As verificações no navegador exigem Chrome ou Chromium. Em Claude Code ou OpenCode, invoque /anatomy; em Codex, use $anatomy.

Comece com um mecanismo

Use um modelo pequeno e explicitamente definido antes de tentar uma cena densa. O briefing abaixo é um exemplo não testado, não uma figura pronta fornecida.

Briefing de exemplo
Use o Anatomy para explicar uma fila limitada como um pequeno mecanismo físico em uma figura HTML independente. A fila comporta no máximo 5 itens: enfileirar adiciona um quando há espaço, desenfileirar remove um quando ela não está vazia, e operações rejeitadas deixam a contagem inalterada. Primeiro proponha o objeto e explique o que o movimento dele significa. Use estas regras hipotéticas, não dados de benchmark inventados. Deixe os controles acessíveis por teclado e conduza a contagem e o movimento a partir de um único modelo. Ofereça suporte a temas claro e escuro, a uma viewport de 390 px e a movimento reduzido. Não adicione WebGL nem 3D. Mostre o design estático antes de adicionar interação e informe quais verificações de geometria, de linhas e de navegador você de fato executou.

Verifique a explicação e o desenho

Inspecione o resultado em relação ao modelo e às evidências do navegador. Registre as verificações que não puderam ser executadas.

  • A contagem, o movimento e os estados de vazia/cheia concordam com as regras da fila indicadas.
  • A figura continua legível em uma tela estreita e sem movimento; os controles funcionam com teclado.
  • Os dois temas e as verificações de geometria e de linhas aplicáveis são revisados; as verificações não executadas são nomeadas.

O OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill venha incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte indicada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Autor da fonte
wheresryan22
Repositório
wheresryan22/anatomy
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-10-12 · 689dcf966e63
Resumo editorial da fonte
O Anatomy combina um método de explicação por objeto físico com um kit de SVG isométrico, interação opcional e verificações de geometria e de navegador definidas pela fonte. Este é um resumo editorial da fonte fixada, não um relatório de execução.

Resumo original da OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uma medida de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O Anatomy exige React?

Não. A fonte oferece suporte a JavaScript ou TypeScript sem framework, que produz SVG e HTML, além de componentes React e Next.js. Escolha a saída que se encaixa no projeto hospedeiro.

Preciso de WebGL ou 3D para uma figura Anatomy?

Não. O SVG é a saída principal. O WebGL é opcional para efeitos como água, fogo ou luz; a geometria 3D rotativa é uma opção beta separada. Solicite apenas os modos de que a explicação precisa.

A skill é o mesmo que o pacote anatomy-figures?

Não. O Anatomy é a skill e o kit de criação. O pacote anatomy-figures, documentado separadamente, fornece figuras prontas. Instalar um não deve ser descrito como instalar o outro.

Anatomy

Torne visível uma ideia técnica

Comece pelo comportamento real, escolha uma metáfora física e inspecione a figura no contexto em que será usada. Revise a fonte e a configuração antes de executar a skill.

Baixar OpenDesignExplorar skills de design
Comando de instalação documentado
npx skills add wheresryan22/anatomy