diff --git a/learn/customizations/1-why-customization-matter.md b/learn/customizations/1-why-customization-matter.md new file mode 100644 index 0000000000..8b53634745 --- /dev/null +++ b/learn/customizations/1-why-customization-matter.md @@ -0,0 +1,110 @@ +--- +ContentId: b1c2d3e4-f5a6-7b8c-9d0e-1f2a3b4c5d6e +DateApproved: 04/17/2026 +MetaDescription: Learn why GitHub Copilot agent customization in VS Code matters, and how to get started with the Agent Customizations view for more consistent AI results. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Why agent customization matters + + + + +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 Agent Customizations view 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 Agent Customizations + +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 view header. + + + +![Screenshot of the Copilot Chat view with the Configure gear icon in the Chat view header](../images/customizations/chat-icon-gear.png) + +This opens the Agent Customizations view. + + + +![Screenshot of the Agent Customizations view in VS Code showing agents, skills, instructions, prompts, and hooks](../images/customizations/agent-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 Agent Customizations view 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 Agent Customizations view 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) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +- [Use prompt files in VS Code](https://code.visualstudio.com/docs/copilot/customization/prompt-files) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/2-instructions.md b/learn/customizations/2-instructions.md new file mode 100644 index 0000000000..2fff364544 --- /dev/null +++ b/learn/customizations/2-instructions.md @@ -0,0 +1,189 @@ +--- +ContentId: d3e4f5a6-b7c8-9d0e-1f2a-3b4c5d6e7f8a +DateApproved: 04/17/2026 +MetaDescription: Learn how to create and use custom instructions in VS Code to guide GitHub Copilot behavior, enforce coding standards, and get consistent chat results. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Introduction to custom instructions + + + +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 view. + +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 view header. +3. Navigate to Instructions + +![Screenshot of the chat icon and gear icon in the VS Code title bar](../images/shared/chat-icon-gear.png) + +![Screenshot of the Agent Customizations view showing the Instructions section](../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 + +![Screenshot of a custom instruction file enforcing 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 + +SOLID applied + +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 Agent Customizations view. + +![Screenshot of the Agent Customizations view showing the option to 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 + +![Screenshot of the Copilot Chat view showing the /create-instructions slash command](../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 | +| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | +| Screenshot of the calculator app before applying the arcade theme | ![Screenshot of the calculator app after applying the 80s arcade theme](../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 + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/3-skills.md b/learn/customizations/3-skills.md new file mode 100644 index 0000000000..639d08cd5a --- /dev/null +++ b/learn/customizations/3-skills.md @@ -0,0 +1,127 @@ +--- +ContentId: e4f5a6b7-c8d9-0e1f-2a3b-4c5d6e7f8a9b +DateApproved: 04/17/2026 +MetaDescription: Learn how to create and use agent skills in VS Code to automate workflows, extend GitHub Copilot capabilities, and reduce repetitive tasks. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Introduction to agent skills + + + +Most developers are either using agent skills wrong… or not at all. + +And that’s a problem, because skills are one of the most powerful ways to extend how AI works in your workflow. + +This guide breaks down what agent skills are, how they work, and how to use them effectively 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 agent skills? + +[Agent skills](https://code.visualstudio.com/docs/copilot/customization/agent-skills) are structured bundles that include instructions, scripts, and supporting resources. Instead of relying on one-off prompts, skills package everything needed to perform a task into a reusable system. + +When relevant, GitHub Copilot automatically loads these skills to execute specialized workflows. They’re also designed as an open standard, meaning they can work across multiple AI environments, not just VS Code. + +At a high level, a skill typically includes: + +- a description of what the skill does +- rules for how it should behave +- references to related workflows or dependencies + +![Diagram of the agent skill file structure showing description, rules, and dependencies](../images/customizations/ep-3-0-skill-structure.png) + +## Where to find them + +![Screenshot of the chat icon and gear icon in the VS Code title bar](../images/shared/chat-icon-gear.png) + +Agent skills live in the Agent Customizations view alongside prompts and instructions. You can access them by opening Copilot Chat, selecting the gear icon, and navigating to the Skills section. + +![Screenshot of the Agent Customizations view showing the Skills section with built-in and custom skills](../images/customizations/ep-3-2-skills-cust-ui.png) + +From here, you’ll see built-in skills, extension-provided skills, and any custom skills you create, all in one centralized place. + +## Example: creating a prompt (using a skill) + +![Screenshot of Copilot Chat showing the result of the /create-skill command](../images/customizations/ep-3-3-create-skill.png) + +When you run a command like `/create`, you’re not just issuing a prompt — you’re activating a skill. + +That skill handles the entire workflow for you. Instead of manually thinking through each step, it: + +- interprets your request +- asks clarifying questions when needed +- generates the final output in the correct format + +This is a great example of how skills operate behind the scenes to simplify complex workflows. + +## Why agent skills matter + +Without skills, you’re responsible for guiding every step manually. That often means repeating logic, making decisions each time, and dealing with inconsistent results. + +With skills, that burden shifts to the system. You define how something should work once, and it runs consistently every time. + +The difference shows up in your workflow: + +- less repetition of instructions +- more consistent outputs +- faster execution of multi-step tasks + +## Creating a custom skill + +You can create your own skills to automate workflows specific to your project. + +For example, you might want a skill that updates documentation automatically whenever a new feature is added. Instead of doing this manually, you define the behavior once and let the system handle it moving forward. + +Copilot can guide this process by generating the initial version of the skill, which you can then review and refine. + +## Example: auto-updating a README + +`/create-skill That will update the readme file whenever a feature is added to my project.` + +In this example, a custom skill is created to update the README whenever a new feature is added. + +Once configured, the skill can: + +- detect when a feature is introduced +- update the README with relevant details +- optionally confirm the update in chat + +This turns documentation into something that stays up to date automatically. + +Imagine adding a feature like a sound effect when switching between dark mode and light mode. + +Instead of manually updating documentation, the skill handles it for you. + +After the feature is added, the README reflects the change automatically. This keeps your project accurate without interrupting your workflow. + +## Refining and improving skills + +Skills aren’t static. Over time, you can improve them by adjusting behavior, adding confirmations, or refining how they execute tasks. + +This allows your workflow automation to evolve alongside your projects. + +Agent skills represent a shift from: + +**manual workflows → automated systems** + +Instead of handling tasks step-by-step, you define reusable capabilities that execute entire workflows for you. + +## What’s next + +Agent skills help you automate workflows. + +If you want to go further and define complete systems with roles and responsibilities, the next step is exploring custom agents. + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/4-custom-agent.md b/learn/customizations/4-custom-agent.md new file mode 100644 index 0000000000..df146e7369 --- /dev/null +++ b/learn/customizations/4-custom-agent.md @@ -0,0 +1,151 @@ +--- +ContentId: f5a6b7c8-d9e0-1f2a-3b4c-5d6e7f8a9b0c +DateApproved: 04/17/2026 +MetaDescription: Learn how to create and use custom agents with GitHub Copilot to define AI roles, maintain consistency, and build specialized workflows in VS Code. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Introduction to custom agents + + + +Are custom agents really that powerful? + +Short answer: yes, but only if you understand what they actually are and how to use them properly. + +This guide breaks down what custom agents are, how they work, and how to use them in a real workflow by building one from scratch. + +## 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 agents? + +[Custom agents](https://code.visualstudio.com/docs/copilot/customization/custom-agents) allow you to configure AI to take on specific roles. + +Instead of a generic assistant, you define a persona with a clear purpose, behavior, and scope. This could be something like a security reviewer, planner, or solution architect. + +Each agent can have its own: + +- instructions and behavior +- access to tools +- understanding of your project + +This transforms the AI from a general assistant into a role-specific collaborator. + +## Where to find them + +![Screenshot of the chat icon and gear icon in the VS Code title bar](../images/customizations/chat-icon-gear.png) +Custom agents are easily located in the Agent Customizations view under the Agents section which you can get to by opening chat and selecting its gear. + +![Screenshot of the Agent Customizations view showing the Agents section with built-in and custom agents](../images/customizations/ep-4-1-cust-agents.png) + +From here, you can view built-in agents as well as any custom agents you’ve created. Each one represents a specialized role that you can activate when needed. + +## Example: security reviewer agent + +IMAGE PLACEHOLDER — Agent selected via dropdown or @ mention + +One example is a custom agent designed for security reviews. + +When activated, this agent focuses specifically on identifying vulnerabilities, auditing for secrets, and analyzing potential risks in your code. + +Instead of giving general feedback, it structures its output around security concerns and categorizes findings by severity. + +IMAGE PLACEHOLDER — Chat output showing categorized security findings + +This is a clear example of how an agent changes the behavior of the AI based on its defined role. + +## Why custom agents matter + +Without custom agents, you’re relying on a single, general-purpose assistant for everything. + +With custom agents, you can switch between specialized roles depending on the task. This leads to: + +- more focused and relevant outputs +- better alignment with specific tasks +- clearer structure in responses + +Instead of constantly re-explaining context, you select the right agent and let it handle the task. + +## Creating a custom agent + +One of the easiest ways to create a custom agent is to ask Copilot for help. + +For example, you can describe your project and ask it to suggest an agent tailored to your needs. It can generate: + +- the agent definition +- its responsibilities +- why it’s useful + +![Screenshot of Copilot Chat showing a prompt asking Copilot to suggest a custom agent for a project](../images/customizations/ep-4-2-ask-copilot-for-cust-agent.png) + +This approach helps you think beyond just writing code and start designing workflows. + +## Example: arcade app builder agent + +![Screenshot of the arcade app builder custom agent definition in VS Code](../images/customizations/ep-4-3-arcade-agent.png) + +In this example, Copilot suggests an agent designed specifically for an arcade-themed calculator project. + +The agent is built with: + +- awareness of the project’s architecture +- knowledge of UI themes and styling +- consistency with coding patterns + +It’s not just generating code. It’s applying context from the entire project. + +## Using the agent + +![Screenshot of the Copilot Chat view showing the arcade app builder agent selected from the dropdown](../images/customizations/ep-4-4-select-arcade-agent.png) + +Once created, using a custom agent is simple. You select it from the dropdown or reference it directly in chat. + +When you ask it to build something, like a new calculator app, it applies all of its predefined rules and context automatically. + +## Example: building a new app + +![Screenshot of the arcade-themed tip calculator app generated by the custom agent](../images/customizations/ep-4-5-arcade-tip-calc.png) + +In this example, the agent is used to create a tip calculator. + +What’s interesting is that the new app inherits characteristics from the original project, including: + +- visual style and theme +- sound effects +- structural patterns + +The agent ensures consistency without needing to restate requirements. + +## Why this matters + +Custom agents go beyond simple automation. + +They allow you to define reusable roles that carry context, behavior, and intent across tasks. This means you’re no longer starting from scratch each time. + +Instead, you’re working with systems that understand your project and apply that understanding consistently. + +Custom agents represent a shift from: + +**single assistant → team of specialists** + +Instead of one AI doing everything, you create multiple agents, each optimized for a specific role. + +## What’s next + +Custom agents give you structured, role-based control over AI. + +If you want to take it even further and trigger behavior automatically without prompting, the next step is exploring hooks. + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/5-hooks.md b/learn/customizations/5-hooks.md new file mode 100644 index 0000000000..2d7afed5aa --- /dev/null +++ b/learn/customizations/5-hooks.md @@ -0,0 +1,125 @@ +--- +ContentId: a6b7c8d9-e0f1-2a3b-4c5d-6e7f8a9b0c1d +DateApproved: 04/17/2026 +MetaDescription: Learn how to use hooks in VS Code to automate workflows, enforce standards, and trigger actions based on lifecycle events in GitHub Copilot. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Introduction to hooks + + + +It seems like nobody talks enough about hooks. + +But they might be one of the most powerful features in VS Code right now. + +This guide breaks down what hooks are, how they work, and how to use them to automate your workflow. + +## 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 hooks? + +[Hooks](https://code.visualstudio.com/docs/copilot/customization/hooks) allow you to execute custom shell commands at specific lifecycle points during an agent session. + +Instead of manually running tasks, hooks let you define actions that happen automatically in response to events. This makes them ideal for automation, validation, and enforcing consistency across your workflow. + +At a high level, hooks are commonly used to: + +- automate repetitive tasks +- enforce security or coding standards +- validate changes before or after execution +- integrate with external tools + +## Lifecycle events (where hooks run) + +VS Code supports eight hook events that fire at specific points during an agent session: + +| Hook Event | When It Fires | Common Use Cases | +| ------------------ | ---------------------------------------------- | --------------------------------------------------------------- | +| `SessionStart` | User submits the first prompt of a new session | Initialize resources, log session start, validate project state | +| `UserPromptSubmit` | User submits a prompt | Audit user requests, inject system context | +| `PreToolUse` | Before agent invokes any tool | Block dangerous operations, require approval, modify tool input | +| `PostToolUse` | After tool completes successfully | Run formatters, log results, trigger follow-up actions | +| `PreCompact` | Before conversation context is compacted | Export important context, save state before truncation | +| `SubagentStart` | Subagent is spawned | Track nested agent usage, initialize subagent resources | +| `SubagentStop` | Subagent completes | Aggregate results, cleanup subagent resources | +| `Stop` | Agent session ends | Generate reports, cleanup resources, send notifications | + +Hooks rely on lifecycle events, which determine when they should run. + +These events act as trigger points during an agent session. For example, a hook might run when a session starts, when a prompt is submitted, or after a tool completes its work. + +Choosing the right lifecycle event is critical, because it defines when your automation actually happens. + +## Example: auto-formatting with Prettier + +One of the most practical examples of hooks is automatically formatting code. + +In this case, a hook is configured to run Prettier after every file edit. Instead of manually formatting files, the system ensures that everything stays consistent automatically. + +The key idea is simple: once the action is defined, it runs every time without needing to ask. + +## Creating a hook + +To create a hook, you can use the Agent Customizations view and generate one directly. + +For example, you might create a hook that: + +- runs Prettier automatically +- triggers after a tool completes (post tool use) +- executes via a shell script + +Copilot can generate the hook for you based on your description, including the necessary configuration and commands. + +## Example: hook in action + +![Screenshot of a hook configuration that runs Prettier automatically after a tool completes](../images/customizations/ep-5-1-prettier-hook.png) + +After creating the hook, you may need to reload your environment to activate it. Once it's active, it runs automatically based on the lifecycle event you defined. + +![Screenshot of a README file before the Prettier hook formats it](../images/customizations/ep-5-2-before-hook.png) + +When you make a change, like updating text in a README file, the hook is triggered in the background. + +![Screenshot of the README file after the Prettier hook automatically formats it](../images/customizations/ep-5-3-after-hook.png) + +The result is immediate: the file is updated and formatted without any additional input. The hook quietly handles the work for you. + +## Why hooks matter + +Hooks take automation to another level. + +Unlike prompts, instructions, or even skills, hooks don’t require you to explicitly trigger them. They run automatically when the right conditions are met. + +This changes how you work: + +- tasks happen in the background +- consistency is enforced automatically +- workflows become seamless + +Hooks represent a shift from: + +**manual execution → event-driven automation** + +Instead of asking the AI to do something, you define when it should happen and let the system take care of it. + +## What’s next + +Hooks help automate workflows without requiring input. + +If you want to understand how hooks, agents, skills, and instructions all fit together, the next step is comparing them as a complete system. + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use prompt files in VS Code](https://code.visualstudio.com/docs/copilot/customization/prompt-files) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/6-prompt-files.md b/learn/customizations/6-prompt-files.md new file mode 100644 index 0000000000..c129265b32 --- /dev/null +++ b/learn/customizations/6-prompt-files.md @@ -0,0 +1,151 @@ +--- +ContentId: c2d3e4f5-a6b7-8c9d-0e1f-2a3b4c5d6e7f +DateApproved: 04/17/2026 +MetaDescription: Learn how to create and use reusable prompt files in VS Code to standardize workflows, reduce repetition, and customize GitHub Copilot behavior. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Introduction to prompt files + + + +If you’re constantly repeating prompts, you’re doing too much. + +Most developers still rely on typing instructions over and over in chat. It works sometimes, but it’s inefficient and inconsistent. There’s a better way to handle repeatable workflows. + +This guide covers what prompt files are, why they matter, and how to use them effectively 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 prompt files? + +[Prompt files](https://code.visualstudio.com/docs/copilot/customization/prompt-files) are reusable Markdown files that define instructions or context for chat sessions. + +Instead of rewriting the same prompt repeatedly, you create it once and reference it whenever needed. This allows you to standardize workflows across projects or even across teams. + +They act as reusable building blocks for common tasks you perform during development. + +## Why prompt files matter + +Without prompt files, every interaction looks the same: + +- You restate the task +- You restate the context +- You restate how you want it done + +This leads to: + +- repetitive work +- inconsistent outputs +- slower workflows + +Prompt files solve this by letting you define instructions once and reuse them whenever needed. + +Instead of prompting better, you’re building a system that works for you. + +## Example: quiz your codebase + +One practical use of prompt files is learning or reviewing code. + +In this example, a prompt file was created to quiz you on the currently open files in your project. + +![Prompt files section in the Agent Customizations view in VS Code](../images/customizations/agent-customizations.png) +This prompt file: + +- analyzes the current code context +- generates multiple choice questions +- helps reinforce understanding of unfamiliar code + +Once created, you can trigger it directly from chat using `/quiz-open-files`. + +![Screenshot of the Copilot Chat view showing the /quiz-open-files prompt file triggered from chat](../images/customizations/ep-6-2-prompt-file-from-chat.png) + +Instead of manually writing a long prompt every time, the logic is already defined and ready to reuse. + +## When prompt files make sense + +Prompt files are most useful when: + +- you repeat the same task multiple times +- the prompt contains detailed instructions +- you want consistent results across files or projects + +If something is only done once, a prompt file may not be necessary. + +But for repeated workflows, they become extremely valuable. + +## Creating a prompt file + +You can create prompt files directly from the chat interface. + +![Screenshot of Copilot Chat showing the command to create a new prompt file](../images/customizations/ep-6-3-prompt-to-create.png) + +Start by triggering the create command and defining your intent. + +For example, you might create a prompt to: + +- simplify and reduce bloated code +- explain what changes were made +- apply only to open files + +Once created, the prompt file is stored and can be reused instantly. + +You can review and modify it at any time from the Agent Customizations view. + +## Workspace vs user-level prompts + +By default, prompt files may be created at the workspace level. + +This means they are tied to a specific project. + +If you want to reuse them across multiple projects, move them to the user level instead. + +This allows you to build a personal library of reusable AI workflows. + +![Screenshot of the prompt file scope selection showing workspace and user-level options](../images/customizations/ep-6-4-workspace-v-user.png) + +## Example: refactoring code + +A prompt file can also be used to improve code quality. + +For example: + +- reduce bloated code +- simplify logic +- explain optimizations + +When executed, the AI not only updates the code but also explains what was changed and why. + +This makes it easier to evaluate different models and approaches based on efficiency and clarity. + +## The bigger shift + +The real value of prompt files is not just convenience. + +It’s the shift from: + +**one-off prompting → reusable systems** + +Instead of rewriting instructions every time, you define them once and reuse them across your workflow. + +This leads to faster development and more consistent AI behavior. + +## What's next + +Prompt files are just one part of the customization system. + +If you want even more control over how AI behaves, the next step is exploring custom instructions. + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use prompt files in VS Code](https://code.visualstudio.com/docs/copilot/customization/prompt-files) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/7-customization-features-explained.md b/learn/customizations/7-customization-features-explained.md new file mode 100644 index 0000000000..851acae890 --- /dev/null +++ b/learn/customizations/7-customization-features-explained.md @@ -0,0 +1,122 @@ +--- +ContentId: d3e4f5a6-b7c8-9d0e-1f2a-3b4c5d6e7f8a +DateApproved: 04/17/2026 +MetaDescription: Understand the differences between custom instructions, agent skills, hooks, custom agents, and prompt files in GitHub Copilot using interactive learning with Copilot. +--- + +# Understanding VS Code customization features together + + + +There are quite a few customization options in VS Code. + +And it’s easy to get them confused. + +This guide breaks down how features like custom instructions, prompt files, agent skills, custom agents, and hooks all fit together — and shows how you can use Copilot itself to understand the differences. + +## Why this gets confusing + +All of these features overlap in some way. + +They all influence how AI behaves, but they operate at different levels. Without a clear mental model, it’s easy to mix them up or use the wrong one for a task. + +Instead of trying to memorize definitions, a better approach is to explore them interactively. + +## Using Copilot to learn the differences + +One of the most effective ways to understand these features is to ask Copilot directly. + +For example, you can provide a list of features and ask for a short explanation of each. Copilot will generate concise summaries that help you quickly understand what each one does. + +![Screenshot of Copilot Chat explaining the differences between VS Code customization features](../images/customizations/ep-7-1-cust-feature-explained-by-copilot.png) + +This gives you a fast, high-level overview without needing to read through multiple docs. + +## Building a comparison chart + +To go deeper, you can ask Copilot to generate a comparison chart. + +![Screenshot of Copilot Chat generating a comparison chart of VS Code customization features](../images/customizations/ep-7-2-comparisons-by-copilot.png) + +This chart can include: + +- what each feature is +- when to use it +- file types or formats +- scope (user, workspace, etc.) + +This turns abstract concepts into something you can scan and reference quickly. + +## Key differences at a glance + +Copilot can also highlight the differences between commonly confused features. + +For example: + +- Instructions vs Prompt Files +- Instructions vs Custom Agents +- Custom Agents vs Skills +- Hooks vs everything else + +![Screenshot of Copilot Chat highlighting key differences between custom instructions, agents, skills, and hooks](../images/customizations/ep-7-3-key-differences-by-copilot.png) + +These comparisons help clarify how each feature behaves and when it should be used. + +## Learning through scenarios (quizzes) + +Another powerful approach is to quiz yourself. + +You can ask Copilot to generate scenario-based questions where you choose the correct feature for a given situation. + +![Screenshot of Copilot Chat generating scenario-based quiz questions about VS Code customization features](../images/customizations/ep-7-4-quiz-by-copilot.png) + +For example, if you want AI to always follow a specific coding style, the correct answer would be custom instructions. + +This method reinforces understanding much faster than passive reading. + +## Creating a reference you can reuse + +Once you have summaries, comparisons, and examples, you can take it one step further and consolidate everything into a single reference. + +For example, you can ask Copilot to generate an HTML file that includes: + +- feature explanations +- comparison charts +- key differences +- quizzes + +This gives you a reusable resource you can revisit anytime. + +## Why this approach matters + +Instead of switching between documentation pages, you’re using Copilot as an active learning tool. + +This approach helps you: + +- understand concepts faster +- see how features relate to each other +- build your own reference materials + +It turns learning into something interactive instead of passive. + +This represents a shift from: + +**reading documentation → learning with AI** + +You’re not just consuming information. You’re generating explanations, comparisons, and examples tailored to your understanding. + +## What’s next + +Now that you understand how these features fit together, the next step is applying them in a real project. + +There’s no better way to reinforce this than building something and using each feature in context. + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +- [Use prompt files in VS Code](https://code.visualstudio.com/docs/copilot/customization/prompt-files) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/customizations/8-demo.md b/learn/customizations/8-demo.md new file mode 100644 index 0000000000..954b17423f --- /dev/null +++ b/learn/customizations/8-demo.md @@ -0,0 +1,189 @@ +--- +ContentId: b7c8d9e0-f1a2-3b4c-5d6e-7f8a9b0c1d2e +DateApproved: 04/17/2026 +MetaDescription: A hands-on demo of GitHub Copilot customization features: custom agents, skills, instructions, prompt files, and hooks working together in a real project. +MetaSocialImage: ../images/shared/agent-first-development-social.png +--- + +# Customization features in practice + + + +You may have seen quite a few videos about customization features in VS Code. + +Things like prompt files, custom instructions, agent skills, custom agents, and hooks can make sense individually. But the best way to truly understand them is to see them working together in a real project. + +In this guide, we’ll build an app from scratch and use multiple customization features throughout the workflow. + +## 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) + +## The project: Repo Analyzer + +The app we’re building is called **Repo Analyzer**. + +Its purpose is simple: take in the URL of a GitHub repository, analyze the codebase, and grade the quality of the project on a scale from 1 to 10. + +It also provides recommendations to improve the score, helping developers understand what changes could make the project stronger. + +## The features working together + +This project uses several customization features simultaneously. + +Each one handles a specific part of the workflow: + +- **Custom Agent** → Applies the arcade-themed visual style +- **Agent Skill** → Automatically updates the README when features change +- **Custom Instructions** → Ensures SOLID principles and accessibility standards are applied +- **Prompt File** → Simplifies bloated code in open files +- **Hook** → Automatically formats files after modifications + +This saves time because you don’t need to repeat these instructions manually. + +## Building the app with a custom agent + +![Screenshot of the arcade app builder custom agent selected in Copilot Chat](../images/customizations/ep-8-2-arcade-agent.png) + +To start, the **Arcade App Builder** custom agent is selected. + +This agent already understands the design language and architectural style of the project. When asked to create the Repo Analyzer app, it automatically applies the arcade-inspired theme. + +> **Prompt** +> Can you go ahead and create an app that will take in the URL from a GitHub repo and analyze the code, grading the quality from 1 to 10 and giving recommendations to improve the score. + +![Screenshot of the initial Repo Analyzer app generated by the custom agent](../images/customizations/ep-8-3-repo-analyzer-initial-view.png) + +The result is a working first version of the app, complete with styling and validation logic. + +## Testing the app + +Once the app is generated, it can be tested against real repositories. + +![Screenshot of the Repo Analyzer app showing a code quality score and recommendations for a repository](../images/customizations/ep-8-1-repo-analyzer.png) + +For example, entering the URL of a GitHub project returns: + +- an overall score +- specific recommendations +- documentation or structural improvements + +This makes the app useful immediately, even in its first iteration. + +## Testing the README skill + +Next, the **Update README** skill is tested. + +When the app is created, we can add a readme. + +> **Prompt** +> Create a README for this project. + +Later, if features are added or removed, the skill updates the README to reflect those changes. + +For example, you can confirm the dark/light mode feature is mentioned in the README. After removing this feature causes the README to update automatically so it no longer references that functionality. + +> **Prompt** +> Remove the dark mode / light mode feature from the app. + +## Verifying custom instructions + +![Screenshot of Copilot Chat confirming that SOLID principles were applied during code generation](../images/customizations/ep-8-4-solid.png) + +During development, custom instructions are applied automatically. + +Without being explicitly prompted, Copilot confirms that it followed: + +- SOLID principles + +This ensures the app is being built according to the standards you’ve already defined. + +## Testing hooks + +Hooks run in the background when files are modified. + +For example, after changing the README title, the hook automatically formats the file without any extra steps. + +> **Prompt** +> Can you go ahead and modify the README so that the name is not just Repo Analyzer, but it says Fantastic Repo Analyzer. + +This keeps files clean and consistent as changes are made. + +## Testing prompt files + +Finally, the **Simplify Code** prompt file is used. + +This prompt analyzes the currently open file and looks for: + +- bloated or verbose code +- dead code +- opportunities for simplification + +It then explains exactly what changes were made and why. + +> **Prompt** +> Simplify code for open files. + +This is especially useful because code simplification is something you may do repeatedly across multiple files. + +## Why this matters + +This demo shows the full picture. + +Instead of manually asking Copilot to follow standards, update docs, format files, or simplify code every time, these systems work together automatically. + +The result is: + +- faster workflows +- less repetitive prompting +- more consistent outputs + +This represents a shift from: + +**single prompts → integrated workflows** + +You’re no longer using AI one request at a time. + +You’re building an environment where multiple AI systems collaborate automatically during development. + +## Your challenge + +Now it’s your turn. + +Build the **Repo Analyzer** app we created in this guide, leverage the customization features we used (or create your own\!), and then extend it. + +Ideas: + +- Add support for private repositories using authentication +- Add deeper analysis for code quality, security, or performance issues +- Build an analytics dashboard to compare multiple repositories side by side +- Add AI-generated recommendations with code examples for improving scores + +Use the customization features together as part of your workflow: + +- Use a **custom agent** to maintain a consistent design or architecture +- Use **custom instructions** to enforce coding standards like SOLID or accessibility +- Use **skills** to automate repetitive tasks like updating documentation +- Use **hooks** to automatically format or validate files in the background +- Use **prompt files** for tasks you find yourself repeating often + +When you finish, review how each customization feature helped reduce repetitive work and improved consistency across your project. + +The more you combine these systems together, the faster and more consistent your workflow becomes. + +**BONUS:** If you’d like to share what you’ve learned, provide a GitHub repo link to your project in the comments and include a readme (in your project) detailing what you did. We’d love to see it. + +Happy coding\! + +## Learn more + +- [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/overview) +- [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +- [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Use custom instructions in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Use prompt files in VS Code](https://code.visualstudio.com/docs/copilot/customization/prompt-files) +- [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +- [Community contributed customization features](https://github.com/github/awesome-copilot) diff --git a/learn/images/customizations/OLD-ep-3-2-chat-icon-gear.png b/learn/images/customizations/OLD-ep-3-2-chat-icon-gear.png new file mode 100644 index 0000000000..a615d87073 --- /dev/null +++ b/learn/images/customizations/OLD-ep-3-2-chat-icon-gear.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c885f568ee759fe3f8896fca50755364b8e87e6604297f2a81ecdcb795148d43 +size 40939 diff --git a/learn/images/customizations/OLD_ep-4-1-chat-icon-gear.png b/learn/images/customizations/OLD_ep-4-1-chat-icon-gear.png new file mode 100644 index 0000000000..a615d87073 --- /dev/null +++ b/learn/images/customizations/OLD_ep-4-1-chat-icon-gear.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c885f568ee759fe3f8896fca50755364b8e87e6604297f2a81ecdcb795148d43 +size 40939 diff --git a/learn/images/customizations/agent-customizations.png b/learn/images/customizations/agent-customizations.png new file mode 100644 index 0000000000..65f36108a6 --- /dev/null +++ b/learn/images/customizations/agent-customizations.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5bf9e5c6bb099b046056e72aab7afe6a17beeac1051fed2524f5cbfc40e86e29 +size 130596 diff --git a/learn/images/customizations/chat-customizations-old.png b/learn/images/customizations/chat-customizations-old.png new file mode 100644 index 0000000000..a1ae13e1d9 --- /dev/null +++ b/learn/images/customizations/chat-customizations-old.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c2aa247a6da96c7c9043dba122af1f4098ce572278f08bde06617c2263c6af9a +size 382443 diff --git a/learn/images/customizations/chat-icon-gear.png b/learn/images/customizations/chat-icon-gear.png new file mode 100644 index 0000000000..a615d87073 --- /dev/null +++ b/learn/images/customizations/chat-icon-gear.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c885f568ee759fe3f8896fca50755364b8e87e6604297f2a81ecdcb795148d43 +size 40939 diff --git a/learn/images/customizations/ep-2-1-cust-ui.png b/learn/images/customizations/ep-2-1-cust-ui.png new file mode 100644 index 0000000000..774c63f6da --- /dev/null +++ b/learn/images/customizations/ep-2-1-cust-ui.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a311acceedb0de8bebbd477452ac66d208802aa5f3af342b2f5524c48657c0c +size 93876 diff --git a/learn/images/customizations/ep-2-3-solid.png b/learn/images/customizations/ep-2-3-solid.png new file mode 100644 index 0000000000..f208df937a --- /dev/null +++ b/learn/images/customizations/ep-2-3-solid.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0be1177fe14f6edea77f1c5fe248e8087e9e5812b32fdc7ca4d2d6cd6ca9b54f +size 177007 diff --git a/learn/images/customizations/ep-2-4-solid-applied.png b/learn/images/customizations/ep-2-4-solid-applied.png new file mode 100644 index 0000000000..d665f83d49 --- /dev/null +++ b/learn/images/customizations/ep-2-4-solid-applied.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ab8afa9ddc05cd2e229680e50cd1d9790f9c7aad38fcee06f48f9d0d6d6366a3 +size 537533 diff --git a/learn/images/customizations/ep-2-5-generate-cust-instruct.png b/learn/images/customizations/ep-2-5-generate-cust-instruct.png new file mode 100644 index 0000000000..f06c17b29a --- /dev/null +++ b/learn/images/customizations/ep-2-5-generate-cust-instruct.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f32056cd4a910fb014f2cf46d050c496dc74b7a1774f9579b40cd522ae6c2eb +size 62341 diff --git a/learn/images/customizations/ep-2-6-slash-cust-instruct.png b/learn/images/customizations/ep-2-6-slash-cust-instruct.png new file mode 100644 index 0000000000..d2ea5be821 --- /dev/null +++ b/learn/images/customizations/ep-2-6-slash-cust-instruct.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:22c6ce337f142538efbd6899c36bee139ffede076f1e705b192a003264d6d1e9 +size 67837 diff --git a/learn/images/customizations/ep-2-7-calc-norm.png b/learn/images/customizations/ep-2-7-calc-norm.png new file mode 100644 index 0000000000..7ca68c4680 --- /dev/null +++ b/learn/images/customizations/ep-2-7-calc-norm.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3076f1e0b079e6e96b8510e015c7028ddf08c1b09e62967734b560d1a0fedea7 +size 167260 diff --git a/learn/images/customizations/ep-2-8-calc-retro.png b/learn/images/customizations/ep-2-8-calc-retro.png new file mode 100644 index 0000000000..5eaabc01f9 --- /dev/null +++ b/learn/images/customizations/ep-2-8-calc-retro.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:941f776d047fdf0acdd2815bea2c4b0a6232dda9598794734cdbbf5eeca989c6 +size 105944 diff --git a/learn/images/customizations/ep-3-0-skill-structure.png b/learn/images/customizations/ep-3-0-skill-structure.png new file mode 100644 index 0000000000..5a64a91e3a --- /dev/null +++ b/learn/images/customizations/ep-3-0-skill-structure.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ccf9e9822828843164f67ce91dc6974fee7f8d1ead5a0dc04ad2682b8e3623af +size 106978 diff --git a/learn/images/customizations/ep-3-2-skills-cust-ui.png b/learn/images/customizations/ep-3-2-skills-cust-ui.png new file mode 100644 index 0000000000..1358e3bce7 --- /dev/null +++ b/learn/images/customizations/ep-3-2-skills-cust-ui.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cd9ddd29b1d4cc39fb6a88304363ae0de6c9d2f21980e7fc1f25c0365c4c95f3 +size 97164 diff --git a/learn/images/customizations/ep-3-3-create-skill.png b/learn/images/customizations/ep-3-3-create-skill.png new file mode 100644 index 0000000000..f63545dfb9 --- /dev/null +++ b/learn/images/customizations/ep-3-3-create-skill.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d0ae8eaa3e2fcd7ea7bac76ca446718ca754efc5cfce80380455fe7d15f70d7e +size 67826 diff --git a/learn/images/customizations/ep-4-1-cust-agents.png b/learn/images/customizations/ep-4-1-cust-agents.png new file mode 100644 index 0000000000..1b551163fc --- /dev/null +++ b/learn/images/customizations/ep-4-1-cust-agents.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:17e6716c09699a1cbdcf4d7f3c7307fb7592efecd9f67e243a20a3f7a17e4453 +size 116647 diff --git a/learn/images/customizations/ep-4-2-ask-copilot-for-cust-agent.png b/learn/images/customizations/ep-4-2-ask-copilot-for-cust-agent.png new file mode 100644 index 0000000000..1116d9c103 --- /dev/null +++ b/learn/images/customizations/ep-4-2-ask-copilot-for-cust-agent.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:884416909f823316fd08752a86fc11046527607555227e1cb719dff68824b31f +size 146474 diff --git a/learn/images/customizations/ep-4-3-arcade-agent.png b/learn/images/customizations/ep-4-3-arcade-agent.png new file mode 100644 index 0000000000..bb09a09973 --- /dev/null +++ b/learn/images/customizations/ep-4-3-arcade-agent.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ba2dbf46fb569366210e7959a5a7e03ae6a1d04bbd2d374cce6bed7d98b1ea36 +size 121984 diff --git a/learn/images/customizations/ep-4-4-select-arcade-agent.png b/learn/images/customizations/ep-4-4-select-arcade-agent.png new file mode 100644 index 0000000000..10908aa195 --- /dev/null +++ b/learn/images/customizations/ep-4-4-select-arcade-agent.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3a68c0b45a890dee26e46b32585e76539868b0c15bea86655ca986e26f64124c +size 202877 diff --git a/learn/images/customizations/ep-4-5-arcade-tip-calc.png b/learn/images/customizations/ep-4-5-arcade-tip-calc.png new file mode 100644 index 0000000000..4d60c94a78 --- /dev/null +++ b/learn/images/customizations/ep-4-5-arcade-tip-calc.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b1c3a3dc83307ec5b0c55387d264fcc295839d0e530be153f14bce44b6595eb7 +size 465758 diff --git a/learn/images/customizations/ep-5-1-prettier-hook.png b/learn/images/customizations/ep-5-1-prettier-hook.png new file mode 100644 index 0000000000..6c27d92950 --- /dev/null +++ b/learn/images/customizations/ep-5-1-prettier-hook.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7022f355d0a524942740479292e29d55d6838857b9e829162b43004db19870f8 +size 66667 diff --git a/learn/images/customizations/ep-5-2-before-hook.png b/learn/images/customizations/ep-5-2-before-hook.png new file mode 100644 index 0000000000..28c8ffba9b --- /dev/null +++ b/learn/images/customizations/ep-5-2-before-hook.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:09db027a6c7736fc87f00376909fa87c555378ef748ddb89a95fb5e65acc7d41 +size 643414 diff --git a/learn/images/customizations/ep-5-3-after-hook.png b/learn/images/customizations/ep-5-3-after-hook.png new file mode 100644 index 0000000000..c82d726afe --- /dev/null +++ b/learn/images/customizations/ep-5-3-after-hook.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b7711945a3642d8203b0fc61b050ec2868e622a0366a5e410ccfba6717b089cf +size 626468 diff --git a/learn/images/customizations/ep-6-1-prompt-file-in-cust-ui.png b/learn/images/customizations/ep-6-1-prompt-file-in-cust-ui.png new file mode 100644 index 0000000000..de239d5289 --- /dev/null +++ b/learn/images/customizations/ep-6-1-prompt-file-in-cust-ui.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5dc85fc56eb6668994cd4869f499d3c8c35aa98af7b6cd3977fc2b11468b91cc +size 166071 diff --git a/learn/images/customizations/ep-6-2-prompt-file-from-chat.png b/learn/images/customizations/ep-6-2-prompt-file-from-chat.png new file mode 100644 index 0000000000..94a24eabac --- /dev/null +++ b/learn/images/customizations/ep-6-2-prompt-file-from-chat.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1288f3c0e60d3afbc91aabce8ac4d4adc1af9a310290ca6b547ecab7fd248c66 +size 18557 diff --git a/learn/images/customizations/ep-6-3-prompt-to-create.png b/learn/images/customizations/ep-6-3-prompt-to-create.png new file mode 100644 index 0000000000..3180257ebf --- /dev/null +++ b/learn/images/customizations/ep-6-3-prompt-to-create.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f097c71530559eae8ae068ea9d06d8636117095951a8d37d3cbfc7ddec9b68bc +size 74283 diff --git a/learn/images/customizations/ep-6-4-workspace-v-user.png b/learn/images/customizations/ep-6-4-workspace-v-user.png new file mode 100644 index 0000000000..bc6fe9b2f2 --- /dev/null +++ b/learn/images/customizations/ep-6-4-workspace-v-user.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e02659cf216cd52cecbd7376a58d5da251d5266921ec01a49a57ee083795c2f9 +size 82437 diff --git a/learn/images/customizations/ep-7-1-cust-feature-explained-by-copilot.png b/learn/images/customizations/ep-7-1-cust-feature-explained-by-copilot.png new file mode 100644 index 0000000000..d1386be269 --- /dev/null +++ b/learn/images/customizations/ep-7-1-cust-feature-explained-by-copilot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:811571f3f9e787ab058939058728108303bc2b15706d6b0a0d6407ada89ac62e +size 176777 diff --git a/learn/images/customizations/ep-7-2-comparisons-by-copilot.png b/learn/images/customizations/ep-7-2-comparisons-by-copilot.png new file mode 100644 index 0000000000..e68da78b1f --- /dev/null +++ b/learn/images/customizations/ep-7-2-comparisons-by-copilot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19e3269e58f3961feed4c165146d3ebf5bbc17c016a3c28f204b0ed0c8d5d3f3 +size 203140 diff --git a/learn/images/customizations/ep-7-3-key-differences-by-copilot.png b/learn/images/customizations/ep-7-3-key-differences-by-copilot.png new file mode 100644 index 0000000000..c2849c1e6b --- /dev/null +++ b/learn/images/customizations/ep-7-3-key-differences-by-copilot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fed68f9d979232f16625048559cbcd9ab17731f3214fe068cb80fe3c0f8a449b +size 131661 diff --git a/learn/images/customizations/ep-7-4-quiz-by-copilot.png b/learn/images/customizations/ep-7-4-quiz-by-copilot.png new file mode 100644 index 0000000000..e5a351c457 --- /dev/null +++ b/learn/images/customizations/ep-7-4-quiz-by-copilot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e2e25d43cd3be5c0e544373042531d512cd6c784c3814673654c23565695e2ef +size 98755 diff --git a/learn/images/customizations/ep-8-1-repo-analyzer.png b/learn/images/customizations/ep-8-1-repo-analyzer.png new file mode 100644 index 0000000000..aac9b23d97 --- /dev/null +++ b/learn/images/customizations/ep-8-1-repo-analyzer.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0e25ff031ca90107e512b1bb45c6c9e18acd03b9b29b3a04c8119d852280275f +size 148760 diff --git a/learn/images/customizations/ep-8-2-arcade-agent.png b/learn/images/customizations/ep-8-2-arcade-agent.png new file mode 100644 index 0000000000..66c7f00c4d --- /dev/null +++ b/learn/images/customizations/ep-8-2-arcade-agent.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f6d192e09fe38b90e4ada8a8082993a4c2678c621c806a4484ee9bc0352e2be +size 35200 diff --git a/learn/images/customizations/ep-8-3-repo-analyzer-initial-view.png b/learn/images/customizations/ep-8-3-repo-analyzer-initial-view.png new file mode 100644 index 0000000000..66852e4d45 --- /dev/null +++ b/learn/images/customizations/ep-8-3-repo-analyzer-initial-view.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5d258a4e121d0c1601e8a37bb1ab41fc54aa354acda4186384056ec8bebe9a52 +size 66122 diff --git a/learn/images/customizations/ep-8-4-solid.png b/learn/images/customizations/ep-8-4-solid.png new file mode 100644 index 0000000000..f39be8aae9 --- /dev/null +++ b/learn/images/customizations/ep-8-4-solid.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:931f08272dae1980208a4f936b1a817f45c9839a2f707743d2836cc32b761c6f +size 237982 diff --git a/learn/images/shared/chat-icon-gear.png b/learn/images/shared/chat-icon-gear.png new file mode 100644 index 0000000000..a615d87073 --- /dev/null +++ b/learn/images/shared/chat-icon-gear.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c885f568ee759fe3f8896fca50755364b8e87e6604297f2a81ecdcb795148d43 +size 40939 diff --git a/learn/toc.json b/learn/toc.json index bfb9062c2c..302d3f8778 100644 --- a/learn/toc.json +++ b/learn/toc.json @@ -11,5 +11,20 @@ ["Debugging agent work", "/learn/foundations/debugging-and-whats-happening-behind-the-scenes"], ["Build your first app with agent mode", "/learn/foundations/build-your-first-app-with-agent-mode"] ] + }, + { + "name": "Customizations", + "area": "customizations", + "description": "Learn how to shape AI in VS Code around your workflow using custom agents, instructions, skills, prompt files, and hooks.", + "topics": [ + ["Why customization matters", "/learn/customizations/1-why-customization-matter"], + ["Instructions", "/learn/customizations/2-instructions"], + ["Skills", "/learn/customizations/3-skills"], + ["Custom agent", "/learn/customizations/4-custom-agent"], + ["Hooks", "/learn/customizations/5-hooks"], + ["Prompt files", "/learn/customizations/6-prompt-files"], + ["Customization Features Explained", "/learn/customizations/7-customization-features-explained"], + ["Customization Features In Practice", "/learn/customizations/8-demo"] + ] } ]