Personalizando o GitHub Copilot no VS Code

// Código gerado pelo Copilot
function getUserData(id) {  // ❌ Sem tipos apesar de TypeScript ser obrigatório
  return fetch('/api/users/' + id)  // ❌ Template literals devem ser usados
}

// Código correto seguindo as convenções da equipe
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

Desenvolvedor: "Crie um componente React"
GitHub Copilot: "Gerei um class component"
Desenvolvedor: "Não, use functional component, com TypeScript, e type definitions para props..."

# Para o próximo componente também...
Desenvolvedor: "Crie outro componente..."
GitHub Copilot: "Aqui está um class component..."
Desenvolvedor: "Eu disse functional component!"

Desenvolvedor: "Me ajude a implementar autenticação de usuário"
Copilot: "Vou sugerir uma implementação geral usando JWT"
Desenvolvedor: "Nós usamos Auth0..."
Copilot: "Entendido. Vou implementar Auth0..."
Desenvolvedor: "E temos um fluxo de autenticação interno..."

# Diretrizes de Codificação do Projeto

## Estilo de Código
- Use elementos HTML5 semânticos (header, main, section, article)
- Priorize recursos modernos do JavaScript (const/let, arrow functions, template literals)
- Sempre inclua definições de tipos TypeScript

## Convenções de Nomenclatura
- Nomes de componentes, interfaces, type aliases: PascalCase
- Variáveis, funções, métodos: camelCase
- Membros privados de classes: prefixo underscore (_)
- Constantes: ALL_CAPS

## Qualidade de Código
- Use nomes significativos para variáveis e funções
- Adicione comentários para lógica complexa
- Implemente tratamento de erros para entradas do usuário e chamadas de API
- Prefira async/await em vez de callbacks

## Segurança
- Nunca codifique informações sensíveis diretamente
- Sempre valide valores de entrada
- Use placeholders para prevenir injeção de SQL

---
applyTo: "**/*.tsx"
---

# Diretrizes de Desenvolvimento React

- Priorize functional components em vez de class components
- Aproveite custom hooks para separar a lógica de gerenciamento de estado
- Sempre defina props com interfaces TypeScript
- Use classes utilitárias do Tailwind CSS para estilização
- Use React.memo para memoização quando necessário

---
applyTo: "src/server/**/*.ts"
---

# Diretrizes de Desenvolvimento Backend

- Coloque controllers em `src/controllers/`
- Coloque lógica de serviço em `src/services/`
- Implemente acesso a dados usando o padrão repository
- Carregue variáveis de ambiente do `.env`
- Centralize o tratamento de erros com middleware
- Use Winston para logging

{
  "github.copilot.chat.codeGeneration.useInstructionFiles": true
}

---
agent: 'agent'
model: 'GPT-4o'
tools: ['search/codebase']
description: 'Gerar um componente React'
---

Gere um componente React com os seguintes requisitos:

Nome do componente: ${input:componentName:Digite o nome do componente}
Props: ${input:props:Digite as props separadas por vírgula (ex.: title, onClick, isDisabled)}

## Regras de Geração
- Implemente em TypeScript
- Use functional components
- Defina props com uma interface
- Estilize com Tailwind CSS
- Gerencie estado com React Hooks conforme necessário
- Documente props com comentários JSDoc

---
agent: 'agent'
description: 'Gerar uma rota de API RESTful'
---

Gere um CRUD de API para a seguinte entidade:

Nome da entidade: ${input:entity:Nome da entidade}
Campos: ${input:fields:Especifique campos separados por vírgula}

## Requisitos de Implementação
- Use Express.js
- Implemente em TypeScript
- Coloque o router em `src/routes/`
- Coloque o controller em `src/controllers/`
- Use express-validator para validação
- Implemente tratamento de erros adequado
- Use formato de resposta JSON padrão

---
agent: 'agent'
tools: ['search/codebase']
description: 'Auto-gerar testes unitários'
---

Código selecionado: ${selection}

Gere testes unitários abrangentes para o código acima.

## Requisitos de Teste
- Use Jest
- Maximize a cobertura de testes
- Cubra casos normais e de erro
- Considere casos extremos
- Use mocks e stubs adequadamente
- Escreva declarações descritivas describe/it para cada caso de teste

---
agent: 'agent'
description: 'Realizar uma revisão de código'
---

Código selecionado: ${selection}

Realize uma revisão de código sob as seguintes perspectivas:

## Perspectivas de Revisão
1. **Segurança**: Presença de vulnerabilidades
2. **Performance**: Oportunidades de otimização
3. **Qualidade do Código**: Legibilidade, manutenibilidade
4. **Tratamento de Erros**: Tratamento adequado de exceções
5. **Testabilidade**: Facilidade de teste
6. **Padrões de Codificação**: Conformidade com as convenções do projeto

Forneça sugestões de melhoria com exemplos específicos de código.

.github/skills/
├── webapp-testing/
│   ├── SKILL.md
│   └── example-test.spec.ts
└── github-actions-debugging/
    ├── SKILL.md
    └── troubleshooting-guide.md

---
name: webapp-testing
description: Gere testes E2E usando Playwright. Use quando precisar testar interações do usuário.
---

# Testando Aplicações Web com Playwright

Esta skill suporta a geração de testes end-to-end (E2E) usando Playwright.

## Regras de Geração de Testes

1. **Prioridade de Seletores**: 
   - Priorize `getByRole`
   - Em seguida, `getByLabel`
   - Como último recurso, `getByTestId`

2. **Estrutura de Testes**:
   - Cada teste deve ser executável independentemente
   - Implemente setup/teardown adequado
   - Escreva asserções claras

3. **Melhores Práticas**:
   - Use o padrão Page Object Model
   - Waits são executados implicitamente
   - Tire screenshots apenas em caso de falha

## Exemplo de Template

Gere testes baseados no arquivo example-test.spec.ts a seguir.

```typescript
import { test, expect } from '@playwright/test';

test('usuário pode fazer login com sucesso', async ({ page }) => {
  await page.goto('/login');
  
  await page.getByRole('textbox', { name: 'Email' }).fill('user@test.com');
  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
  await page.getByRole('button', { name: 'Entrar' }).click();
  
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Bem-vindo' })).toBeVisible();
});

`.github/skills/webapp-testing/example-test.spec.ts`

```typescript
import { test, expect } from '@playwright/test';

test('usuário pode adicionar item ao carrinho', async ({ page }) => {
  await page.goto('/products');
  
  const product = page.getByRole('article').filter({ hasText: 'Nome do Produto' });
  await product.getByRole('button', { name: 'Adicionar ao Carrinho' }).click();
  
  await expect(page.getByRole('status', { name: 'Carrinho' })).toContainText('1 item');
});

test('usuário pode concluir o checkout', async ({ page }) => {
  await page.goto('/cart');
  
  await page.getByRole('button', { name: 'Checkout' }).click();
  await page.getByRole('textbox', { name: 'Número do Cartão' }).fill('4242424242424242');
  await page.getByRole('button', { name: 'Finalizar Pedido' }).click();
  
  await expect(page.getByRole('heading')).toContainText('Pedido Confirmado');
});

---
name: github-actions-failure-debugging
description: Depure falhas em workflows do GitHub Actions. Use quando o CI falhar.
---

# Depuração de Falhas no GitHub Actions

Esta skill fornece um processo eficiente para depurar falhas em workflows do GitHub Actions.

## Processo de Depuração

Ao depurar workflows do GitHub Actions que falharam em um Pull Request, siga estes passos:

1. **Verificar Status de Execução do Workflow**
   - Use a ferramenta `list_workflow_runs` para verificar execuções recentes e status para o PR

2. **Obter Resumo de Logs**
   - Use a ferramenta `summarize_job_log_failures` para obter um resumo por IA dos logs de jobs com falha
   - Entenda os problemas sem sobrecarregar a janela de contexto

3. **Identificar Causa Raiz**
   - Classifique o tipo de problema com base nas mensagens de erro:
     * Problemas de dependência
     * Falhas de teste
     * Erros de build
     * Erros de permissão
     * Timeouts

4. **Propor Soluções**
   - Forneça correções específicas para os problemas identificados
   - Sugira modificações no arquivo de workflow conforme necessário

## Problemas Comuns e Soluções

### Problemas de Dependência
- Incompatibilidade de versão do Node.js
- Falha na instalação de pacotes
→ Verifique o `package-lock.json`, limpe o cache

### Falhas de Teste
- Variáveis de ambiente ausentes
- Problemas com dados de teste
→ Verifique as configurações de variáveis de ambiente, valide os dados seed de teste

### Erros de Permissão
- Escopo insuficiente do GITHUB_TOKEN
- Configuração incorreta de secrets
→ Verifique permissões e secrets nas configurações do repositório

---
name: 'planner'
description: 'Agente especializado em planejamento pré-implementação'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# Agente de Planejamento de Implementação

Você é um agente especializado em criar planos de implementação. Você não escreve código, apenas cria planos de implementação.

## Responsabilidades

1. **Análise de Requisitos**: Analise os requisitos do usuário em detalhes
2. **Investigação de Impacto**: Identifique arquivos e componentes que precisam de mudanças
3. **Decomposição de Tarefas**: Divida a implementação em pequenas tarefas
4. **Identificação de Riscos**: Identifique possíveis problemas

## Formato do Plano

### 1. Visão Geral
[Objetivo da implementação e resultados esperados]

### 2. Escopo de Impacto
- Lista de arquivos que requerem alterações
- Componentes afetados

### 3. Etapas de Implementação
1. [Detalhes da Etapa 1]
   - Alterações necessárias
   - Observações
2. [Detalhes da Etapa 2]
   ...

### 4. Estratégia de Testes
- Alvos de testes unitários
- Cenários de testes E2E

### 5. Riscos e Contramedidas
| Risco | Contramedida |
|-------|--------------|
| ...   | ...          |

Após aprovação do plano, transfira para o agente de implementação.

---
name: 'security-reviewer'
description: 'Agente que revisa código sob uma perspectiva de segurança'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# Agente de Revisão de Segurança

Você é um agente que detecta vulnerabilidades em código como um especialista em segurança.

## Itens de Revisão

### 1. Autenticação e Autorização
- [ ] Implementação adequada do mecanismo de autenticação
- [ ] Sem vazamentos nas verificações de autorização
- [ ] Segurança no gerenciamento de sessão

### 2. Validação de Entrada
- [ ] Sanitizar todas as entradas do usuário
- [ ] Contramedidas contra injeção de SQL
- [ ] Contramedidas contra XSS
- [ ] Contramedidas contra CSRF

### 3. Proteção de Dados
- [ ] Sem informações sensíveis codificadas diretamente
- [ ] Uso adequado de criptografia
- [ ] Sem informações sensíveis nos logs

### 4. Dependências
- [ ] Uso de pacotes com vulnerabilidades conhecidas
- [ ] Recomendar atualização para versões mais recentes

### 5. Segurança de API
- [ ] Implementação de rate limiting
- [ ] Configuração adequada de CORS
- [ ] Gerenciamento seguro de chaves de API

## Formato de Relatório

Para cada problema detectado, reporte:
- **Severidade**: Crítico / Alto / Médio / Baixo
- **Descrição**: Qual é o problema
- **Impacto**: Impacto se explorado
- **Método de Correção**: Exemplos específicos de código

Vulnerabilidades Críticas/Altas requerem correções imediatas.

---
name: 'frontend-dev'
description: 'Agente especializado em desenvolvimento frontend'
tools:
  - 'search/codebase'
  - 'terminal'
  - 'edit'
model: 'GPT-4o'
---

# Agente de Desenvolvimento Frontend

Você é um especialista em desenvolvimento frontend usando React/TypeScript/Tailwind CSS.

## Princípios de Desenvolvimento

### Design de Componentes
- Priorize a reutilizabilidade
- Siga o princípio de responsabilidade única
- Mantenha props mínimas
- Nível de abstração adequado

### Gerenciamento de Estado
- Gerencie estado local com useState/useReducer
- Mantenha o estado global no mínimo necessário
- Previna re-renders desnecessários

### Estilização
- Use classes utilitárias do Tailwind CSS
- Minimize CSS customizado
- Implemente design responsivo mobile-first

### Performance
- Previna re-renders desnecessários com React.memo
- Memoize callbacks com useCallback
- Cache cálculos pesados com useMemo
- Otimize imagens (next/image, etc.)

## Fluxo de Implementação

1. Clarificar responsabilidades do componente
2. Definir interface de props
3. Projetar gerenciamento de estado
4. Implementar estrutura JSX
5. Aplicar estilização
6. Verificar acessibilidade (atributos ARIA)
7. Implementar suporte responsivo

Sempre visualize no browser após a implementação para verificar a funcionalidade.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "github-token",
      "description": "GitHub Personal Access Token",
      "password": true
    },
    {
      "type": "promptString",
      "id": "db-connection",
      "description": "String de Conexão com o Banco de Dados",
      "password": true
    }
  ],
  "servers": {
    "github-server": {
      "type": "http",
      "url": "https://github-mcp.com",
      "headers": {
        "Authorization": "Bearer ${input:github-token}"
      }
    },
    "database-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${input:db-connection}"
      }
    },
    "filesystem-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"]
    }
  }
}

{
  "chat.mcp.servers": {
    "perplexity-search": {
      "type": "http",
      "url": "https://perplexity-mcp.com/api",
      "env": {
        "PERPLEXITY_API_KEY": "${env:PERPLEXITY_API_KEY}"
      }
    },
    "slack-integration": {
      "command": "docker",
      "args": ["run", "-i", "slack-mcp-server"],
      "env": {
        "SLACK_TOKEN": "${env:SLACK_BOT_TOKEN}"
      }
    }
  }
}

# Exemplo de Prompt

@agent Busque issues recentes do repositório GitHub contoso/my-app
e liste-as em ordem de prioridade.

# Ações do Copilot
1. Chamar a ferramenta `list_issues` do Servidor GitHub MCP
2. Ordenar as issues recuperadas por prioridade
3. Responder em formato markdown

# Exemplo de Prompt

Recupere todos os usuários do banco de dados e
agregue a contagem de usuários ativos.

# Ações do Copilot
1. Executar a ferramenta `query` do Servidor de Banco de Dados MCP
2. SQL: SELECT COUNT(*) FROM users WHERE is_active = true
3. Formatar e exibir resultados

// custom-mcp-server/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server(
  {
    name: "custom-api-server",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// Definição de ferramenta
server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "fetch_user_data",
        description: "Buscar dados do usuário",
        inputSchema: {
          type: "object",
          properties: {
            userId: { type: "string", description: "ID do usuário" },
          },
          required: ["userId"],
        },
      },
    ],
  };
});

// Execução de ferramenta
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "fetch_user_data") {
    const userId = request.params.arguments?.userId;
    // Implementação da requisição de API
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    
    return {
      content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
    };
  }
  throw new Error("Ferramenta desconhecida");
});

// Iniciar servidor
const transport = new StdioServerTransport();
await server.connect(transport);

{
  "name": "custom-mcp-server",
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "latest"
  },
  "bin": {
    "custom-mcp-server": "./index.js"
  }
}

my-microservice/
├── .github/
│   ├── copilot-instructions.md          # Padrões gerais de desenvolvimento
│   ├── instructions/
│   │   ├── backend.instructions.md     # Específico para backend
│   │   ├── frontend.instructions.md    # Específico para frontend
│   │   └── infra.instructions.md       # Específico para infraestrutura
│   ├── agents/
│   │   ├── planner.md                   # Agente de planejamento
│   │   ├── implementer.md              # Agente de implementação
│   │   ├── reviewer.md                  # Agente de revisão
│   │   └── deployer.md                  # Agente de implantação
│   ├── skills/
│   │   ├── api-testing/
│   │   │   ├── SKILL.md
│   │   │   └── sample-api-test.ts
│   │   └── k8s-deployment/
│   │       ├── SKILL.md
│   │       └── deployment-template.yaml
│   └── prompts/
│       ├── create-service.prompt.md
│       ├── add-endpoint.prompt.md
│       └── generate-migration.prompt.md
└── .vscode/
    └── mcp.json                         # Configuração MCP

# Requisição ao agente @planner
Quero adicionar funcionalidade de autenticação de usuário.
Implemente autenticação baseada em OAuth e JWT token.

# Implementar com agente @implementer
Com base no plano acima, implemente o middleware de autenticação.

# Use Prompt File
/generate-tests

# Verifique com agente @security-reviewer
Realize uma revisão de segurança do middleware de autenticação implementado.

# Aproveite MCP + K8s Skill
@agent Gere configuração de implantação para o serviço de autenticação usando o kubernetes-skill.

{
  "github.copilot.chat.models": [
    {
      "id": "my-custom-model",
      "name": "Custom GPT-4",
      "endpoint": "https://api.openai.com/v1/chat/completions",
      "apiKey": "${env:OPENAI_API_KEY}",
      "model": "gpt-4-turbo-preview"
    },
    {
      "id": "local-llm",
      "name": "Local LLaMA",
      "endpoint": "http://localhost:8080/v1/chat/completions",
      "model": "llama-3-70b-instruct"
    }
  ]
}

Semana 1: Configurar Custom Instructions
Semana 2: Converter tarefas frequentes em Prompt Files
Semana 3: Introdução experimental de Custom Agents
Semana 4: Integração externa com servidores MCP

// Gerencie chaves de API com variáveis de ambiente
{
  "chat.mcp.servers": {
    "secure-api": {
      "env": {
        "API_KEY": "${env:MY_API_KEY}"  // Não codifique diretamente
      }
    }
  }
}

# team-wiki/copilot-usage.md

## Guia de Uso dos Custom Agents

- `@planner`: Planejamento pré-implementação
- `@implementer`: Implementação de código
- `@reviewer`: Revisão de código
- `@deployer`: Trabalho de implantação

## Referência Rápida de Prompt Files

- `/create-component`: Gerar componente React
- `/add-api-route`: Adicionar endpoint de API
- `/generate-tests`: Auto-gerar código de teste