Meta-Configuração e Evolução Skill

Objetivo

Esta é uma skill meta que automatiza o ciclo completo de:

1. 🔍 Research: Buscar documentação oficial de tecnologias
2. 📚 Learning: Extrair padrões, exemplos e melhores práticas
3. 🛠️ Implementation: Criar skills/agents/hooks customizados
4. 📝 Documentation: Documentar conhecimento adquirido

Quando Esta Skill Ativa

Ativa automaticamente quando você precisa:

• Integrar nova tecnologia ao Plataforma B2B de treinamento técnico corporativo
• Atualizar configurações baseado em nova versão
• Implementar padrão da indústria
• Criar skills/agents para novo domínio
• Automatizar workflow recorrente

Processo Automatizado (6 Etapas)

Etapa 1: Identificar Necessidade

Gatilhos:

• Usuário solicita integração de tecnologia
• Nova versão de dependência lançada
• Padrão emergente na comunidade
• Débito técnico identificado

Ações:

• Definir escopo da pesquisa
• Listar fontes oficiais
• Priorizar documentação

Etapa 2: Web Research

Estratégia de Busca:

# 1. Busca geral
WebSearch("Nome da Tecnologia official documentation 2025")

# 2. Busca específica
WebSearch("Nome da Tecnologia best practices patterns examples")

# 3. Busca de casos de uso
WebSearch("Nome da Tecnologia React integration tutorial")

Fontes Priorizadas:

1. Documentação Oficial (docs.*, *.dev)
2. GitHub Repos Oficiais (README, wiki, examples/)
3. Blog Oficial (release notes, announcements)
4. Community Hubs (Dev.to, Medium autores verificados)
5. Stack Overflow (respostas aceitas com +100 votos)

Informações a Extrair:

• Estrutura de arquivos recomendada
• Padrões de código (code style guides)
• Exemplos práticos (working code)
• Melhores práticas (best practices)
• Configurações comuns (setup guides)
• Pitfalls conhecidos (common mistakes)
• Integrações (com stack existente)

Etapa 3: Análise e Síntese

Processar Informação:

// Template mental
const knowledge = {
  technology: "Nome",
  version: "X.Y.Z",

  // Conceitos-chave
  coreConcepts: [
    { name: "Conceito 1", description: "...", importance: "high" },
    { name: "Conceito 2", description: "...", importance: "medium" }
  ],

  // Padrões de código
  patterns: [
    {
      name: "Pattern Name",
      problem: "O que resolve",
      solution: "Como resolver",
      example: "// código"
    }
  ],

  // Integração com stack atual
  integration: {
    react: "Como integrar com React",
    vite: "Configuração Vite necessária",
    tailwind: "Classes Tailwind relevantes"
  },

  // Pitfalls
  pitfalls: [
    { mistake: "Erro comum", solution: "Como evitar" }
  ]
}

Etapa 4: Decisão de Aplicação

Matriz de Decisão:

Aplicação	Quando Usar	Exemplo
Skill	Conhecimento que ativa automaticamente por contexto	ux-nomenclature, component-refactor
Agent	Tarefa complexa com múltiplos passos	ux-refactor-agent, test-generator-agent
Hook	Automação de evento específico	PostToolUse para formatar código
Slash Command	Comando manual recorrente	/test, /deploy, /fix
MCP Server	Integração externa com protocolo	chrome-devtools, playwright

Critérios de Escolha:

Skill:
  ✅ Conhecimento declarativo
  ✅ Ativa por contexto (automático)
  ✅ Sem lógica complexa
  ✅ Consulta rápida

Agent:
  ✅ Múltiplos passos
  ✅ Lógica condicional
  ✅ System prompt extenso
  ✅ Context window isolado

Hook:
  ✅ Reação a evento
  ✅ Automação shell command
  ✅ Pode bloquear ação
  ✅ Transformação de input

Slash Command:
  ✅ Invocação manual
  ✅ Workflow definido
  ✅ Substitui comandos longos

Etapa 5: Geração de Artefatos

5.1 Criar Skill

Estrutura:

---
name: tecnologia-nome
description: Descrição concisa do que a skill faz
allowed-tools: [Read, Edit, Grep, ...]
---

# Skill Title

## Objetivo
[O que esta skill faz]

## Conceitos-Chave
[Conhecimento extraído da documentação]

## Padrões de Código
[Exemplos práticos]

## Integração com Plataforma B2B de treinamento técnico corporativo
[Como usar no contexto do projeto]

## Comandos Úteis
[Comandos bash/grep para aplicar]

## Referências
[Links para docs oficiais]

## Ativação Automática
Esta skill ativa quando você:
- [Condição 1]
- [Condição 2]

Salvar em: .claude/skills/{tecnologia-nome}/SKILL.md

5.2 Criar Agent

Estrutura:

# Agent Name

## System Prompt

You are a specialized agent for [task description].

### Expertise Areas
- [Area 1]
- [Area 2]

### Tools Available
- Read
- Edit
- Bash
- [outros]

### Workflow

1. **Step 1**: [Description]
   - Action: [what to do]
   - Output: [expected result]

2. **Step 2**: [Description]
   ...

### Quality Criteria

Your output must:
- [ ] Criterion 1
- [ ] Criterion 2

### Examples

[Provide 2-3 examples of input/output]

### Constraints

DO NOT:
- [Don't 1]
- [Don't 2]

ALWAYS:
- [Always 1]
- [Always 2]

Salvar em: .claude/agents/{agent-name}.md

5.3 Criar Hook

Estrutura (hooks.toml):

[[PreToolUse]]
matcher = "Edit|Write"
name = "format-code"

  [[PreToolUse.hooks]]
  type = "command"
  command = '''
    # Hook logic here
    prettier --write "$FILE"
  '''

Adicionar em: .claude/hooks.toml

Etapa 6: Documentação e Validação

Criar Documento de Referência:

# [Tecnologia] Integration Guide - Plataforma B2B de treinamento técnico corporativo

## Overview
[O que foi integrado e por quê]

## Research Summary
- Official Docs: [link]
- Key Concepts: [list]
- Best Practices: [list]

## Implementation
### Skills Created
- [skill-name]: [description]

### Agents Created
- [agent-name]: [description]

### Hooks Added
- [hook-name]: [trigger] → [action]

## Usage Examples
[3-5 exemplos práticos]

## Testing
[Como validar que funciona]

## Maintenance
[Como manter atualizado]

## References
[Todos os links consultados]

Salvar em: docs/integrations/{tecnologia}-integration.md

Templates Prontos

Template: Nova Tecnologia

# Workflow completo
1. WebSearch("[Tech] official documentation best practices 2025")
2. WebFetch(docs_url, "Extract setup, patterns, examples")
3. Criar skill: .claude/skills/{tech}/SKILL.md
4. Testar: Implementar exemplo mínimo
5. Documentar: docs/integrations/{tech}-integration.md

Template: Padrão de Código

# Quando aprender novo padrão
1. WebSearch("[Pattern Name] React TypeScript examples")
2. Extrair exemplos
3. Criar skill: .claude/skills/patterns/{pattern}/SKILL.md
4. Adicionar ao component-refactor skill

Template: Automação

# Quando identificar tarefa repetitiva
1. Documentar workflow atual (passos manuais)
2. Decidir: Hook vs Slash Command vs Agent
3. Implementar solução
4. Testar 3x em cenários reais
5. Adicionar à documentação

Checklist de Aplicação

Ao aplicar conhecimento externo:

Research

• Documentação oficial consultada
• Exemplos práticos encontrados (3+)
• Melhores práticas identificadas
• Pitfalls conhecidos listados
• Integrações com stack validadas

Implementation

• Tipo de artefato decidido (skill/agent/hook)
• Frontmatter correto (name, description, allowed-tools)
• Exemplos práticos incluídos
• Comandos úteis documentados
• Referências linkadas

Validation

• Testado em cenário real
• Funciona conforme esperado
• Não quebra funcionalidades existentes
• Documentação criada
• Adicionado ao CLAUDE.md (se relevante)

Maintenance

• Data da fonte documentada
• Versão da tecnologia especificada
• Plano de atualização definido

Exemplos de Uso

Exemplo 1: Integrar Nova Biblioteca UI

# 1. Research
WebSearch("Radix UI React components documentation 2025")
WebFetch("https://www.radix-ui.com/docs/primitives/overview/introduction",
  "Extract component patterns, accessibility features, integration with Tailwind")

# 2. Synthesize
- Radix UI fornece componentes acessíveis unstyled
- Integra nativamente com Tailwind
- Pattern: Composition over configuration

# 3. Apply
Criar: .claude/skills/radix-ui-integration/SKILL.md
Conteúdo:
  - Quando usar Radix vs componente custom
  - Como compor com Tailwind
  - Exemplos: Dropdown, Dialog, Tooltip
  - Acessibilidade automática (ARIA)

# 4. Validate
Implementar Dialog component com Radix
Testar acessibilidade (screen reader)
Validar integração Tailwind

# 5. Document
docs/integrations/radix-ui-integration.md

Exemplo 2: Atualizar Padrão React

# 1. Research
WebSearch("React 18.3 new features hooks patterns 2025")
WebFetch("https://react.dev/blog", "Extract new patterns, deprecations")

# 2. Synthesize
- useTransition para UI não-bloqueante
- Automatic batching habilitado
- Concurrent features estáveis

# 3. Apply
Atualizar: .claude/skills/component-refactor/SKILL.md
Adicionar seção: "React 18.3 Patterns"
  - useTransition para filtros
  - useDeferredValue para buscas
  - Automatic batching (sem mudanças necessárias)

# 4. Validate
Refatorar SearchBar com useTransition
Medir performance (antes/depois)

# 5. Document
Atualizar CLAUDE.md seção "React Patterns"

Exemplo 3: Criar Agent de Migração

# 1. Research (contexto interno)
Grep: Encontrar todos os *LearningSystem.jsx
Read: Analisar estrutura comum
Identificar: 800 linhas duplicadas

# 2. Synthesize
Pattern: Template Method
Solution: BaseLearningSystem + props

# 3. Apply
Criar: .claude/agents/learning-system-migrator.md
System Prompt:
  - Analisar componente atual
  - Extrair props necessárias
  - Gerar código BaseLearningSystem
  - Validar funcionalidade idêntica
  - Criar testes

# 4. Validate
Executar agent em BashLearningSystem
Comparar output (diff)
Rodar testes

# 5. Document
docs/agents/learning-system-migrator-guide.md

Métricas de Sucesso

Métrica	Meta	Como Medir
Tempo de Integração	-50%	Antes vs Depois desta skill
Qualidade do Código	Seguir padrões oficiais	Lint + Review
Documentação	100% das integrações	docs/integrations/
Reutilização	3+ usos por skill	Logs de ativação
Manutenção	Atualizar <2h por tech	Tracking tempo

Evolução Contínua

Esta meta-skill deve ser atualizada quando:

• Anthropic lança nova feature (skills/agents/hooks)
• Novo padrão emerge na comunidade
• Feedback de uso identificar gap
• Tecnologia no stack evolui significativamente

Processo de Atualização:

1. Identificar mudança
2. Pesquisar nova documentação
3. Atualizar este SKILL.md
4. Aplicar em skills existentes
5. Validar retrocompatibilidade

Comandos de Manutenção

# Listar todas as skills
ls -la .claude/skills/

# Ver última atualização de skill
stat -c '%y %n' .claude/skills/*/SKILL.md

# Buscar skills que referenciam tecnologia
grep -r "tecnologia-nome" .claude/skills/

# Validar frontmatter de todas skills
for skill in .claude/skills/*/SKILL.md; do
  echo "Checking $skill"
  head -5 "$skill" | grep -E "^(name|description|allowed-tools):"
done

# Contar linhas de todas as skills
wc -l .claude/skills/*/SKILL.md

# Encontrar skills órfãs (não usadas em 30 dias)
find .claude/skills/ -name "SKILL.md" -mtime +30

Referências Meta

• Anthropic Docs: https://docs.claude.com/en/docs/claude-code
• Hooks Guide: https://code.claude.com/docs/en/hooks-guide
• Skills Best Practices: Community patterns
• Agent Patterns: alexop.dev full-stack guide

Ativação Automática

Esta skill ativa quando você:

• Pesquisa documentação oficial
• Integra nova tecnologia
• Cria skills/agents/hooks
• Atualiza configurações do projeto
• Aplica conhecimento externo ao Plataforma B2B de treinamento técnico corporativo
• Automatiza processos recorrentes
• Evolui arquitetura do sistema