MODULO 5.2

📐 Anatomia de uma Skill (Template Completo)

Desvende cada secao do template oficial de skills: Purpose, Inputs Required, Steps, Quality Checks e Output. Construa skills profissionais que funcionam de primeira.

6
Topicos
30
Minutos
Basico
Nivel
Teoria + Pratica
Tipo
1

🎯 Secao Purpose (Objetivo em Uma Frase)

A secao Purpose e a primeira linha de defesa contra ambiguidade. E uma unica frase que descreve o resultado final que a skill deve produzir. Sem um Purpose claro, o Claude pode interpretar a skill de formas diferentes a cada invocacao.

🎯 Conceito Principal

O Purpose deve ser uma unica frase orientada a resultado. Nao descreve o processo, descreve o que o usuario recebe no final. Exemplos:

  • Bom: "Converter um screenshot de design em uma pagina web responsiva pixel-perfect usando Tailwind CSS"
  • Bom: "Realizar code review em nivel de PR senior com classificacao de severidade"
  • Ruim: "Ajudar com codigo" (muito vago, sem resultado mensuravel)
  • Ruim: "Ler arquivos e analisar e depois gerar um relatorio e enviar" (multiplos resultados misturados)

💡 Dica Pratica

Use o teste da "uma frase": se voce nao consegue descrever o resultado em uma frase, a skill esta complexa demais. Divida em duas ou mais skills menores. Skills focadas sao mais reutilizaveis e produzem resultados melhores.

2

📥 Secao Inputs Required

A secao Inputs Required define o que o usuario precisa fornecer para que a skill funcione. Sem inputs claros, o Claude pode pedir informacoes durante a execucao ou assumir defaults inadequados.

🎯 Conceito Principal

Os inputs devem ser listados de forma explicita, com tipo e descricao:

## Inputs Required
- Screenshot ou URL do design (imagem ou link)
- Framework alvo (React, Vue, HTML puro)
- Breakpoints desejados (mobile, tablet, desktop)
- Paleta de cores (se diferente do screenshot)
  • Seja especifico: "Arquivo de imagem" e melhor que "referencia visual". O Claude precisa saber exatamente o que esperar
  • Indique opcionalidade: Marque inputs opcionais com "(opcional)" para que o Claude saiba quais pode pular
  • Inclua defaults: Se um input tem valor padrao, especifique: "Framework alvo (default: HTML com Tailwind)"

💡 Dica Pratica

Quanto menos inputs obrigatorios, mais facil de usar a skill. Defina defaults inteligentes para tudo que puder. O usuario so precisa fornecer o que e unico para cada invocacao. O resto deve ter valores padrao razoaveis.

3

📝 Secao Steps (Passos Detalhados)

A secao Steps e o coracao da skill. Aqui voce define cada passo que o Claude deve seguir, em ordem, com instrucoes especificas o suficiente para produzir resultados consistentes. Steps vagos geram outputs vagos.

🎯 Conceito Principal

Cada step deve ter um titulo claro e instrucoes especificas:

## Steps
### Step 1: Analisar o Design
Examine o screenshot e identifique:
- Grid system (colunas, gaps)
- Espacamento (padding, margin)
- Cores exatas (extrair hex values)
- Tipografia (font-family, sizes, weights)
### Step 2: Planejar HTML Semantico
Antes de escrever codigo, crie um outline da estrutura:
- Identificar componentes reutilizaveis
- Definir hierarquia de heading tags
- Mapear elementos interativos
  • Seja especifico: "Analisar cores" e vago. "Extrair hex values de cada cor visivel no screenshot" e especifico e acionavel
  • Inclua o PORQQUE: Adicionar o motivo por tras de cada step ajuda o Claude a tomar decisoes melhores quando encontra ambiguidade
  • Ordene logicamente: Steps devem seguir uma progressao natural. Analise antes de implementacao, implementacao antes de testes

💡 Dica Pratica

A regra de ouro para steps: se voce fosse treinar um junior para fazer essa tarefa, quais instrucoes daria? Esse nivel de detalhe e o ideal para uma skill. O Claude e extraordinariamente capaz, mas instrucoes especificas produzem resultados especificos.

4

✅ Secao Quality Checks

Quality Checks sao o mecanismo de auto-verificacao da skill. Sem eles, o Claude entrega o resultado e segue em frente. Com eles, o Claude verifica cada criterio antes de considerar a tarefa completa. E a diferenca entre "feito" e "feito direito".

🎯 Conceito Principal

Quality Checks devem ser verificaveis objetivamente:

## Quality Checks
- [ ] Layout corresponde ao screenshot original
- [ ] Valores hex de cores sao exatos
- [ ] Tipografia e fiel ao design
- [ ] Responsivo em mobile, tablet e desktop
- [ ] Hover e focus states incluidos
- [ ] Sem erros no console
  • Objetivos, nao subjetivos: "Codigo limpo" e subjetivo. "Funcoes com menos de 50 linhas" e objetivo e verificavel
  • Use checkbox syntax: O formato - [ ] sinaliza ao Claude que cada item precisa ser verificado individualmente
  • Cubra edge cases: Inclua checks para cenarios que costumam ser esquecidos: estados de erro, loading states, campos vazios

💡 Dica Pratica

Comece com 4-6 quality checks essenciais. Skills com muitos checks (10+) podem tornar a execucao lenta e cara em tokens. Foque nos criterios que realmente diferenciam um resultado "ok" de um resultado "excelente". Se preciso, agrupe checks relacionados.

5

📤 Secao Output (Entrega Esperada)

A secao Output descreve exatamente o que o Claude deve entregar ao finalizar a skill. Sem isso, o Claude pode entregar o resultado em formato inesperado: um arquivo quando voce esperava texto no console, ou vice-versa.

🎯 Conceito Principal

O Output deve especificar formato, estrutura e local de entrega:

## Output
Arquivos HTML/CSS production-ready no diretorio do projeto:
- index.html com estrutura semantica completa
- Tailwind classes inline (sem CSS custom)
- README com instrucoes de preview
  • Formato explicito: Especifique se o output e arquivo, texto no console, tabela, JSON, CSV, etc.
  • Localizacao: Indique onde os arquivos devem ser criados (diretorio atual, subpasta especifica, etc.)
  • Qualidade minima: "Production-ready" vs "Prototipo" vs "Draft" define o nivel de polimento esperado

💡 Dica Pratica

Inclua um exemplo do output esperado quando possivel. Se a skill gera um relatorio, mostre a estrutura do relatorio. Se gera codigo, mostre a estrutura de arquivos esperada. Exemplos concretos eliminam ambiguidade mais do que qualquer descricao textual.

6

📋 Template Completo Comentado

Aqui esta o template completo e oficial para criar skills profissionais. Copie este template, preencha com seu workflow especifico e salve em .claude/commands/.

🎯 Conceito Principal

# Skill: [Nome Descritivo]
## Purpose
[Verbo + objeto + qualificador]
## Inputs Required
- [Input obrigatorio 1 (tipo/formato)]
- [Input obrigatorio 2 (tipo/formato)]
- [Input opcional (opcional, default: X)]
## Steps
### Step 1: [Acao Clara]
[Instrucao especifica com detalhes suficientes]
[Incluir o PORQUE quando relevante]
### Step 2: [Acao Clara]
[Instrucao especifica]
### Step 3: [Acao Clara]
[Instrucao especifica]
## Quality Checks
- [ ] [Criterio verificavel 1]
- [ ] [Criterio verificavel 2]
- [ ] [Criterio verificavel 3]
## Output
[Formato + localizacao + nivel de qualidade]

💡 Dica Pratica

Seis regras para skills excelentes: 1) Seja especifico, steps vagos geram output vago. 2) Inclua checklists para auto-verificacao. 3) Comece com 25 invocacoes de teste antes de escalar. 4) Adicione o PORQUE por tras dos steps. 5) Versione suas skills no git. 6) Compartilhe no repositorio do time.

🏋️

Exercicio Pratico

🏋️

Exercicio: Construir Skill Completa

Tempo estimado: 20-25 minutos

1

Escolher um workflow repetitivo

Identifique algo que voce faz com frequencia: gerar testes, documentar funcoes, criar boilerplate, etc.

2

Escrever Purpose e Inputs

Defina o resultado em uma frase e liste todos os inputs necessarios com tipos e defaults.

3

Detalhar Steps com instrucoes especificas

Escreva 3-5 steps com instrucoes claras. Inclua o porque de cada step quando relevante.

4

Adicionar Quality Checks e Output

Crie 4-6 criterios de verificacao objetivos e descreva o entregavel final com formato e localizacao.

5

Testar 3 vezes e iterar

Invoque a skill 3 vezes com inputs diferentes. Ajuste steps e checks com base nos resultados.

Criterios de Sucesso

Purpose em uma frase clara
Inputs com tipos e defaults
Steps especificos e ordenados
Quality Checks verificaveis

📋 Resumo do Modulo

Purpose: uma frase, um resultado - Orientado a outcome, nao a processo. Se nao cabe em uma frase, divida a skill.
Inputs Required: explicitos e tipados - Com defaults inteligentes para minimizar o que o usuario precisa fornecer.
Steps: especificos e com PORQUE - Como treinaria um junior. Instrucoes claras produzem resultados claros.
Quality Checks: objetivos e verificaveis - Checkbox syntax para auto-verificacao. 4-6 criterios essenciais.
Output: formato, local e qualidade - Elimina ambiguidade sobre o que o Claude deve entregar no final.
Template completo pronto para uso - Copie, preencha, salve em .claude/commands/ e comece a usar.

Proximo Modulo:

5.3 - Skills Praticas: Screenshot to Website