3-Minute Guide: Make GitHub Copilot Generate High-Quality Code

#vibecoding #githubcopilot #programming #ai

GitHub Copilot allows you to customize its behavior by adding Markdown files to your .github folder in a Git repository. There are three types of files you can add:

Instructions – guide Copilot on your coding preferences
Prompts – reusable prompt templates
Chat Modes – customized modes for different tasks

1. Instructions

Instruction files let you provide Copilot with guidance and preferences.

Create a copilot-instructions.md file in the .github folder:

# Copilot Instructions

## General Guidelines

- Follow the instructions in the instructions folder whenever possible.
- File Changes: Only edit files when you have full context. Prefer reading large sections of code before making changes.
- ...

## Workflow

...

## Coding Standard

...

This file will automatically bring the instructions into your chat context.

You can also create path-specific instruction files (xxx.instructions.md) inside .github/instructions.

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

This ensures instructions only apply to the files you specify.

2. Prompts

Prompt files allow you to create reusable prompts.

Create an xxx.prompt.md file in .github/prompts:

---
mode: 'agent'
model: GPT-4o
tools: ['githubRepo', 'codebase']
description: 'Generate a new React form component'
---
Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.

Ask for the form name and fields if not provided.

Requirements:
* Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
* Use `react-hook-form` for form state management
* Always define TypeScript types for your form data
* Prefer *uncontrolled* components using `register`
* Use `defaultValues` to prevent unnecessary rerenders
* Use `yup` for validation
* Create reusable validation schemas in separate files
* Use TypeScript types to ensure type safety
* Customize UX-friendly validation rules

To use it, type / followed by the prompt file name in the chat window.

3. Chat Modes

Create an xxx.chatmode.md file in .github/chatmodes:

---
description: Generate an implementation plan for new features or refactoring existing code.
tools: ['codebase', 'fetch', 'findTestFiles', 'githubRepo', 'search', 'usages']
model: Claude Sonnet 4
---
# Planning mode instructions
You are in planning mode. Your task is to generate an implementation plan for a new feature or for refactoring existing code.
Do not make any code edits; just generate a plan.

The plan should include:

* **Overview** – brief description of the feature or task  
* **Requirements** – list of requirements  
* **Implementation Steps** – detailed step-by-step plan  
* **Testing** – tests to verify the implementation