GitHub Copilot in VS Code anpassen

// Von Copilot generierter Code
function getUserData(id) {  // ❌ Keine Typen, obwohl TypeScript erforderlich ist
  return fetch('/api/users/' + id)  // ❌ Template-Literals sollten verwendet werden
}

// Korrekter Code gemäß Team-Konventionen
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

Entwickler: "Erstelle eine React-Komponente"
GitHub Copilot: "Eine Klassen-Komponente wurde generiert"
Entwickler: "Nein, verwende eine funktionale Komponente, mit TypeScript und Typdefinitionen für Props..."

# Auch für die nächste Komponente...
Entwickler: "Erstelle eine weitere Komponente..."
GitHub Copilot: "Hier ist eine Klassen-Komponente..."
Entwickler: "Ich sagte funktionale Komponente!"

Entwickler: "Hilf mir, Benutzerauthentifizierung zu implementieren"
Copilot: "Ich werde eine allgemeine Implementierung mit JWT vorschlagen"
Entwickler: "Wir verwenden Auth0..."
Copilot: "Verstanden. Lass mich Auth0 implementieren..."
Entwickler: "Und wir haben einen internen Authentifizierungsfluss..."

# Projektweite Coding-Leitlinien

## Code-Stil
- Semantische HTML5-Elemente verwenden (header, main, section, article)
- Moderne JavaScript-Funktionen priorisieren (const/let, Arrow-Funktionen, Template-Literals)
- TypeScript-Typdefinitionen immer einschließen

## Namenskonventionen
- Komponentennamen, Interfaces, Typ-Aliase: PascalCase
- Variablen, Funktionen, Methoden: camelCase
- Private Klassenmitglieder: Unterstrich-Präfix (_)
- Konstanten: GROSSBUCHSTABEN

## Code-Qualität
- Aussagekräftige Variablen- und Funktionsnamen verwenden
- Kommentare für komplexe Logik hinzufügen
- Fehlerbehandlung für Benutzereingaben und API-Aufrufe implementieren
- async/await gegenüber Callbacks bevorzugen

## Sicherheit
- Sensible Informationen nie hardcoden
- Eingabewerte immer validieren
- Platzhalter verwenden, um SQL-Injection zu verhindern

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

# React-Entwicklungsleitlinien

- Funktionale Komponenten gegenüber Klassen-Komponenten priorisieren
- Custom Hooks nutzen, um State-Management-Logik zu trennen
- Props immer mit TypeScript-Interfaces definieren
- Tailwind CSS Utility-Klassen für Styling verwenden
- Bei Bedarf mit React.memo memoizieren

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

# Backend-Entwicklungsleitlinien

- Controller in `src/controllers/` platzieren
- Service-Logik in `src/services/` platzieren
- Datenzugriff mit dem Repository-Pattern implementieren
- Umgebungsvariablen aus `.env` laden
- Fehlerbehandlung mit Middleware zentralisieren
- Winston für Logging verwenden

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

---
agent: 'agent'
model: 'GPT-4o'
tools: ['search/codebase']
description: 'Eine React-Komponente generieren'
---

Generiere eine React-Komponente mit folgenden Anforderungen:

Komponentenname: ${input:componentName:Komponentenname eingeben}
Props: ${input:props:Props kommagetrennt eingeben (z.B. title, onClick, isDisabled)}

## Generierungsregeln
- In TypeScript implementieren
- Funktionale Komponenten verwenden
- Props mit einem Interface definieren
- Styling mit Tailwind CSS
- State mit React Hooks bei Bedarf verwalten
- Props mit JSDoc-Kommentaren dokumentieren

---
agent: 'agent'
description: 'Eine RESTful API-Route generieren'
---

Generiere eine CRUD-API für die folgende Entität:

Entitätsname: ${input:entity:Entitätsname}
Felder: ${input:fields:Felder kommagetrennt angeben}

## Implementierungsanforderungen
- Express.js verwenden
- In TypeScript implementieren
- Router in `src/routes/` platzieren
- Controller in `src/controllers/` platzieren
- express-validator für Validierung verwenden
- Ordentliche Fehlerbehandlung implementieren
- Standard-JSON-Antwortformat verwenden

---
agent: 'agent'
tools: ['search/codebase']
description: 'Unit-Tests automatisch generieren'
---

Ausgewählter Code: ${selection}

Generiere umfassende Unit-Tests für den obigen Code.

## Testanforderungen
- Jest verwenden
- Testabdeckung maximieren
- Normale und Fehlerfälle abdecken
- Edge Cases berücksichtigen
- Mocks und Stubs angemessen verwenden
- Beschreibende describe/it-Anweisungen für jeden Testfall schreiben

---
agent: 'agent'
description: 'Ein Code-Review durchführen'
---

Ausgewählter Code: ${selection}

Führe ein Code-Review aus folgenden Perspektiven durch:

## Review-Perspektiven
1. **Sicherheit**: Vorhandensein von Schwachstellen
2. **Performance**: Optimierungsmöglichkeiten
3. **Code-Qualität**: Lesbarkeit, Wartbarkeit
4. **Fehlerbehandlung**: Ordentliche Exception-Behandlung
5. **Testbarkeit**: Einfachheit des Testens
6. **Coding-Standards**: Einhaltung der Projektkonventionen

Verbesserungsvorschläge mit spezifischen Code-Beispielen liefern.

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

---
name: webapp-testing
description: E2E-Tests mit Playwright generieren. Verwenden, wenn Benutzerinteraktionen getestet werden müssen.
---

# Web-Anwendungstests mit Playwright

Diese Skill unterstützt die Generierung von End-to-End (E2E)-Tests mit Playwright.

## Test-Generierungsregeln

1. **Selektor-Priorität**: 
   - `getByRole` priorisieren
   - Als nächstes `getByLabel`
   - Als letzten Ausweg `getByTestId`

2. **Test-Struktur**:
   - Jeder Test sollte unabhängig ausführbar sein
   - Ordentliches Setup/Teardown implementieren
   - Klare Assertions schreiben

3. **Best Practices**:
   - Page Object Model-Pattern verwenden
   - Waits werden implizit ausgeführt
   - Screenshots nur bei Fehlern aufnehmen

## Template-Beispiel

Tests basierend auf der folgenden example-test.spec.ts generieren.

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

test('user can log in successfully', 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();
});

### Agent Skills-Vorteile

- **Portabilität**: Gemeinsame Verwendung in VS Code, CLI und Coding-Agent
- **Kontextverständnis**: Copilot lädt automatisch relevante Skills
- **Team-Sharing**: Wissen durch Einschluss im Repository teilen
- **Offener Standard**: Konform mit [agentskills.io](https://agentskills.io)

---

## 4. Custom Agents — Rollenspezifische Assistenten

Custom Agents definieren Chat-Modi, die für spezifische Rollen oder Aufgaben spezialisiert sind.

### Beispiel 1: Planungs-Agent

`.github/agents/planner.md`

```markdown
---
name: 'planner'
description: 'Agent spezialisiert auf Planung vor der Implementierung'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# Implementierungsplanungs-Agent

Sie sind ein Agent spezialisiert auf die Erstellung von Implementierungsplänen. Sie schreiben keinen Code, sondern erstellen nur Implementierungspläne.

## Verantwortlichkeiten

1. **Anforderungsanalyse**: Benutzeranforderungen detailliert analysieren
2. **Auswirkungsuntersuchung**: Dateien und Komponenten identifizieren, die geändert werden müssen
3. **Aufgabenzerlegung**: Implementierung in kleine Aufgaben aufteilen
4. **Risikoidentifizierung**: Potenzielle Probleme identifizieren

## Planformat

### 1. Übersicht
[Zweck der Implementierung und erwartete Ergebnisse]

### 2. Auswirkungsbereich
- Liste der Dateien, die Änderungen erfordern
- Betroffene Komponenten

### 3. Implementierungsschritte
1. [Details von Schritt 1]
   - Erforderliche Änderungen
   - Hinweise
2. [Details von Schritt 2]
   ...

### 4. Teststrategie
- Unit-Test-Ziele
- E2E-Test-Szenarien

### 5. Risiken und Gegenmaßnahmen
| Risiko | Gegenmaßnahme |
|--------|---------------|
| ...    | ...           |

Nach Planfreigabe an den Implementierungs-Agent übergeben.

---
name: 'security-reviewer'
description: 'Agent, der Code aus Sicherheitsperspektive überprüft'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# Sicherheits-Review-Agent

Sie sind ein Agent, der Code-Schwachstellen als Sicherheitsexperte erkennt.

## Review-Punkte

### 1. Authentifizierung & Autorisierung
- [ ] Ordentliche Authentifizierungsmechanismus-Implementierung
- [ ] Keine Autorisierungsprüfungs-Lecks
- [ ] Sitzungsverwaltungssicherheit

### 2. Eingabevalidierung
- [ ] Alle Benutzereingaben bereinigen
- [ ] SQL-Injection-Gegenmaßnahmen
- [ ] XSS-Gegenmaßnahmen
- [ ] CSRF-Gegenmaßnahmen

### 3. Datenschutz
- [ ] Keine hardcodierten sensiblen Informationen
- [ ] Ordentliche Verwendung von Verschlüsselung
- [ ] Keine sensiblen Informationen in Logs ausgegeben

### 4. Abhängigkeiten
- [ ] Verwendung von Paketen mit bekannten Schwachstellen
- [ ] Update auf neueste Versionen empfehlen

### 5. API-Sicherheit
- [ ] Rate-Limiting-Implementierung
- [ ] Ordentliche CORS-Konfiguration
- [ ] Sichere API-Schlüsselverwaltung

## Berichtsformat

Für jedes erkannte Problem berichten:
- **Schweregrad**: Kritisch / Hoch / Mittel / Niedrig
- **Beschreibung**: Was ist das Problem
- **Auswirkung**: Auswirkung bei Ausnutzung
- **Behebungsmethode**: Spezifische Code-Beispiele

Kritische/Hohe Schwachstellen erfordern sofortige Korrekturen.

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

my-microservice/
├── .github/
│   ├── copilot-instructions.md          # Gesamte Entwicklungsstandards
│   ├── instructions/
│   │   ├── backend.instructions.md     # Backend-spezifisch
│   │   ├── frontend.instructions.md    # Frontend-spezifisch
│   │   └── infra.instructions.md       # Infrastruktur-spezifisch
│   ├── agents/
│   │   ├── planner.md                   # Planungs-Agent
│   │   ├── implementer.md              # Implementierungs-Agent
│   │   ├── reviewer.md                  # Review-Agent
│   │   └── deployer.md                  # Deployment-Agent
│   ├── 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                         # MCP-Konfiguration

# Anfrage an @planner-Agent
Ich möchte Benutzerauthentifizierungsfunktionalität hinzufügen.
OAuth und JWT-Token-basierte Authentifizierung implementieren.

# Mit @implementer-Agent implementieren
Basierend auf dem obigen Plan die Authentifizierungs-Middleware implementieren.

# Prompt File verwenden
/generate-tests

# Mit @security-reviewer-Agent überprüfen
Führe ein Sicherheits-Review der implementierten Authentifizierungs-Middleware durch.

# MCP + K8s Skill nutzen
@agent Deployment-Konfiguration für den Authentifizierungsservice mit kubernetes-skill generieren.