Aula 21Plugins: pacotes prontos para instalar

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 de planejar 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 de planejar (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 conversas.

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 na primeira vez que você abre o Claude Code no terminal. 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. Abra o terminal, entre na pasta e abra o Claude Code: cd Documents/confeitaria, com o nome da sua pasta, e depois claude. Confira se aparece manual mode on; se não aparecer, aperte Shift + Tab até aparecer.

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. Abra o plugin pelo nome:

   texto

   /plugin install frontend-design@claude-plugins-official

   O nome tem sempre duas partes, plugin@catálogo. Dentro da conversa, esse comando não instala na hora: ele abre a página do plugin, para você ler antes.

4. Leia a página. Will install (vai instalar) lista o que vem no pacote: no frontend-design, uma skill só. Context cost (custo de contexto) mostra dois números estimados, que a seção do custo, mais abaixo, explica.

5. Escolha onde ele vale. Para este exercício, escolha Install for you, in this repo only (local scope) (para você, só nesta pasta): o plugin fica ligado só na pasta da página, e as suas outras pastas não pagam o custo dele. As outras duas opções valem para você em todas as pastas deste computador (user scope) ou para todo mundo que trabalha nesta pasta (project scope).

6. Leia o fim do resumo. Plugin is now active. quer dizer que o plugin está ligado. Se aparecer Run /reload-plugins to apply., não precisa fazer nada: o painel fecha, e o Claude Code recarrega sozinho.

Pronto quando: você digita / e a receita aparece com o nome do plugin na frente, /frontend-design:frontend-design. O plugin também aparece em /plugin, na aba Installed (instalados).

Quer só olhar o que existe no catálogo? Digite /plugin, sem mais nada: ele abre na aba Discover (descobrir), com os plugins dos seus catálogos, e você digita para buscar.

Usar no modo de planejar

Com o plugin ligado, peça um visual novo para o cabeçalho, mas no modo de planejar, 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. Aperte Shift + Tab até aparecer plan mode on.

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? Escolha No, keep planning (não, continuar planejando) e diga o quê. Gostou? Escolha Yes, manually approve edits (sim, aprovar as edições uma a uma) e aprove as mudanças que fizerem sentido, como na Aula 06.

4. Abra a página no navegador e confira: 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 conversa (Aulas 07 e 08). Quando o Claude usa uma receita, entra também o texto inteiro dela.

Nos plugins do catálogo oficial, o Context cost mostra essas duas partes, em estimativas: Every turn (a cada mensagem) é o que o plugin soma em toda mensagem, e When invoked (quando usado) é o que entra quando o Claude usa as receitas e os ajudantes dele. Os números aparecem quando você abre o plugin pelo nome, como no passo 3, ou pela aba Marketplaces (catálogos); a página aberta pela lista do Discover não mostra.

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 conversas em que estão ligados.

Desligue o que não usa: digite /plugin, aperte Tab até a aba Installed, escolha o plugin com as setas e aperte Espaço para desligar ou ligar. Ou aperte Enter e escolha Disable plugin (desligar o plugin). Os desligados ficam agrupados no fim da lista, e dá para ligar de novo quando quiser. Na mesma aba, os que você não usa há um tempo aparecem embaixo de Not used recently (sem uso recente).

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, abra a página dele com o /plugin install e peça: "explique em português simples o que o plugin traz e o que ele pode fazer no meu computador".

ℹ️ Os plugins não funcionam nas sessões na nuvem (Aula 23): lá, o frontend-design não aparece.

Na prática

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

1. Abra o Claude Code na pasta e confira o manual mode on. Se houver mudança sem versão, guarde uma versão.
2. Digite /plugin e olhe a aba Discover. Depois, rode /plugin install frontend-design@claude-plugins-official, leia o Will install e o Context cost e escolha Install for you, in this repo only (local scope).
3. Digite / e confira se aparece /frontend-design:frontend-design.
4. Aperte Shift + Tab até aparecer plan mode on e peça o visual novo para o cabeçalho, sem mudar nada ainda. Ajuste com No, keep planning, se quiser, e aprove com Yes, manually approve edits.
5. Confira no navegador. 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? Em /plugin, na aba Installed, desligue o frontend-design com Espaço.

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. O /plugin install frontend-design@claude-plugins-official abre a página do plugin: leia o Will install e o Context cost e escolha onde ele vale.
• Use no modo de planejar: 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 /plugin, na aba Installed.
• 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 página de instalar e gerenciar plugins e a visão geral de plugins na documentação oficial (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 um comando ou entregar a sua para o time, com versões.

O Will install lista os componentes antes da instalação: comandos, subagentes, skills, hooks e servidores MCP e LSP. 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. A atualização automática se liga e se desliga por marketplace.

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 Project liga o plugin para o time, mas não baixa nada: cada pessoa roda claude plugin install <nome>@<marketplace> --scope project uma vez. O terminal, as sessões locais do app e a extensão do VS Code leem os mesmos arquivos, então o plugin instalado num vale nos outros. Fora de uma sessão, os comandos claude plugin install, enable, disable, uninstall e list fazem o mesmo pelo shell.

Se a recarga depois de instalar ou desligar invalidar o cache da conversa, o Claude Code avisa e deixa a mudança pendente. Rode /reload-plugins --force para aplicar mesmo assim, ao custo de uma requisição sem cache. Se o resumo disser The plugin couldn't be loaded, a aba Errors do /plugin mostra o motivo.

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):

npm install -g typescript-language-server typescript

Depois, o plugin:

/plugin install typescript-lsp@claude-plugins-official

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. Se não estiver, a aba Errors do /plugin mostra Executable not found in $PATH. Para conferir, peça ao Claude para criar e depois corrigir um erro de tipo. Se aparecer uma linha como Found 1 new diagnostic issue, está funcionando; Ctrl + O abre os detalhes.

Plugins de segurança

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

/plugin install security-guidance@claude-plugins-official

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; na primeira vez, ele cria um ambiente em ~/.claude/security/. 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 na linha Dynamic workflows do /config). 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, adicione-o uma vez:

/plugin marketplace add sua-empresa/plugins
/plugin install deploy-helper@sua-empresa

A aba Marketplaces do /plugin lista os marketplaces adicionados e atualiza os plugins de cada um de uma vez. Se o marketplace oficial sumiu, ele volta com /plugin marketplace add anthropics/claude-plugins-official.

ℹ️ Sessões na nuvem (web e Projetos) não carregam os plugins da sua máquina nem os 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:

claude plugin validate ./meu-plugin
claude --plugin-dir ./meu-plugin

O --plugin-dir carrega o plugin só naquela sessão. Repare que os nomes mudam: a skill que era /deploy vira /meu-plugin:deploy.

Para entregar ao time, mande a pasta (ou um .zip) ou crie um marketplace próprio: um repositório com um arquivo .claude-plugin/marketplace.json que lista os seus plugins. Cada pessoa roda /plugin marketplace add sua-empresa/plugins uma vez e, a partir daí, instala pelo nome e recebe as suas atualizações.

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