Learn Customization Course

learn/customizations/1-why-customization-matter.md

@@ -0,0 +1,102 @@
+---
+ContentId: b1c2d3e4-f5a6-7b8c-9d0e-1f2a3b4c5d6e
+DateApproved: 04/17/2026
+MetaDescription: Learn why agent customization matters for getting the most out of GitHub Copilot in VS Code.
+MetaSocialImage: ../images/shared/agent-first-development-social.png
+---
+
+# Why agent customization matters
+
+<!-- IMAGE PLACEHOLDER - YouTube thumbnail embed showing the Customization UI -->
+<iframe width="560" height="315" src="https://www.youtube.com/embed/AZzCk-WGks4?si=pzfh99aDDFODSrG_" title="The Agent Customizations UI Nobody Knows About" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Most developers are using VS Code the same way: open chat, type something, and hope for a good result. Sometimes it works. Sometimes it doesn't.
+
+But here's the problem. They never configure it.
+
+VS Code is no longer just an editor. It's an environment where you can define how AI works across your entire workflow. And if you're not doing that, you're essentially starting from scratch every time.
+
+This guide covers what agent customization is, why it matters, and how to use the Customization UI in VS Code. 
+
+## Prerequisites
+Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in.
+- [Download VS Code](https://code.visualstudio.com/)
+- [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot)
+
+## What is agent Customization?
+
+Agent customization in VS Code Copilot Chat lets you define how the AI behaves, responds, and operates within your workflow.
+
+Instead of relying on one-off prompts, you can create reusable building blocks:
+
+- **Agents** - specialized modes for different tasks
+- **Skills** - domain-specific capabilities and workflows
+- **Instructions** - persistent rules and coding conventions
+- **Prompts** - reusable prompt templates
+- **Hooks** - automated actions triggered by events
+
+We'll cover the above in depth in later guides, but for now, just note that together these allow you to shape Copilot into a context-aware assistant that follows your standards, understands your project, and automates repetitive work.
+
+## Why customization matters
+
+You may ask yourself: Is customization really needed? Why not just jump into doing the work without it? Without customization, every interaction looks like this:
+
+- You restate context
+- You restate expectations
+- You restate how you want things done
+
+This leads to:
+
+- Inconsistent results
+- More effort
+- More trial and error
+
+Customization changes that. It allows you to:
+
+- Define behavior once
+- Reuse it across your workflow
+- Get consistent, higher-quality outputs
+
+Instead of prompting better, you're building a system that works for you.
+
+## The Customization UI
+
+VS Code provides a single place to manage all customization features.
+
+To get started:
+
+1. Open the Chat view (select the chat icon in the VS Code title bar).  
+2. Select the Configure (gear) icon in the Chat panel header.
+
+<!-- IMAGE PLACEHOLDER - Chat screenshot -->
+![Screenshot showing the Copilot Chat view with the Configure gear icon in the Chat panel header.](../images/customizations/chat-icon-gear.png)
+
+This opens the Customization UI.
+
+<!-- IMAGE PLACEHOLDER - Customization UI screenshot -->
+![Screenshot showing the Customization UI in VS Code.](../images/customizations/chat-customizations.png)
+From here, you can create and manage:
+
+- Agents
+- Skills
+- Custom instructions
+- Prompt files
+- Hooks
+
+Instead of searching across folders, everything is centralized for easier discovery and management.
+
+The Customization UI brings everything into one place. It makes it easier to define how your development environment behaves, not just what it generates. That's the shift.
+
+Instead of interacting with AI one prompt at a time, you're building a system that consistently works the way you want.
+
+## What's Next
+
+You now understand what customization is and how the Customization UI brings it all together.
+
+To learn more about each customization type and how to use them effectively, continue with the customization guides and videos in this series.
+
+
+## Learn more 
+- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) 
+- [Choosing an AI model for Copilot Chat](https://code.visualstudio.com/docs/copilot/language-models) 
+- [Community contributed customization features](https://github.com/github/awesome-copilot) 

learn/customizations/2-instructions.md

@@ -0,0 +1,190 @@
+---
+ContentId: d3e4f5a6-b7c8-9d0e-1f2a-3b4c5d6e7f8a
+DateApproved: 04/17/2026
+MetaDescription: Learn how to use instructions to customize GitHub Copilot behavior in VS Code.
+MetaSocialImage: ../images/shared/agent-first-development-social.png
+---
+
+# Introduction to custom instructions
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/dk2biPguo_E?si=O15sDX8Jf18pXZFr" title="Custom Instructions: How I Really Made Copilot Listen!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+You’ve probably been lied to about custom instructions.
+
+If you’re not using them properly, they’re far more powerful than most people think.
+
+This guide breaks down what custom instructions really are, how they’re meant to be used, and how they can transform your workflow in VS Code.
+
+## Prerequisites
+
+Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in.
+
+- [Download VS Code](https://code.visualstudio.com/)
+- [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot)
+
+## What are custom instructions?
+
+A [custom instruction](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) is like a rulebook for your AI.
+
+It’s a Markdown file where you define:
+
+- coding style
+- conventions
+- preferences
+
+Once defined, the AI automatically follows these rules in every interaction.
+
+Instead of repeating expectations in every prompt, you define them once and let the system enforce them.
+
+## Where to find them
+
+Custom instructions can easily be accessed inside the Agent Customizations UI.
+
+To access them:
+
+1. Open the Chat view (select the chat icon in the VS Code title bar).
+2. Select the Configure (gear) icon in the Chat panel header.
+3. Navigate to Instructions
+
+
+![chat icon gear](../images/shared/chat-icon-gear.png)
+
+![Customization UI](../images/customizations/ep-2-1-cust-ui.png)
+
+From here, you can view, edit, and manage all instruction files tied to your workflow.
+
+## Example: enforcing SOLID principles
+
+![SOLID principles](../images/customizations/ep-2-3-solid.png)
+
+One example of custom instructions is enforcing coding principles like SOLID.
+
+In this setup, an instruction file defines rules that ensure:
+
+- code follows SOLID principles
+- refactoring aligns with best practices
+- confirmations are shown when rules are applied
+
+When the AI is asked to refactor code, it automatically:
+
+- analyzes the code against SOLID principles
+- explains what changes are needed
+- applies those changes
+
+<img src="../images/customizations/ep-2-4-solid-applied.png" alt="SOLID applied" width="80%">
+
+The key benefit is consistency.
+
+You don’t need to remember to ask for best practices every time. The system enforces them automatically.
+
+## Why custom instructions matter
+
+Without custom instructions:
+
+- you repeat standards manually
+- outputs vary across interactions
+- enforcement happens after the fact
+
+With custom instructions:
+
+- rules are applied automatically
+- outputs stay consistent
+- quality is built in from the start
+
+Instead of correcting AI output later, you guide it upfront.
+
+## Creating custom instructions
+
+You can create custom instructions directly from the Customization UI.
+
+![Generate custom instructions](../images/customizations/ep-2-5-generate-cust-instruct.png)
+
+There are two approaches:
+
+### Manual creation
+
+You define:
+
+- the purpose
+- the rules
+- the expected behavior
+
+This gives you full control but requires more effort.
+
+### AI-assisted creation
+
+![Slash custom instructions](../images/customizations/ep-2-6-slash-cust-instruct.png)
+
+A faster approach is to let Copilot generate the instruction file.
+
+For example, you can ask it to:
+
+- **/create-instructions** to enforce accessibility standards
+- **/create-instructions** to apply specific design rules
+- **/create-instructions** to confirm when rules are used
+
+The AI creates the instruction file for you, which you can then review and refine.
+
+## Example: accessibility (WCAG)
+
+IMAGE PLACEHOLDER — WCAG instruction file contents
+
+In this example, a custom instruction ensures all UI code meets WCAG accessibility standards.
+
+Once created, the instruction:
+
+- applies accessibility rules automatically
+- confirms in chat when they are used
+
+Now, even if you ask for unrelated changes, like updating UI design, accessibility is still enforced.
+
+## Example: UI transformation with rules applied
+
+If you ask the AI to redesign your UI, for example:
+
+- making it look like an 80s arcade
+
+| Before                                                                                        | After                                                               |
+| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| <img src="../images/customizations/ep-2-7-calc-norm.png" alt="Calculator normal" width="85%"> | ![Calculator retro](../images/customizations/ep-2-8-calc-retro.png) |
+
+The AI will:
+
+- apply your design request
+- enforce accessibility rules at the same time
+
+This shows how instructions persist across tasks, not just specific prompts.
+
+## Individual vs team impact
+
+Custom instructions are powerful for individuals, but even more impactful for teams.
+
+Across a team, they ensure:
+
+- consistent naming conventions
+- consistent formatting
+- consistent architecture
+
+Instead of reviewing and correcting inconsistencies later, everything is aligned from the start.
+
+## The bigger shift
+
+Custom instructions represent a shift from:
+
+**reactive prompting → proactive control**
+
+You’re no longer adjusting outputs after they’re generated.
+
+You’re defining how the system behaves before generation even happens.
+
+## What’s next
+
+Custom instructions give you control over behavior.
+
+If you want to go further and define reusable capabilities, the next step is exploring agent skills.
+
+## Learn more
+
+- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions)
+- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview)
+- [Community contributed customization features](https://github.com/github/awesome-copilot)