Aula 21Plugins: pacotes prontos para instalar

🖥️ Versão Desktop. Nesta versão do curso, você usa o Claude Code no app Claude Desktop, na aba Code. Quase tudo é feito por janelas e botões. Quando uma aula pedir para digitar um comando, ela mostra exatamente o que digitar. Nesta aula, você instala o plugin com botões e digita só a barra /, na caixa de mensagem, para conferir a receita nova. A parte opcional do fim usa o terminal integrado do app, para o plugin de inteligência de código.

Objetivos

Ao final desta aula você vai saber:

• O que é um plugin e o que é um catálogo de plugins
• Instalar o frontend-design, do catálogo oficial, depois de guardar uma versão
• Usar o plugin no modo Plan e voltar atrás se não gostar do resultado
• Quanto custa um plugin ligado e como desligar o que você não usa
• A regra de segurança de tudo o que roda código no seu computador

Ao longo do curso, você conheceu, um de cada vez, as receitas (skills, Aula 13), os ajudantes (subagentes, Aula 12), os conectores (Aula 14) e as ações automáticas (Aula 15). Um plugin é um pacote pronto, que traz um ou vários desses recursos e se instala de uma vez. Na Aula 18, você viu os mods, que também chegam como plugins. Nesta aula, você instala um plugin de verdade e usa na sua página.

Do que esta aula precisa: a pasta da sua página (a confeitaria, ou a da sua ideia), guardar e desfazer uma versão (Aulas 06 e 10) e o modo Plan (Aulas 04 e 06). A aula não usa o GitHub nem a página no ar: quem pulou a Aula 19 faz tudo igual.

O que é um plugin

Um plugin é um pacote com recursos que você já conhece: receitas (skills), ajudantes (subagentes), conectores, ações automáticas e até mods. Você instala o pacote, e o que vem dentro passa a valer nas suas sessões.

Os plugins ficam num catálogo de plugins (o Claude Code chama de marketplace): uma lista que diz onde buscar cada um. O catálogo oficial, da Anthropic, o claude-plugins-official, já vem adicionado. Repare: oficial é o catálogo. A maioria dos plugins dele é de parceiros e de outros autores, e o nome do catálogo diz quem publica a lista, não o que cada plugin faz.

O plugin desta aula é o frontend-design, feito pela própria Anthropic. Ele traz uma receita só, de visual: ela orienta o Claude a desenhar páginas com cara própria, em vez de um visual genérico.

Instalar o frontend-design

Um plugin muda o jeito de o Claude trabalhar na sua página, então comece por um ponto de volta:

1. Na aba Code, clique em + New e confira, na linha abaixo da caixa de mensagem, o Local, a pasta da sua página e o Manual no seletor de modo.
2. Peça: "tem alguma mudança que ainda não foi guardada numa versão? Se tiver, guarde uma versão com uma mensagem em português".
3. Clique no +, ao lado da caixa de mensagem, e escolha Add plugins (adicionar plugins). Se o menu mostrar Plugins no lugar, escolha Plugins e depois Browse plugins (ver os plugins). O navegador de plugins abre, com os plugins dos seus catálogos.
4. Procure o frontend-design e abra. Leia a descrição antes de instalar.
5. Escolha onde ele vale: só para você, em todas as pastas; para todo mundo que trabalha nesta pasta; ou só para você, só nesta pasta. Para este exercício, escolha a última, a local: o plugin fica ligado só na pasta da página, e as suas outras pastas não pagam o custo dele.

Pronto quando: você digita / na caixa de mensagem (ou clica no + e escolhe Slash commands) e a receita aparece com o nome do plugin na frente, /frontend-design:frontend-design. Se ela não aparecer, digite /reload-plugins e envie, ou abra uma sessão nova com + New.

O frontend-design não aparece no navegador de plugins? Peça ao Claude: "adicione o catálogo oficial de plugins da Anthropic, anthropics/claude-plugins-official", aprove o comando e abra o Add plugins de novo.

O app e o terminal usam os mesmos arquivos de configuração: um plugin instalado aqui também vale no terminal, na mesma pasta.

Usar no modo Plan

Com o plugin ligado, peça um visual novo para o cabeçalho, mas no modo Plan, para ver a proposta antes de qualquer mudança. Fez a Aula 20? Então o cabeçalho que você mudou lá é o ponto de partida.

1. No seletor de modo, na linha abaixo da caixa de mensagem, escolha Plan.

2. Peça:

   Use o frontend-design para propor um visual novo para o cabeçalho, sem mudar nada ainda.

   Quer manter as cores e as fontes da página? Acrescente: "mantendo as cores e as fontes do decisoes.md". A receita segue o que você pede.

3. Leia a proposta. Quer mudar alguma parte? Peça o ajuste na caixa de mensagem. Gostou? Troque o seletor para Manual e escreva: "Plano aprovado, pode seguir." A cada mudança, o app mostra o antes e o depois do arquivo, e você aceita as que fizerem sentido, como na Aula 06.

4. Clique no caminho do index.html na conversa e confira no painel Browser: o cabeçalho novo aparece, e o cardápio, o filtro e o botão do WhatsApp continuam funcionando.

5. Não gostou do resultado? Peça "desfaça as mudanças desde a última versão guardada", como na Aula 10, e a página volta a como estava antes do plugin. Gostou? Guarde uma versão: "guarde uma versão com o cabeçalho novo".

A receita também entra sozinha quando um pedido combina com ela, como as skills da Aula 13: com o plugin ligado, um pedido de visual pode usar o frontend-design mesmo sem você dizer o nome.

O custo de um plugin ligado

Plugin ligado não é de graça, mesmo quando você não usa. O nome e a descrição de cada receita e de cada ajudante dele vão em toda mensagem que você manda, para o Claude saber que eles existem. Isso conta no seu limite de uso e ocupa a memória de trabalho da sessão (Aulas 07 e 08). Quando o Claude usa uma receita, entra também o texto inteiro dela.

Na versão do terminal, a página de um plugin do catálogo oficial mostra essas duas partes, em estimativas, com o nome Context cost: o que o plugin soma em toda mensagem e o que entra quando o Claude usa as receitas dele. Se o navegador de plugins do app mostrar esse número, ele quer dizer o mesmo. Na prática, o anel de uso, ao lado do seletor de modelo, mostra quanto da memória de trabalho a sessão já usa.

Um plugin com uma receita só, como o frontend-design, tende a pesar pouco. Muitos plugins ligados, cada um com várias receitas, pesam em toda mensagem, em todas as sessões em que estão ligados.

Desligue o que não usa. Clique no +: se o menu mostrar Plugins, escolha Plugins e depois Manage plugins (gerenciar plugins), onde dá para desligar, ligar de novo ou desinstalar. Se ele mostrar só Add plugins, peça ao Claude: "desligue o plugin frontend-design nesta pasta", e aprove a mudança, como na Aula 05.

A regra de segurança

🛡️ Antes de aprovar algo que roda código no seu computador (uma ação automática, um mod, um plugin, um conector que roda no computador): instale só o que vem de quem você confia, peça ao Claude para explicar em português simples o que aquilo faz e desligue o que não usa.

Vale para os plugins porque um plugin pode trazer ações automáticas (Aula 15), conectores (Aula 14) e mods (Aula 18), e o que ele roda tem as suas permissões, como se fosse você. As regras deny e ask das Aulas 05 e 10 valem para o que o Claude faz, não para o código que o próprio plugin roda.

Antes de instalar um plugin que você não conhece, peça: "explique em português simples o que o plugin traz e o que ele pode fazer no meu computador", com o nome dele no lugar de "o plugin".

ℹ️ O navegador de plugins não existe nas sessões Cloud, e os plugins instalados pelo app não valem nelas (Aula 23). Nas sessões WSL, os plugins não funcionam.

Na prática

Use a pasta da sua página (a confeitaria, ou a da sua ideia).

1. Na aba Code, clique em + New e confira, na linha abaixo da caixa de mensagem, o Local, a pasta da página e o Manual. Se houver mudança sem versão, guarde uma versão.
2. Clique no +, ao lado da caixa de mensagem, escolha Add plugins (ou Plugins → Browse plugins), abra o frontend-design, leia a descrição e instale só para você, só nesta pasta.
3. Digite / e confira se aparece /frontend-design:frontend-design.
4. Escolha Plan no seletor de modo e peça o visual novo para o cabeçalho, sem mudar nada ainda. Ajuste na caixa de mensagem, se quiser. Para aprovar, troque o seletor para Manual e escreva "Plano aprovado, pode seguir."
5. Confira no painel Browser. Gostou? Guarde uma versão. Não gostou? Desfaça até a última versão guardada.
6. Peça: "explique em português simples o que o plugin frontend-design traz e o que ele pode fazer no meu computador".
7. Não vai usar mais? Desligue o frontend-design em Manage plugins, ou peça ao Claude para desligar.

Resumo

• Um plugin é um pacote pronto, com receitas, ajudantes, conectores, ações automáticas e até mods, que se instala de uma vez.
• Os plugins ficam em catálogos. O oficial, da Anthropic, já vem adicionado, mas oficial é o catálogo, não cada plugin.
• Guarde uma versão antes de instalar. No app, o caminho é o +, ao lado da caixa de mensagem, e Add plugins: leia a descrição e escolha onde o plugin vale.
• Use no modo Plan: você vê a proposta antes de qualquer mudança e, se não gostar do resultado, desfaz até a versão guardada.
• Todo plugin ligado pesa em toda mensagem, mesmo sem uso. Desligue o que não usa, em Manage plugins ou pedindo ao Claude.
• A regra de tudo o que roda código no seu computador: só de quem você confia, a explicação em português simples antes e desligar o que não usa.

Na próxima aula: o Claude vendo a sua página, para conferir com os próprios olhos o que mudou.

Quer ir mais fundo? Veja a seção Install plugins da documentação do app e a visão geral de plugins (em inglês).

Para ir além (opcional): o que vem num plugin, inteligência de código, segurança e o seu próprio plugin

Para quem já programa; pode pular. Daqui em diante, a aula usa os nomes técnicos: marketplace para catálogo, hook para ação automática, servidor MCP para conector e commit para versão guardada.

O que vem dentro de um plugin

Um plugin é uma pasta de componentes que o Claude Code carrega como uma unidade. O arquivo .claude-plugin/plugin.json, o manifesto, dá o nome do plugin, e cada tipo de componente tem a sua pasta:

Você precisa de um plugin? Uma skill sozinha em ~/.claude/skills/ já vale em todos os seus projetos. Use plugin quando quiser juntar várias peças, instalar a configuração de outra pessoa com poucos cliques ou entregar a sua para o time, com versões.

Um plugin com hooks ou servidores roda código assim que é ligado. E, quando a atualização automática está ligada para o marketplace de onde ele veio, o Claude Code atualiza o plugin em segundo plano, então os arquivos que você leu podem mudar no disco.

Os escopos, por inteiro

Quando o mesmo plugin aparece em mais de um escopo, o local vale mais que o do projeto, e o do projeto mais que o do usuário. O commit do escopo do projeto liga o plugin para o time, mas não baixa nada: cada pessoa instala o plugin uma vez. O terminal e as sessões locais do app leem os mesmos arquivos de configuração: um plugin instalado no escopo do seu usuário vale nos dois.

As skills de um plugin aparecem com o nome dele na frente, no menu /. Se elas não aparecerem depois de instalar, o /reload-plugins carrega sem reiniciar, mas, no app, ele não recarrega os servidores MCP do plugin: para esses, abra uma sessão nova.

Inteligência de código: o Claude vê os erros de tipo

O seu editor sabe na hora quando um tipo está errado ou um import sumiu. Com um plugin de LSP, o Claude ganha o mesmo: depois de cada edição, ele recebe os erros que a mudança causou e corrige antes de você rodar o build. Ele também passa a achar definições e referências pelo nome do símbolo, em vez de buscar por texto.

São dois passos. Primeiro, o servidor de linguagem (exemplo com TypeScript), no terminal integrado do app (Ctrl + `):

npm install -g typescript-language-server typescript

Depois, o plugin: em + → Add plugins (ou Plugins → Browse plugins), procure o typescript-lsp e instale.

Há plugins para Python (pyright-lsp), Go (gopls-lsp), Rust (rust-analyzer-lsp), Java, C#, PHP, Ruby, Kotlin, Swift e outras linguagens. O plugin não traz o servidor de linguagem: ele precisa estar instalado e no PATH. O app lê o PATH quando abre, então, se o Claude não encontrar o servidor que você acabou de instalar, reinicie o app. Para conferir, peça ao Claude para criar e depois corrigir um erro de tipo, e pergunte o que o servidor de linguagem informou: se ele apontar o erro antes de qualquer build, está funcionando.

Plugins de segurança

Dois plugins do marketplace oficial cuidam de segurança, em momentos diferentes:

Os dois se instalam pelo mesmo caminho: + → Add plugins, procurando security-guidance ou claude-security. Depois de instalado, o /claude-security aparece no menu /, como as outras skills de plugin.

O security-guidance precisa de Python 3.7 ou mais novo (a revisão de commit mais completa pede o 3.10) e, para as revisões de fim de turno e de commit, de um repositório Git. O claude-security precisa de Python 3.9 ou mais novo como python3, de Git para varrer mudanças e gerar patches, e dos workflows dinâmicos da Aula 20 (no Pro, ligue com "enableWorkflows": true no ~/.claude/settings.json). Cada varredura conta no seu uso, então comece por uma área pequena. Nenhum dos dois substitui o /code-review da Aula 09 nem a sua revisão: eles somam.

Marketplaces próprios

Para usar outro marketplace, como o de uma empresa, registre-o uma vez. A versão do terminal faz isso com o /plugin marketplace add; no app, use a chave extraKnownMarketplaces no ~/.claude/settings.json (ou no .claude/settings.json do repositório, para o time todo). Peça ao Claude para acrescentar, ou edite no painel de arquivos:

{
  "extraKnownMarketplaces": {
    "sua-empresa": {
      "source": {
        "source": "github",
        "repo": "sua-empresa/plugins"
      }
    }
  }
}

Numa sessão nova, os plugins desse marketplace, como o deploy-helper@sua-empresa, entram no navegador de plugins. As sessões na nuvem (web, Cloud e Projetos) não carregam os plugins que o .claude/settings.json do repositório liga.

Empacote a sua configuração

Você tem skills, subagentes e hooks em .claude/ e quer levar para outros projetos ou para o time? Transforme em plugin:

meu-plugin/
├── .claude-plugin/
│   └── plugin.json      ← o manifesto (só ele fica aqui dentro)
├── skills/              ← copiado de .claude/skills
├── agents/              ← copiado de .claude/agents
└── hooks/
    └── hooks.json       ← o bloco "hooks" do seu settings.json

{
  "name": "meu-plugin",
  "description": "As skills e os hooks do nosso time",
  "version": "1.0.0"
}

Teste antes de distribuir, sem instalar nada. A versão do terminal faz isso com claude plugin validate e claude --plugin-dir, comandos da CLI. No app, coloque a pasta em ~/.claude/skills/meu-plugin/: o Claude Code carrega como plugin, em toda sessão, qualquer pasta ali que tenha o .claude-plugin/plugin.json, sem instalação. Abra uma sessão nova e procure a skill no menu /. Repare que os nomes mudam: a skill que era /deploy vira /meu-plugin:deploy. Para parar de carregar o plugin, apague a pasta.

Para entregar ao time, mande a pasta (ou um .zip), coloque-a no repositório, em .claude/skills/meu-plugin/, para ela carregar para todo mundo que trabalha nele, ou crie um marketplace próprio: um repositório com um arquivo .claude-plugin/marketplace.json que lista os seus plugins. Com o extraKnownMarketplaces no .claude/settings.json do projeto, quem abre o repositório já recebe o marketplace registrado. Cada pessoa instala o plugin pelo navegador de plugins uma vez e, a partir daí, recebe as suas atualizações.

💡 Quer ajuda para montar um plugin maior? Instale o plugin-dev do marketplace oficial e escolha o /plugin-dev:create-plugin no menu /, com uma descrição do que você quer.