O que dá para desenhar na interface do Claude Code com um Mod?

Fala aí, beleza? Um mod não só muda o comportamento do Claude Code, ele DESENHA interface 😀

Pane do lado da conversa, faixa em cima do prompt, botão, campo de texto e até um spinner com a sua cara

Segundo a documentação oficial dos mods, um mod é um plugin que muda a aparência e o comportamento do Claude Code

Ele é feito de handlers de eventos em JavaScript ou TypeScript, e o Claude Code chama esses handlers quando algo acontece: uma chamada de ferramenta, um prompt enviado ou o desenho de uma parte da interface

Os mods funcionam no Claude Code CLI e na aba Code do app Claude Desktop, exigem o Claude Code v2.1.287 ou posterior e vêm ativados por padrão

Se você já leu sobre como funcionam as skills, o mod é outro bicho: aqui é código seu reagindo a eventos e devolvendo o que aparece na tela

Bora ver o que dá pra desenhar?

Como o mod desenha: render sites e o evento ui.render

Antes do como, o porquê: o mod não sai pintando a tela em qualquer lugar

Ele desenha em pontos específicos, e cada um desses pontos se chama render site

Render site? É cada lugar onde um mod pode desenhar, por exemplo um pane, a faixa acima do prompt ou o spinner

Aí entra o evento ui.render

Toda vez que o Claude Code vai desenhar um render site, ele dispara o ui.render, e o hook do seu mod pra esse evento retorna o que deve aparecer ali

O retorno é uma árvore de elementos: um Box que contém outros boxes, textos e botões

E essa árvore é reconstruída a cada execução

Se você conhece componentes de interface que se redesenham quando o estado muda, a ideia é bem semelhante: tu descreve o que quer ver, e o Claude Code se vira pra desenhar 🙂

Onde um mod pode adicionar interface no Claude Code?

A página de interface da documentação lista as posições onde o mod pode colocar coisa nova

Cada uma serve pra um tipo de informação, então vale olhar uma por uma

Pane como barra lateral à direita:

O pane é a área maior, que fica como barra lateral à direita, ao lado da transcrição

É onde cabe uma interface usável de verdade, com abas, botões e campos de texto

Pensa num painelzinho seu morando do lado da conversa com o Claude, mto massa

Faixa acima do prompt:

A faixa (band) fica logo acima do prompt

Também aceita interface própria com abas, botões e campos de texto, só que num espaço colado no lugar onde você digita

Status line abaixo do prompt:

A status line fica abaixo do prompt

Serve pra mostrar algo sem iniciar um turno, ou seja, sem disparar uma nova rodada de conversa com o modelo

Toast no canto superior direito:

O toast aparece no canto superior direito da transcrição

Assim como a status line, mostra algo sem iniciar um turno

Linha de log na transcrição:

A linha de log entra na própria transcrição

E de novo: aparece sem iniciar um turno

E o question dialog?

Esse é diferente dos outros, se liga

O diálogo de pergunta segura uma chamada de ferramenta até o usuário decidir

Então ele não é só informativo: ele para o fluxo e espera você responder

Quais elementos dá para usar: texto, boxes, botões, campos e mais

A galeria oficial de elementos mostra as peças com que o mod monta a interface

São textos, boxes, botões, campos e alguns elementos que formatam conteúdo

Ou seja: dá pra montar desde um aviso simples até um formulário pequeno com campo e botão

A própria documentação traz um exemplo que mostra bem isso

O mod adiciona um comando que abre um pane com duas abas, e na segunda aba um botão incrementa um contador

Simples, né? Mas já junta comando, pane, abas e botão num lugar só 😛

O que dá para redesenhar na interface nativa do Claude Code?

Aqui é o segundo caminho, e pra mim o mais divertido haha

Além de criar interface própria, o mod pode substituir ou reestilizar partes que o Claude Code já desenha

As partes nativas citadas pela documentação são:

• Mensagens
• Linhas de chamada de ferramenta
• O spinner
• O diálogo em que o Claude faz perguntas

Exemplo real da comunidade: clawdify

O clawdify é um mod da comunidade que mostra isso na prática

Ele reestiliza o spinner, o rodapé do turno, a dica do prompt, um banner acima do prompt, a linha abaixo dele e a aparência das linhas da transcrição

Tudo isso via comando /clawdify

É um bom repo pra abrir e ver até onde vai o redesenho do nativo

Alguns recursos do Claude Code já são mods

Curiosidade massa: alguns recursos do próprio Claude Code são mods nativos (built-in)

Dá pra vê-los com /plugin, na aba Installed

Só que esses não podem ser atualizados nem desinstalados, então nada de tentar os rm -rf da vida neles kkk

Do que um mod precisa para começar a desenhar?

Se liga no esqueleto básico

Mods vão dentro de plugins, então são instalados e compartilhados como qualquer plugin

E são pequenas funções em TypeScript: você pode escrever na mão ou pedir pro próprio Claude Code escrever 🙂

A estrutura mínima de arquivos é esta:

.claude-plugin/plugin.json
hooks/hooks.json
hooks/register.js

E o que significa cada um?

• .claude-plugin/plugin.json: o manifesto do plugin
• hooks/hooks.json: tem o modules apontando pro módulo de hooks
• hooks/register.js: o módulo de hooks, que exporta register(on, options)

Pra testar, tu carrega o diretório do mod numa sessão usando a flag --plugin-dir

Pra validar antes, roda:

claude plugin validate <diretório>

Esse comando lê o manifesto e o módulo de hooks e reporta erros, os eventos tratados e as chamadas à API de mods

Tome cuidado: se o hooks.json não apontar certinho pro módulo, o validate é o primeiro lugar que vai te avisar, então roda ele antes de sair caçando bug na tela

Como desligar um mod se a interface ficar estranha?

Mexeu na interface e ficou tudo zoado? Acontece hehe

Tem três saídas:

1. Desativar ou desinstalar o mod na aba Installed
2. Iniciar o Claude Code com --safe-mode, que desativa todos os mods instalados naquela sessão
3. Definir "disableAllHooks": true em ~/.claude/settings.json, que desativa todos os mods que você instalou em todas as sessões

A terceira fica assim no arquivo:

{
  "disableAllHooks": true
}

O --safe-mode é a saída rápida pra quando tu só quer abrir o Claude Code limpo e entender o que quebrou

Já em organizações, quem manda são os administradores: eles usam managed settings pra decidir se mods rodam, quais e em que ordem

Vale explorar mods de interface no Claude Code?

Recapitulando, um mod do Claude Code desenha por dois caminhos

O primeiro é interface própria: pane à direita, faixa acima do prompt, status line, toast e linha de log, montados com textos, boxes, botões, campos e elementos de Markdown, código e diffs

O segundo é redesenho do nativo: mensagens, linhas de chamada de ferramenta, spinner e diálogo de perguntas, como o clawdify faz

Tudo isso passando pelo ui.render, que reconstrói a árvore de elementos a cada execução

Próximo passo concreto: confere se o teu Claude Code está na v2.1.287 ou posterior, abre a galeria de elementos da documentação e começa por algo pequeno

Uma status line ou um pane com um botão já é suficiente pra entender o fluxo, e dá pra pedir pro próprio Claude Code escrever o mod pra você

Faça o teste e me conta o que saiu daí! 😀

até o próximo post!