O que é uma skill no Claude e o que muda quando você pede uma interface?

Fala aí, beleza? Toda conversa nova você digita o mesmo parágrafo: "não usa fonte de sistema, foge do gradiente roxo, quero algo com personalidade"

Aí o chat acaba, você abre outro e o combinado morre junto

A skill existe justamente pra isso: em vez de repetir instrução, você deixa ela salva num arquivo e o Claude puxa quando faz sentido

Neste post eu te mostro o que é uma skill, como o Claude carrega ela sem entupir o contexto e o que muda de verdade quando o pedido é de interface 🙂

Como uma skill é feita e por que ela não pesa no contexto

Uma skill é bem menos misteriosa do que o nome sugere: é uma pasta com um arquivo SKILL.md dentro

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

Esse arquivo tem duas partes: um frontmatter YAML com name e description, e o corpo em Markdown com as instruções propriamente ditas

minha-skill/
└── SKILL.md

---
name: minha-skill
description: quando o Claude deve usar isto
---

Aqui vai o corpo em Markdown, com as instruções

Se você conhece aquele arquivo de configuração que todo projeto tem, a lógica é parecida: texto simples, versionável, fácil de editar

E o contexto, não estoura?

Essa é a pergunta certa, e a resposta é o carregamento progressivo

No início da sessão, só o nome e a descrição da skill entram no contexto

O corpo completo só é lido quando a skill é acionada, seja por comando, seja por correspondência automática com a tarefa que você pediu

Ou seja: dá pra ter várias skills instaladas sem que todas fiquem gritando no contexto o tempo todo, o que é MUITO importante quando o seu conjunto começa a crescer

Tudo isso está na documentação oficial de skills do Claude Code

Se você quiser descer no detalhe de como criar suas próprias skills, tem um post inteiro aqui no blog sobre isso

Onde as skills ficam: pessoal, projeto e a ordem de precedência

No Claude Code, as skills podem viver em quatro níveis: enterprise, pessoal, projeto e plugin

Os dois que você mais vai usar no dia a dia são estes:

• pessoal: ~/.claude/skills/<nome-da-skill>/SKILL.md, vale em todos os projetos
• projeto: .claude/skills/<nome-da-skill>/SKILL.md, vale só naquele projeto

A diferença é bem prática: o pessoal é o seu jeito de trabalhar, o de projeto é a identidade daquele produto específico

E se duas skills tiverem o mesmo nome?

Existe ordem de precedência pra isso, se liga: enterprise sobrescreve pessoal, pessoal sobrescreve projeto

E qualquer um desses três sobrescreve uma skill embutida de mesmo nome

Outro detalhe útil, também descrito na documentação de skills: uma entrada de skill nos níveis enterprise, pessoal ou projeto pode ser um symlink apontando pra um diretório em outro lugar do disco, e o Claude Code segue o link e lê o SKILL.md do destino

Quem guarda tudo num repositório único de configurações agradece 😀

O que muda quando o pedido é de interface

Agora o pulo do gato

A Anthropic mantém uma skill oficial de design de frontend chamada frontend-design, publicada no repositório público anthropics/skills

O gatilho dela está descrito no próprio `SKILL.md`: ela entra quando o pedido envolve construir ou estilizar UI web, ou seja, componentes, páginas, artifacts, pôsteres e aplicações

E o objetivo declarado é gerar interfaces distintas em vez daquela estética genérica de IA que todo mundo já reconhece de longe

O que ela impõe antes do código

Duas coisas, e as duas são interessantes

Primeiro, ela exige escolher uma direção estética antes de escrever código, a partir de uma lista de extremos: brutalista, maximalista, retro-futurista, orgânica, luxo, entre outras

Segundo, ela lista explicitamente o que evitar:

• fontes como Inter, Roboto, Arial e fontes de sistema
• gradientes roxos sobre fundo branco
• layouts e componentes previsíveis

Reconheceu a lista? Pois é, é exatamente o pacote que sai por padrão quando ninguém dá direção nenhuma haha

Por que isso acontece

A Anthropic publicou um artigo do time Applied AI explicando o raciocínio, o *Improving frontend design through Skills*

A ideia central: sem direção, o modelo converge pro centro de alta probabilidade do que é comum na web

Ou seja, ele te entrega a média da internet

E a média da internet é… a média da internet 😛

A skill não deixa o modelo pular essa decisão: ele escolhe um extremo primeiro, depois escreve

Se o seu interesse é mais amplo do que o arquivo em si, vale ver também criar telas e protótipos com o Claude

Pedido sem skill x pedido com skill de design

A comparação fica bem clara quando você olha só pro que é verificável:

Repara que nada aqui promete "resultado muito melhor"

O que muda é onde a decisão é tomada e se ela sobrevive ao fim da conversa

Como ativar a skill oficial de design

O caminho mais curto no Claude Code é via plugin, e são poucos passos, todos descritos na documentação oficial de plugins:

1. Abra o Claude Code normalmente. O marketplace oficial se chama claude-plugins-official e é adicionado automaticamente na primeira execução interativa, sem registro manual

2. Instale o plugin de design:

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

3. Se a instalação falhar porque o catálogo do marketplace está desatualizado, rode a atualização manual e tente de novo:

/plugin marketplace update claude-plugins-official

O erro comum deste passo é achar que o marketplace não existe e sair procurando outro endereço pra registrar: o catálogo velho dá o mesmo sintoma de "não achei"

4. Peça em linguagem natural, sem comando extra. A própria página do plugin cita exemplos como painel para um app de streaming de música, landing page para uma startup e painel de configurações com modo escuro

A skill ativa sozinha quando o pedido é de interface, então não precisa invocar nada na mão

E no Claude.ai?

Atenção aqui, porque é outro produto e outro caminho!

No Claude.ai (o produto web) as skills são ligadas nas configurações de capacidades da conta, em claude.ai/settings/capabilities, e uma skill própria pode ser enviada como arquivo ZIP contendo uma pasta com um SKILL.md válido, conforme a central de ajuda da Anthropic

O erro comum é justamente esse: pegar o caminho do Claude.ai e tentar aplicar no Claude Code, ou o contrário

São dois produtos, dois fluxos

Ah, e vale saber: a mesma skill de design também é distribuída como plugin oficial em plugins/frontend-design, dentro do repositório anthropics/claude-plugins-official

Quem ganha mais com uma skill de design

Não é pra todo mundo, mas tem perfil que ganha absurdo:

Quem entrega landing page toda semana. Aqui o nível pessoal (~/.claude/skills/) é o certo: sua régua estética anda junto com você em qualquer projeto

Quem mantém um produto com identidade própria. Nível de projeto (.claude/skills/), porque a instrução pertence àquele repositório e não deve vazar pros outros

Quem atende vários clientes com direções diferentes. Uma skill por projeto resolve, e a precedência te salva: se o nome bater, você sabe exatamente quem ganha

Quem cansou de ver toda tela sair com a mesma cara. Esse é o caso mais direto: a lista de padrões evitados do SKILL.md já faz metade do trabalho

Conclusão

Skill é isso: instrução reutilizável, salva numa pasta com um SKILL.md, carregada de forma progressiva pra não pesar no contexto

E quando o assunto é interface, ela troca a estética média da web por uma direção que alguém escolheu de propósito

Seu próximo passo pode ser um dos dois, escolhe o que te agrada mais:

• instalar o plugin oficial com /plugin install frontend-design@claude-plugins-official e fazer o MESMO pedido de tela antes e depois, só pra ver o contraste com os próprios olhos
• ou criar a sua primeira skill: uma pasta, um SKILL.md, frontmatter com nome e descrição, e o corpo com as suas regras

Faça o teste e me conta o que achou, beleza? 😀

Até o próximo post!