⚙️ Build It Better: Real-World AI Coding with GitHub Copilot

Originally shared as an internal how-to document. GitHub Copilot as a true pair...

<blockquote> Originally shared as an internal how-to document. </blockquote> <h2> <a href="#github-copilot-as-a-true-pair-programmer"> </a> GitHub Copilot as a true pair programmer </h2> I've spent a lot of time testing workflows, instructions and prompts. Some with more context, some with less. I've gotten some great results and some spectacular failures! Here's an overview of what I found works for nearly every scenario when using GitHub Copilot Agent mode as a pair implementation specialist. <h2> <a href="#tldr"> </a> 📌 TL;DR </h2> <ol> <li>Set up repo-level instructions & starter template</li> <li>Know your goal & break tasks into stories</li> <li>Explore options in Ask mode for planning</li> <li>Design a comprehensive, context-rich prompt</li> <li>Spell out rules, conventions & self-review steps</li> <li>Choose the right AI model for each task</li> <li>Require a self-review pass</li> <li>Supervise your AI pair—pause & redirect</li> <li>Review & refine changes like a seasoned engineer</li> <li>Provide feedback, reprompt & repeat</li> </ol> <hr> <h2> <a href="#1-set-up-repolevel-instructions"> </a> 1. Set Up Repo-Level Instructions </h2> Why it matters: Repo instructions give Copilot the context it needs before any new code exists. This is your baseline and everything from here on will depend on this. <blockquote> 🔁 If you missed it, check out my previous post <a href="https://dev.to/anchildress11/all-ive-learned-about-github-copilot-instructions-so-far-5bm7">All I’ve Learned About GitHub Copilot Instructions (So Far)</a>. </blockquote> If you're starting a brand new project, use a starter template to scaffold basic structure and create a minimum set of instructions that includes: <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Description</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Project Overview</td> <td>What does this repo do? Why does it matter?</td> <td></td> </tr> <tr> <td>Testing Requirements</td> <td>TDD strategy, code coverage %, test types, error handling, edge cases.</td> <td>I never had a great opportunity to test Copilot's reaction to TDD. Add your experience below!</td> </tr> <tr> <td>Documentation</td> <td>Javadoc, README, Swagger/OpenAPI specs.</td> <td>✨ If you want something a little more advanced, look into mermaid diagrams!</td> </tr> <tr> <td>Design & Security</td> <td>Architecture constraints, naming conventions, auth rules.</td> <td></td> </tr> <tr> <td>Review Rules</td> <td>Checklist for self-reviews and criteria for acceptance.</td> <td>This step will save you a ton of time in the long run.</td> </tr> </tbody> </table></div> <hr> <h2> <a href="#2-know-your-goal-amp-break-it-down"> </a> 2. Know Your Goal & Break It Down </h2> ✨ Side-project vibe-code? 🛠️ Production bug fix? 🌀 Somewhere in between? Define your end goal, then split work into small, targeted stories that Copilot can handle one step at a time. If a task can be broken down further, do so - you’ll get better results. The smaller and more targeted you define the task, the better results you’ll get in the end. <blockquote> 💡 ProTip: Give Copilot access to your issue tracker via an MCP server. That's one less thing to copy/paste and you can add an update clause in your prompt to let Copilot handle the comments and even issue tracking status or labels directly. </blockquote> <hr> <h2> <a href="#3-explore-in-ask-mode"> </a> 3. Explore in Ask Mode </h2> If you know exactly how, why, and where, then you can probably skip this step. Otherwise, before coding, do a little exploring with Copilot Ask mode. Prompt it with something like: <div class="highlight js-code-highlight"> <pre><code>Given requirements in JIRA-123, analyze #codebase and propose 3 implementation options with pros/cons. Score each by simplicity & maintainability. Recommend one. </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Iterate until uncertainties are surfaced and addressed. This is also the perfect time to validate your setup, including the story itself and custom instructions. Ask yourself, is the result what you expected it to be? If not, can you pinpoint which detail was unclear or too complex? This is not only a great time to improve your custom instructions and story definition, but also explore alternative approaches. You might even think of something you wouldn't have otherwise. <blockquote> ⚠️ Be careful with overconfident models. Sometimes you will read an explanation presented with such a high degree of certainty that you’ll catch yourself agreeing with it regardless of whether it actually makes sense for your use case. 💡 ProTip: Ask mode is perfect for exploration. It prevents Copilot from making changes to the code before you’re ready and it saves a premium request. </blockquote> <hr> <h2> <a href="#4-design-a-comprehensive-prompt"> </a> 4. Design a Comprehensive Prompt </h2> Consider how you want to prompt Copilot to complete its task. For a high-impact production fix, you will probably want to keep a tight leash on the exact implementation. The more straightforward the prompt and instructions are, the less room Copilot has to veer off its intended path or hallucinate a better implementation than the one you had planned. Your prompt should include: <ol> <li>Specific <code>#file</code> or <code>#selection</code> that is relevant to the task</li> <li>Open any related or secondary files in the editor as additional context</li> <li>A numbered list of implementation steps, if you need better control or visibility along the way.</li> <li>Specify any important design patterns, security concerns, or future work planned (can also be separate <code>.github/instructions/specific-guidelines.instruction.md</code> files in the repo for ultimate reusability.</li> <li>Identify any important config files (like <code>./eslint.config.js</code> or <code>./vitest.config.js</code>) that Copilot must adhere to and put them in context with #file.</li> <li>For complex tasks, add an extra step instructing Copilot to consider at least X alternative approaches before starting work. Assess whether the detailed implementation plan covers all edge cases and error scenarios appropriately. If not, then update accordingly before moving on.</li> </ol> It's always better to be more specific and more strict than to provide no guidance at all. If that means your prompt is closer to the size of a 3-page essay, then that's OK! Try it out and make changes later, if needed. <h3> <a href="#example-prompt"> </a> ‼️ Example prompt: </h3> <div class="highlight js-code-highlight"> <pre><code>Assess this #codebase in conjunction with the #file:README.md. Use #githubRepo tool to reference other codebases, as needed. Without making any changes to the existing code, generate a new PROJECT_DIAGRAM.md file that correctly illustrates a mermaid diagram for this repository. Adhere to the following guidelines: 1. The primary project diagram should be a very high-level and only include inputs, major functionality/business logic/outputs. If it links to a separate project, those should be well documented. 2. For each primary use case you can identify, generate a diagram for it that includes enough detail to document the process end to end, but leave out any irrelevant processing or "common sense" logic. 3. Every diagram should have its own section that includes the mermaid diagram itself, a brief description of its purpose, any external factors or links, troubleshooting steps for common failures, and suggested future improvements, if any exist, that would improve maintainability or eliminate potential bugs. 4. Ensure this new project_diagram is linked to from the primary #file:README.md </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <blockquote> 💡 ProTip: Mermaid diagrams are a great addition to any <code>README.md</code> and GitHub renders them without any help on your end. If you want the preview to display in VS Code, you'll need to install an extension. I use <a href="https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid">bierner.markdown-mermaid</a> but there's a ton of them available. </blockquote> <hr> <h2> <a href="#5-spell-out-rules-amp-guidelines"> </a> 5. Spell Out Rules & Guidelines </h2> Reference your <code>README.md</code> or <code>.github/custom-instructions.md</code> file when defining strict guidelines, especially if a commit hook or linter is involved. In your prompt, try adding something similar to: <div class="highlight js-code-highlight"> <pre><code>Follow conventions in README.md: Javadoc, pass all tests, adhere to secure coding guidelines. </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> For narrow tasks, add file-specific context: <div class="highlight js-code-highlight"> <pre><code>Implement within #MyComponent.tsx, preserve API interface. </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <blockquote> 🏹 One prompt → one premium request in Agent Mode. Maximize your premium usage by combining as much information and context into a single prompt as possible. </blockquote> <hr> <h2> <a href="#6-choose-the-right-ai-model"> </a> 6. Choose the Right AI Model </h2> The model you choose is probably the next biggest impact to the overall implementation and outcome. When in doubt, try the cheapest one first (aka smallest premium multiplier). If it doesn't work the first time, <code>/clear</code> everything and then re-submit the prompt. <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Task</th> <th>Recommended Model</th> <th>Alternate Model</th> </tr> </thead> <tbody> <tr> <td>New feature or complex logic</td> <td>Claude Sonnet (any version)</td> <td>Claude Opus</td> </tr> <tr> <td>Quick fix</td> <td>o3/4-mini</td> <td>Gemini 2.0 Flash</td> </tr> <tr> <td>Heavy analysis or debugging</td> <td>o3/4 (regular)</td> <td>Gemini 2.5 Pro</td> </tr> <tr> <td>Ideation or creative exploration</td> <td>GPT-4.1</td> <td>GPT-4.5</td> </tr> </tbody> </table></div> <blockquote> 📌 Refer to <a href="https://docs.github.com/en/copilot/reference/ai-models/choosing-the-right-ai-model-for-your-task">GitHub's model cheatsheet</a> for more detailed info about picking the right model. 💡 ProTip: The VS Code Chat extension works like your terminal - just press the up arrow key to rotate through previous chats, even after you've cleared them. You can also use the history button at the top to return to a previously cleared chat. </blockquote> <hr> <h2> <a href="#7-require-a-selfreview-pass"> </a> 7. Require a Self-Review Pass </h2> Either in the overall initial prompt or in a custom-instructions file, instruct GitHub Copilot to complete a detailed self-review of all changes made according to a set guideline (security, optimization, maintainability, etc): <div class="highlight js-code-highlight"> <pre><code>- Pass all tests & coverage checks - Meet lint & format requirements - Perform a detailed self-review with a focus on secure coding practices </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <blockquote> 💡 ProTip: You'll save on premium requests if you include the self-review requirements in the initial prompt. However, you'll get better results if you separate the review step from the implementation (be sure to <code>/clear</code> and consider changing the model, too!) </blockquote> <hr> <h2> <a href="#8-supervise-your-ai-pair"> </a> 8. Supervise Your AI Pair </h2> Always follow these basic guidelines whenever you're working with GitHub Copilot: <ol> <li> Never leave Copilot unattended (ask me how I know 🤣) <blockquote> ☝️ Asked and answered <a href="https://dev.to/anchildress1/github-copilot-agent-mode-the-mistake-you-never-want-to-make-1mmh">here</a>. </blockquote> </li> <li>When in doubt, pause the task</li> <li>Clarify & redirect whenever needed </li> <li>Resume only when context is clear</li> <li>Communicate manual edits with Copilot (else they'll get overwritten)</li> </ol> <blockquote> 💡 ProTip: It doesn't seem to cost anything extra to simply pause execution, assess, and then resume. However, if you end up sending a new prompt to redirect they will charge you the standard premium request fee (whenever I figure out what that really means, I'll let you know!) </blockquote> <hr> <h2> <a href="#9-review-like-a-human"> </a> 9. Review Like a Human </h2> Use VS Code’s diff view to accept/reset line-by-line. Keep changes by default and reset unwanted bits in Source Control - this helps prevent accidental resets. Pick your battles. Don’t spend premium requests on minor formatting or nitpicks. Sometimes you have to accept that it's never going to be 100% perfect. Don't be afraid to jump in and take over when you need to. <blockquote> 🚨 Channel your inner code review boss, every single time. Whether AI helped out or not, you’re always on the hook for clean, accurate code. Double-check, polish, and take pride in your commits - it’s your name on the line, so make sure it’s something you’d want to sign off on! </blockquote> <hr> <h2> <a href="#10-refine-reprompt-amp-repeat"> </a> 10. Refine, Reprompt & Repeat </h2> Treat every interaction with Copilot like you're teaching a junior dev. Use every available opportunity to improve your instructions, prompt, or clarify your goal: <ul> <li>Ask clarifying questions</li> <li>Get alternate solutions</li> <li>Propose different approaches (then let Copilot pick)</li> <li>Prompt Copilot to challenge logic</li> <li>Flag missing tests/docs with inline or PR comments</li> </ul> <blockquote> 💡 ProTip: Copilot is a powerful teammate, but it’s not a one-size-fits-all solution - especially when you’re dealing with brand-new repos, high-stakes production fires, or anything that needed to be done yesterday. Save yourself a headache: choose your AI battles wisely, and don’t try to make AI your Swiss Army knife for every situation. Sometimes, the fastest route is a good old-fashioned human touch. </blockquote> <hr> <h2> <a href="#your-turn"> </a> 💬 Your Turn: </h2> What worked (or spectacularly failed)? Any surprises when pairing with GitHub Copilot? Share your personal wins, no-repeat plans, and unique stories below! <hr> <blockquote> <h3> <a href="#rai-disclaimer"> </a> 🛡️ RAI Disclaimer </h3> Everything I share here is my own perspective—created with the help of AI tools (GitHub Copilot, ChatGPT, and their friends), but always with a human in the loop. I do my best to catch accidental bias and fact-check, but if you ever spot something odd, let me know! AI isn’t perfect, and neither am I. TL; DR: AI helped, but you can blame me for the chaos! 🫠 </blockquote>