Personalización de GitHub Copilot en VS Code

// Código generado por Copilot
function getUserData(id) {  // ❌ Sin tipos a pesar de que TypeScript es requerido
  return fetch('/api/users/' + id)  // ❌ Se deben usar template literals
}

// Código correcto siguiendo las convenciones del equipo
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

Desarrollador: "Crea un componente React"
GitHub Copilot: "Generé un componente de clase"
Desarrollador: "No, usa un componente funcional, con TypeScript, y definiciones de tipos para las props..."

# Para el siguiente componente también...
Desarrollador: "Crea otro componente..."
GitHub Copilot: "Aquí hay un componente de clase..."
Desarrollador: "¡Dije componente funcional!"

Desarrollador: "Ayúdame a implementar autenticación de usuarios"
Copilot: "Sugeriré una implementación general usando JWT"
Desarrollador: "Estamos usando Auth0..."
Copilot: "Entendido. Déjame implementar Auth0..."
Desarrollador: "Y tenemos un flujo de autenticación interno..."

# Directrices de codificación para todo el proyecto

## Estilo de código
- Usar elementos HTML5 semánticos (header, main, section, article)
- Priorizar las características modernas de JavaScript (const/let, arrow functions, template literals)
- Siempre incluir definiciones de tipos TypeScript

## Convenciones de nomenclatura
- Nombres de componentes, interfaces, alias de tipos: PascalCase
- Variables, funciones, métodos: camelCase
- Miembros privados de clase: prefijo de guión bajo (_)
- Constantes: ALL_CAPS

## Calidad del código
- Usar nombres de variables y funciones significativos
- Añadir comentarios para lógica compleja
- Implementar manejo de errores para inputs de usuario y llamadas a la API
- Preferir async/await sobre callbacks

## Seguridad
- Nunca hardcodear información sensible
- Siempre validar valores de entrada
- Usar placeholders para prevenir inyección SQL

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

# Directrices de desarrollo React

- Priorizar componentes funcionales sobre componentes de clase
- Aprovechar hooks personalizados para separar la lógica de gestión de estado
- Siempre definir props con interfaces TypeScript
- Usar clases de utilidad de Tailwind CSS para estilos
- Memoizar con React.memo cuando sea necesario

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

# Directrices de desarrollo Backend

- Colocar controladores en `src/controllers/`
- Colocar lógica de servicio en `src/services/`
- Implementar acceso a datos usando el patrón repository
- Cargar variables de entorno desde `.env`
- Centralizar el manejo de errores con middleware
- Usar Winston para logging

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

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

Genera un componente React con los siguientes requisitos:

Nombre del componente: ${input:componentName:Introduce el nombre del componente}
Props: ${input:props:Introduce las props separadas por comas (por ejemplo, title, onClick, isDisabled)}

## Reglas de generación
- Implementar en TypeScript
- Usar componentes funcionales
- Definir props con una interface
- Dar estilo con Tailwind CSS
- Gestionar estado con React Hooks según sea necesario
- Documentar props con comentarios JSDoc

---
agent: 'agent'
description: 'Generar una ruta API RESTful'
---

Genera una API CRUD para la siguiente entidad:

Nombre de la entidad: ${input:entity:Nombre de la entidad}
Campos: ${input:fields:Especifica los campos separados por comas}

## Requisitos de implementación
- Usar Express.js
- Implementar en TypeScript
- Colocar el router en `src/routes/`
- Colocar el controlador en `src/controllers/`
- Usar express-validator para validación
- Implementar manejo apropiado de errores
- Usar formato de respuesta JSON estándar

---
agent: 'agent'
tools: ['search/codebase']
description: 'Auto-generar pruebas unitarias'
---

Código seleccionado: ${selection}

Genera pruebas unitarias completas para el código anterior.

## Requisitos de prueba
- Usar Jest
- Maximizar la cobertura de pruebas
- Cubrir tanto casos normales como de error
- Considerar casos límite
- Usar mocks y stubs apropiadamente
- Escribir declaraciones describe/it descriptivas para cada caso de prueba

---
agent: 'agent'
description: 'Realizar una revisión de código'
---

Código seleccionado: ${selection}

Realiza una revisión de código desde las siguientes perspectivas:

## Perspectivas de revisión
1. **Seguridad**: Presencia de vulnerabilidades
2. **Rendimiento**: Oportunidades de optimización
3. **Calidad del código**: Legibilidad, mantenibilidad
4. **Manejo de errores**: Manejo apropiado de excepciones
5. **Testabilidad**: Facilidad de prueba
6. **Estándares de codificación**: Cumplimiento de las convenciones del proyecto

Proporciona sugerencias de mejora con ejemplos de código específicos.

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

---
name: webapp-testing
description: Generar pruebas E2E usando Playwright. Usa esto cuando necesites probar interacciones de usuario.
---

# Pruebas de aplicaciones web con Playwright

Este skill soporta la generación de pruebas end-to-end (E2E) usando Playwright.

## Reglas de generación de pruebas

1. **Prioridad de selectores**: 
   - Priorizar `getByRole`
   - Luego, `getByLabel`
   - Como último recurso, `getByTestId`

2. **Estructura de prueba**:
   - Cada prueba debe ser ejecutable de forma independiente
   - Implementar setup/teardown apropiado
   - Escribir aserciones claras

3. **Mejores prácticas**:
   - Usar el patrón Page Object Model
   - Las esperas se ejecutan implícitamente
   - Tomar capturas de pantalla solo en caso de fallo

## Ejemplo de plantilla

Genera pruebas basadas en el siguiente example-test.spec.ts.

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

test('el usuario puede iniciar sesión correctamente', 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: 'Sign in' }).click();
  
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

### Ejemplo 2: Depuración de GitHub Actions

`.github/skills/github-actions-debugging/SKILL.md`

```markdown
---
name: github-actions-failure-debugging
description: Depurar fallos en workflows de GitHub Actions. Úsalo cuando el CI falla.
---

# Depuración de fallos en GitHub Actions

Este skill proporciona un proceso eficiente para depurar fallos en workflows de GitHub Actions.

## Proceso de depuración

Al depurar workflows de GitHub Actions que fallaron en un Pull Request, sigue estos pasos:

1. **Verificar el estado de ejecución del workflow**
   - Usa la herramienta `list_workflow_runs` para verificar ejecuciones recientes y estados para el PR

2. **Obtener resumen del log**
   - Usa la herramienta `summarize_job_log_failures` para obtener un resumen de IA de los logs de trabajos fallidos
   - Comprender los problemas sin saturar la ventana de contexto

3. **Identificar la causa raíz**
   - Clasificar el tipo de problema a partir de los mensajes de error:
     * Problemas de dependencias
     * Fallos de pruebas
     * Errores de build
     * Errores de permisos
     * Timeouts

4. **Proponer soluciones**
   - Proporcionar correcciones específicas para los problemas identificados
   - Sugerir modificaciones del archivo de workflow según sea necesario

## Problemas comunes y soluciones

### Problemas de dependencias
- Desajuste de versión de Node.js
- Fallo en la instalación de paquetes
→ Verificar `package-lock.json`, limpiar caché

### Fallos de pruebas
- Variables de entorno faltantes
- Problemas con datos de prueba
→ Verificar configuración de variables de entorno, validar datos seed de pruebas

### Errores de permisos
- Alcance insuficiente de GITHUB_TOKEN
- Configuración incorrecta de secrets
→ Verificar permisos y secrets en la configuración del repositorio

---
name: 'planner'
description: 'Agente especializado en planificación previa a la implementación'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# Agente de planificación de implementación

Eres un agente especializado en crear planes de implementación. No escribes código, solo creas planes de implementación.

## Responsabilidades

1. **Análisis de requisitos**: Analizar los requisitos del usuario en detalle
2. **Investigación de impacto**: Identificar archivos y componentes que necesitan cambios
3. **Descomposición de tareas**: Dividir la implementación en tareas pequeñas
4. **Identificación de riesgos**: Identificar posibles problemas

## Formato del plan

### 1. Descripción general
[Propósito de la implementación y resultados esperados]

### 2. Alcance del impacto
- Lista de archivos que requieren cambios
- Componentes afectados

### 3. Pasos de implementación
1. [Detalles del Paso 1]
   - Cambios requeridos
   - Notas
2. [Detalles del Paso 2]
   ...

### 4. Estrategia de pruebas
- Objetivos de pruebas unitarias
- Escenarios de pruebas E2E

### 5. Riesgos y contramedidas
| Riesgo | Contramedida |
|--------|--------------|
| ...    | ...          |

Después de la aprobación del plan, traspasar al agente de implementación.

---
name: 'security-reviewer'
description: 'Agente que revisa el código desde una perspectiva de seguridad'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# Agente de revisión de seguridad

Eres un agente que detecta vulnerabilidades de código como experto en seguridad.

## Elementos de revisión

### 1. Autenticación y autorización
- [ ] Implementación apropiada del mecanismo de autenticación
- [ ] Sin fugas de verificación de autorización
- [ ] Seguridad en la gestión de sesiones

### 2. Validación de entradas
- [ ] Sanitizar todas las entradas del usuario
- [ ] Contramedidas contra inyección SQL
- [ ] Contramedidas XSS
- [ ] Contramedidas CSRF

### 3. Protección de datos
- [ ] Sin información sensible hardcodeada
- [ ] Uso apropiado del cifrado
- [ ] Sin información sensible en logs

### 4. Dependencias
- [ ] Uso de paquetes con vulnerabilidades conocidas
- [ ] Recomendar actualizar a las últimas versiones

### 5. Seguridad de API
- [ ] Implementación de rate limiting
- [ ] Configuración apropiada de CORS
- [ ] Gestión segura de claves API

## Formato del informe

Para cada problema detectado, reportar:
- **Severidad**: Crítica / Alta / Media / Baja
- **Descripción**: Cuál es el problema
- **Impacto**: Impacto si se explota
- **Método de corrección**: Ejemplos de código específicos

Las vulnerabilidades Críticas/Altas requieren correcciones inmediatas.

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

# Agente de desarrollo Frontend

Eres un experto en desarrollo frontend usando React/TypeScript/Tailwind CSS.

## Principios de desarrollo

### Diseño de componentes
- Priorizar la reutilización
- Seguir el principio de responsabilidad única
- Mantener las props mínimas
- Nivel de abstracción apropiado

### Gestión de estado
- Gestionar el estado local con useState/useReducer
- Mantener el estado global al mínimo necesario
- Prevenir re-renderizados innecesarios

### Estilos
- Usar clases de utilidad de Tailwind CSS
- Minimizar CSS personalizado
- Implementar diseño responsivo mobile-first

### Rendimiento
- Prevenir re-renderizados innecesarios con React.memo
- Memoizar callbacks con useCallback
- Cachear cálculos pesados con useMemo
- Optimizar imágenes (next/image, etc.)

## Flujo de implementación

1. Clarificar las responsabilidades del componente
2. Definir la interface de props
3. Diseñar la gestión de estado
4. Implementar la estructura JSX
5. Aplicar estilos
6. Verificar la accesibilidad (atributos ARIA)
7. Implementar soporte responsivo

Siempre previsualizar en el navegador después de la implementación para verificar la funcionalidad.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "github-token",
      "description": "GitHub Personal Access Token",
      "password": true
    },
    {
      "type": "promptString",
      "id": "db-connection",
      "description": "Database Connection String",
      "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}"
      }
    }
  }
}

// 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: {},
    },
  }
);

// Definición de herramienta
server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "fetch_user_data",
        description: "Obtener datos del usuario",
        inputSchema: {
          type: "object",
          properties: {
            userId: { type: "string", description: "ID del usuario" },
          },
          required: ["userId"],
        },
      },
    ],
  };
});

// Ejecución de herramienta
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "fetch_user_data") {
    const userId = request.params.arguments?.userId;
    // Implementación de solicitud 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("Herramienta desconocida");
});

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

my-microservice/
├── .github/
│   ├── copilot-instructions.md          # Estándares de desarrollo generales
│   ├── instructions/
│   │   ├── backend.instructions.md     # Específico de backend
│   │   ├── frontend.instructions.md    # Específico de frontend
│   │   └── infra.instructions.md       # Específico de infraestructura
│   ├── agents/
│   │   ├── planner.md                   # Agente de planificación
│   │   ├── implementer.md              # Agente de implementación
│   │   ├── reviewer.md                  # Agente de revisión
│   │   └── deployer.md                  # Agente de despliegue
│   ├── 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                         # Configuración MCP

# Solicitud al agente @planner
Quiero añadir funcionalidad de autenticación de usuarios.
Implementar autenticación basada en OAuth y tokens JWT.

# Implementar con el agente @implementer
Basándote en el plan anterior, implementa el middleware de autenticación.

# Usar Prompt File
/generate-tests

# Verificar con el agente @security-reviewer
Realiza una revisión de seguridad del middleware de autenticación implementado.

# Aprovechar MCP + K8s Skill
@agent Genera la configuración de despliegue para el servicio de autenticación usando 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: Convertir tareas frecuentes en Prompt Files
Semana 3: Introducción de prueba de Custom Agents
Semana 4: Integración externa con servidores MCP

// Gestionar claves API con variables de entorno
{
  "chat.mcp.servers": {
    "secure-api": {
      "env": {
        "API_KEY": "${env:MY_API_KEY}"  // No hardcodear
      }
    }
  }
}

# team-wiki/copilot-usage.md

## Uso de Custom Agents

- `@planner`: Planificación previa a la implementación
- `@implementer`: Implementación de código
- `@reviewer`: Revisión de código
- `@deployer`: Trabajo de despliegue

## Referencia rápida de Prompt Files

- `/create-component`: Generar componente React
- `/add-api-route`: Añadir endpoint de API
- `/generate-tests`: Auto-generar código de pruebas