// Code generated by Copilot
function getUserData(id) {  // ❌ No types despite TypeScript being required
  return fetch('/api/users/' + id)  // ❌ Template literals should be used
}

// Correct code following team conventions
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

Developer: "Create a React component"
GitHub Copilot: "Generated a class component"
Developer: "No, use a functional component, with TypeScript, and type definitions for props..."

# For the next component too...
Developer: "Create another component..."
GitHub Copilot: "Here's a class component..."
Developer: "I said functional component!"

Developer: "Help me implement user authentication"
Copilot: "I'll suggest a general implementation using JWT"
Developer: "We're using Auth0..."
Copilot: "Got it. Let me implement Auth0..."
Developer: "And we have an internal authentication flow..."

# Project-wide Coding Guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article)
- Prioritize modern JavaScript features (const/let, arrow functions, template literals)
- Always include TypeScript type definitions

## Naming Conventions
- Component names, interfaces, type aliases: PascalCase
- Variables, functions, methods: camelCase
- Private class members: underscore prefix (_)
- Constants: ALL_CAPS

## Code Quality
- Use meaningful variable and function names
- Add comments for complex logic
- Implement error handling for user inputs and API calls
- Prefer async/await over callbacks

## Security
- Never hardcode sensitive information
- Always validate input values
- Use placeholders to prevent SQL injection

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

# React Development Guidelines

- Prioritize functional components over class components
- Leverage custom hooks to separate state management logic
- Always define props with TypeScript interfaces
- Use Tailwind CSS utility classes for styling
- Memoize with React.memo when necessary

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

# Backend Development Guidelines

- Place controllers in `src/controllers/`
- Place service logic in `src/services/`
- Implement data access using the repository pattern
- Load environment variables from `.env`
- Centralize error handling with middleware
- Use Winston for logging

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

---
agent: 'agent'
model: 'GPT-4o'
tools: ['search/codebase']
description: 'Generate a React component'
---

Generate a React component with the following requirements:

Component name: ${input:componentName:Enter component name}
Props: ${input:props:Enter props comma-separated (e.g., title, onClick, isDisabled)}

## Generation Rules
- Implement in TypeScript
- Use functional components
- Define props with an interface
- Style with Tailwind CSS
- Manage state with React Hooks as needed
- Document props with JSDoc comments

---
agent: 'agent'
description: 'Generate a RESTful API route'
---

Generate a CRUD API for the following entity:

Entity name: ${input:entity:Entity name}
Fields: ${input:fields:Specify fields comma-separated}

## Implementation Requirements
- Use Express.js
- Implement in TypeScript
- Place router in `src/routes/`
- Place controller in `src/controllers/`
- Use express-validator for validation
- Implement proper error handling
- Use standard JSON response format

---
agent: 'agent'
tools: ['search/codebase']
description: 'Auto-generate unit tests'
---

Selected code: ${selection}

Generate comprehensive unit tests for the above code.

## Test Requirements
- Use Jest
- Maximize test coverage
- Cover both normal and error cases
- Consider edge cases
- Use mocks and stubs appropriately
- Write descriptive describe/it statements for each test case

---
agent: 'agent'
description: 'Conduct a code review'
---

Selected code: ${selection}

Conduct a code review from the following perspectives:

## Review Perspectives
1. **Security**: Presence of vulnerabilities
2. **Performance**: Optimization opportunities
3. **Code Quality**: Readability, maintainability
4. **Error Handling**: Proper exception handling
5. **Testability**: Ease of testing
6. **Coding Standards**: Compliance with project conventions

Provide improvement suggestions with specific code examples.

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

---
name: webapp-testing
description: Generate E2E tests using Playwright. Use this when you need to test user interactions.
---

# Web Application Testing with Playwright

This skill supports the generation of end-to-end (E2E) tests using Playwright.

## Test Generation Rules

1. **Selector Priority**: 
   - Prioritize `getByRole`
   - Next, `getByLabel`
   - As a last resort, `getByTestId`

2. **Test Structure**:
   - Each test should be independently executable
   - Implement proper setup/teardown
   - Write clear assertions

3. **Best Practices**:
   - Use Page Object Model pattern
   - Waits are executed implicitly
   - Take screenshots only on failure

## Template Example

Generate tests based on the following example-test.spec.ts.

```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();
});

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

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

test('user can add item to cart', async ({ page }) => {
  await page.goto('/products');
  
  const product = page.getByRole('article').filter({ hasText: 'Product Name' });
  await product.getByRole('button', { name: 'Add to Cart' }).click();
  
  await expect(page.getByRole('status', { name: 'Cart' })).toContainText('1 item');
});

test('user can complete checkout', async ({ page }) => {
  await page.goto('/cart');
  
  await page.getByRole('button', { name: 'Checkout' }).click();
  await page.getByRole('textbox', { name: 'Card Number' }).fill('4242424242424242');
  await page.getByRole('button', { name: 'Place Order' }).click();
  
  await expect(page.getByRole('heading')).toContainText('Order Confirmed');
});

---
name: github-actions-failure-debugging
description: Debug GitHub Actions workflow failures. Use when CI fails.
---

# GitHub Actions Failure Debugging

This skill provides an efficient process for debugging GitHub Actions workflow failures.

## Debugging Process

When debugging GitHub Actions workflows that failed on a Pull Request, follow these steps:

1. **Check Workflow Execution Status**
   - Use the `list_workflow_runs` tool to check recent executions and statuses for the PR

2. **Get Log Summary**
   - Use the `summarize_job_log_failures` tool to get an AI summary of failed job logs
   - Understand issues without overwhelming the context window

3. **Identify Root Cause**
   - Classify the issue type from error messages:
     * Dependency issues
     * Test failures
     * Build errors
     * Permission errors
     * Timeouts

4. **Propose Solutions**
   - Provide specific fixes for identified problems
   - Suggest workflow file modifications as needed

## Common Issues and Solutions

### Dependency Issues
- Node.js version mismatch
- Package installation failure
→ Check `package-lock.json`, clear cache

### Test Failures
- Missing environment variables
- Test data issues
→ Verify environment variable settings, validate test seed data

### Permission Errors
- Insufficient GITHUB_TOKEN scope
- Incorrect secrets configuration
→ Check permissions and secrets in repository settings

---
name: 'planner'
description: 'Agent specialized in pre-implementation planning'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# Implementation Planning Agent

You are an agent specialized in creating implementation plans. You don't write code, only create implementation plans.

## Responsibilities

1. **Requirements Analysis**: Analyze user requirements in detail
2. **Impact Investigation**: Identify files and components that need changes
3. **Task Decomposition**: Break down implementation into small tasks
4. **Risk Identification**: Identify potential issues

## Plan Format

### 1. Overview
[Purpose of implementation and expected results]

### 2. Impact Scope
- List of files requiring changes
- Affected components

### 3. Implementation Steps
1. [Details of Step 1]
   - Required changes
   - Notes
2. [Details of Step 2]
   ...

### 4. Testing Strategy
- Unit test targets
- E2E test scenarios

### 5. Risks and Countermeasures
| Risk | Countermeasure |
|------|----------------|
| ...  | ...            |

After plan approval, hand off to the implementation agent.

---
name: 'security-reviewer'
description: 'Agent that reviews code from a security perspective'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# Security Review Agent

You are an agent that detects code vulnerabilities as a security expert.

## Review Items

### 1. Authentication & Authorization
- [ ] Proper authentication mechanism implementation
- [ ] No authorization check leaks
- [ ] Session management safety

### 2. Input Validation
- [ ] Sanitize all user inputs
- [ ] SQL injection countermeasures
- [ ] XSS countermeasures
- [ ] CSRF countermeasures

### 3. Data Protection
- [ ] No hardcoded sensitive information
- [ ] Proper use of encryption
- [ ] No sensitive information output to logs

### 4. Dependencies
- [ ] Use of packages with known vulnerabilities
- [ ] Recommend updating to latest versions

### 5. API Security
- [ ] Rate limiting implementation
- [ ] Proper CORS configuration
- [ ] Safe API key management

## Report Format

For each detected issue, report:
- **Severity**: Critical / High / Medium / Low
- **Description**: What is the problem
- **Impact**: Impact if exploited
- **Fix Method**: Specific code examples

Critical/High vulnerabilities require immediate fixes.

---
name: 'frontend-dev'
description: 'Agent specialized in frontend development'
tools:
  - 'search/codebase'
  - 'terminal'
  - 'edit'
model: 'GPT-4o'
---

# Frontend Development Agent

You are an expert in frontend development using React/TypeScript/Tailwind CSS.

## Development Principles

### Component Design
- Prioritize reusability
- Follow single responsibility principle
- Keep props minimal
- Appropriate abstraction level

### State Management
- Manage local state with useState/useReducer
- Keep global state to minimum necessary
- Prevent unnecessary re-renders

### Styling
- Use Tailwind CSS utility classes
- Minimize custom CSS
- Implement responsive design mobile-first

### Performance
- Prevent unnecessary re-renders with React.memo
- Memoize callbacks with useCallback
- Cache heavy calculations with useMemo
- Optimize images (next/image, etc.)

## Implementation Flow

1. Clarify component responsibilities
2. Define props interface
3. Design state management
4. Implement JSX structure
5. Apply styling
6. Verify accessibility (ARIA attributes)
7. Implement responsive support

Always preview in browser after implementation to verify functionality.

{
  "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}"
      }
    }
  }
}

# Prompt Example

@agent Get recent issues from GitHub repository contoso/my-app,
and list them in order of priority.

# Copilot's Actions
1. Call GitHub MCP Server's `list_issues` tool
2. Sort retrieved issues by priority
3. Respond in markdown format

# Prompt Example

Retrieve all users from the database and
aggregate the count of active users.

# Copilot's Actions
1. Execute Database MCP Server's `query` tool
2. SQL: SELECT COUNT(*) FROM users WHERE is_active = true
3. Format and display results

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

// Tool definition
server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "fetch_user_data",
        description: "Fetch user data",
        inputSchema: {
          type: "object",
          properties: {
            userId: { type: "string", description: "User ID" },
          },
          required: ["userId"],
        },
      },
    ],
  };
});

// Tool execution
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "fetch_user_data") {
    const userId = request.params.arguments?.userId;
    // API request implementation
    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("Unknown tool");
});

// Start server
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          # Overall development standards
│   ├── instructions/
│   │   ├── backend.instructions.md     # Backend-specific
│   │   ├── frontend.instructions.md    # Frontend-specific
│   │   └── infra.instructions.md       # Infrastructure-specific
│   ├── agents/
│   │   ├── planner.md                   # Planning agent
│   │   ├── implementer.md              # Implementation 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 configuration

# Request to @planner agent
I want to add user authentication functionality.
Implement OAuth and JWT token-based authentication.

# Implement with @implementer agent
Based on the above plan, implement the authentication middleware.

# Use Prompt File
/generate-tests

# Verify with @security-reviewer agent
Conduct a security review of the implemented authentication middleware.

# Leverage MCP + K8s Skill
@agent Generate deployment configuration for the authentication service using 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"
    }
  ]
}

Week 1: Set up Custom Instructions
Week 2: Convert frequent tasks to Prompt Files
Week 3: Trial introduction of Custom Agents
Week 4: External integration with MCP servers

// Manage API keys with environment variables
{
  "chat.mcp.servers": {
    "secure-api": {
      "env": {
        "API_KEY": "${env:MY_API_KEY}"  // Don't hardcode
      }
    }
  }
}

# team-wiki/copilot-usage.md

## Custom Agent Usage

- `@planner`: Pre-implementation planning
- `@implementer`: Code implementation
- `@reviewer`: Code review
- `@deployer`: Deployment work

## Prompt Files Quick Reference

- `/create-component`: Generate React component
- `/add-api-route`: Add API endpoint
- `/generate-tests`: Auto-generate test code