{"id":223,"date":"2025-11-21T16:41:26","date_gmt":"2025-11-21T15:41:26","guid":{"rendered":"https:\/\/marshfire.net\/wp\/?p=223"},"modified":"2025-11-22T17:01:00","modified_gmt":"2025-11-22T16:01:00","slug":"how-github-copilot-instructions-supercharged-our-code-reviews-and-my-coffee-habit","status":"publish","type":"post","link":"https:\/\/marshfire.net\/wp\/software-architecture\/223\/","title":{"rendered":"How GitHub Copilot Instructions Supercharged Our Code Reviews (and My Coffee Habit)"},"content":{"rendered":"\n<p>Learn how GitHub Copilot instruction files transformed our code review process with actionable examples and step-by-step setup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>TL;DR<\/strong><\/h2>\n\n\n\n<p>We used GitHub Copilot instruction files to automate repetitive review checks, increase clarity, and improve onboarding. Add a `<code>.github\/copilot-instructions.md<\/code>` file, define a few project-specific rules, and use Copilot Chat with `<code>@workspace<\/code>` to get guided, actionable PR feedback in minutes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Start in 10 Minutes (Quick Checklist)<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create\u00a0<code>.github\/copilot-instructions.md<\/code><\/li>\n\n\n\n<li>Add your review rules (start small)<\/li>\n\n\n\n<li>Add optional\u00a0<code>review.md<\/code>,\u00a0<code>branch-review.md<\/code>,\u00a0<code>git-review.md<\/code><\/li>\n\n\n\n<li>Ask Copilot:\u00a0<code>@workspace review this file<\/code><\/li>\n\n\n\n<li>Iterate weekly based on team feedback<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-1024x683.png\" alt=\"AI supported Code Review\" class=\"wp-image-224\" style=\"width:1200px;height:auto\" srcset=\"https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-1024x683.png 1024w, https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-300x200.png 300w, https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-768x512.png 768w, https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prologue: Powered by Caffeine and Curiosity<\/strong><\/h2>\n\n\n\n<p>There\u2019s something about that first sip of coffee that sharpens your focus\u2014especially during code reviews. We used GitHub Copilot instruction files to make reviews faster, clearer, and friendlier. This post walks through the exact files, and prompts we built to make reviews meaningful and repeatable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Problem: Code Reviews, the Good, the Bad, and the Tedious<\/strong><\/h2>\n\n\n\n<p>Code reviews are the backbone of quality software, but they can be a slog\u2014endless nitpicks, unclear expectations, and the dreaded \u201cLGTM\u201d (&#8220;Looks good to me&#8221;) with no context. We wanted to make reviews more consistent, reduce reviewer fatigue, and encourage best practices without sounding robotic. Enter: GitHub Copilot instruction files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Are GitHub Copilot Instruction Files?<\/strong><\/h2>\n\n\n\n<p>GitHub Copilot instruction files are markdown documents that teach your workspace Copilot about your team&#8217;s standards, patterns, and workflow. Instead of hoping Copilot &#8220;gets&#8221; your team&#8217;s vibe, you give it a playbook: how to review, what to look for, and how to communicate.<\/p>\n\n\n\n<p>In our workflow we created three instruction files\u2014<code>review.md<\/code>,&nbsp;<code>branch-review.md<\/code>, and&nbsp;<code>git-review.md<\/code>\u2014each tailored to a stage of development. These are living documents that encode our team&#8217;s values and priorities and help guide both AI-assisted and human reviews.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Building the Review Experience: Best Practices in Action<\/strong><\/h2>\n\n\n\n<p>Here&#8217;s what we learned while crafting our instruction files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Start Human, Stay Human<\/strong><\/h3>\n\n\n\n<p>Reviews are ultimately about people, not just code. Use a friendly tone, celebrate wins, and give feedback the way you would over coffee with a teammate. Being constructive sets the right mood for both AI-assisted and human reviewers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pro Tips<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep prompts conversational and concise.<\/li>\n\n\n\n<li>Explicitly ask for clarifications rather than assumptions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Be specific, But Not Overbearing<\/h3>\n\n\n\n<p>Vague instructions lead to vague reviews. Break expectations into clear, actionable points: what to check (logic, style, tests, docs), what\u2019s a blocker versus a nice-to-have, and how to handle uncertainty.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pro Tips<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use checklists for repeatable items (tests, a11y, docs).<\/li>\n\n\n\n<li>Mark rules as Critical\/Major\/Minor so reviewers know the priority.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Automate the Boring Stuff<\/strong><\/h3>\n\n\n\n<p>Let automation handle linting, formatting, and import order\u2014freeing humans to focus on architecture, design, and intent.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pro Tips<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run `<code>nx lint &lt;project> --fix<\/code>` or repo-specific linters automatically.<\/li>\n\n\n\n<li>Ask Copilot to skip items that automated tools already verify.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Context Is King<\/strong><\/h3>\n\n\n\n<p>Instruction files should reference project-specific guidelines\u2014style guides, accessibility rules, and design token strategies\u2014so feedback remains relevant.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pro Tips<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Link to docs, README sections, or concrete examples in the repo.<\/li>\n\n\n\n<li>Provide small code snippets in the instruction files to illustrate preferred patterns.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Encourage Learning, Not Just Policing<\/strong><\/h3>\n\n\n\n<p>Use instructions to nudge reviewers to explain <em>why<\/em> something matters. This turns reviews into teaching moments, helping junior devs learn faster.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pro Tips<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Request explanation-oriented feedback, not just fixes.<\/li>\n\n\n\n<li>Celebrate good patterns in the &#8220;Strengths&#8221; output.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Improved: The Measurable Impact<\/strong><\/h2>\n\n\n\n<p>Since adopting Copilot instruction files, we\u2019ve seen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Faster review cycles<\/li>\n\n\n\n<li>Clearer, more consistent PR feedback<\/li>\n\n\n\n<li>Quicker onboarding for new team members<\/li>\n\n\n\n<li>Less reviewer fatigue and more constructive engagement<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Before &amp; After: What a PR Looks Like with Copilot Instructions<\/strong><\/h2>\n\n\n\n<p><strong>Before:<\/strong><\/p>\n\n\n\n<p>A short PR description like &#8220;Fixed stuff and added tests,&#8221; leaving reviewers guessing.<\/p>\n\n\n\n<p><strong>After:<\/strong><\/p>\n\n\n\n<p>A structured description generated by Copilot:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Summary of changes<\/li>\n\n\n\n<li>Impacted modules<\/li>\n\n\n\n<li>Testing notes<\/li>\n\n\n\n<li>Accessibility considerations<\/li>\n\n\n\n<li>Linked issues<\/li>\n<\/ul>\n\n\n\n<p>This gives reviewers context immediately and reduces back-and-forth.<\/p>\n\n\n\n<p><strong>Real Review Output Example<\/strong><\/p>\n\n\n\n<p>Here&#8217;s an excerpt from an actual branch review using our instruction files. The developer implemented a new app layout with sidebar and toolbar components:<\/p>\n\n\n\n<p><strong>Prompt:<\/strong> <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\">\n<p>@workspace review my branch changes against develop using branch-review guidelines<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Copilot Output (excerpt):<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>### \ud83c\udf3f Branch Information\n- **Current Branch**: feature\/new-layout\n- **Target Branch**: origin\/development\n- **Files Changed**: 42\n- **Lines Added**: 1504 | **Lines Removed**: 59\n- **Change Type**: Feature (new app layout, sidebar, toolbar, i18n, tests)\n\n### \u2705 Strengths\n- Follows Angular best practices (standalone components, signals, OnPush, modern control flow)\n- Excellent separation of concerns: core\/services, shared\/components, pages\n- All new components have `.spec.ts` tests with good coverage\n- Accessibility and i18n considered (ARIA labels, translation keys, no hardcoded text)\n- SCSS follows BEM and design token conventions\n- No deprecated Angular APIs or structural directives\n\n### \u26a0\ufe0f Issues Found\n\n#### Critical\n- &#91; &#93; i18n coverage incomplete: Only en.json has full keys; de.json and fr.json \n      missing translations. Will break non-English users.\n\n#### Major\n- &#91; &#93; Branch hygiene: Merge commit instead of rebase for clean PR history\n- &#91; &#93; No README or Storybook for new components (required for documentation)\n- &#91; &#93; No density documentation or demonstration\n\n#### Minor\n- &#91; &#93; Some ARIA labels use hardcoded English instead of translation keys\n- &#91; &#93; Use input signals instead of classic `@Input()` where possible\n- &#91; &#93; Add explicit accessibility tests for keyboard navigation\n\n### \ud83d\udd27 Specific Recommendations\n1. **i18n**: Copy all keys from en.json to de.json and fr.json\n2. **Branch Hygiene**: Rebase onto origin\/development\n3. **Component Documentation**: Add README.md and .stories.ts for each component\n4. **Density Support**: Document and demonstrate density tokens in Storybook\n\n### \ud83d\ude80 Merge Assessment\n- **Ready to Merge**: No (critical i18n and documentation issues)\n- **Risk Level**: Medium (i18n breakage for non-English users)\n- **Breaking Changes**: No\n- **Estimated Review Time**: 1-2 hours\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \ud83c\udf3f Branch Information<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Current Branch<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: feature\/new-layout<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Target Branch<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: origin\/development<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Files Changed<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: 42<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Lines Added<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: 1504 | <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Lines Removed<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: 59<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Change Type<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Feature (new app layout, sidebar, toolbar, i18n, tests)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \u2705 Strengths<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Follows Angular best practices (standalone components, signals, OnPush, modern control flow)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Excellent separation of concerns: core\/services, shared\/components, pages<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> All new components have <\/span><span style=\"color: #8FBCBB\">`.spec.ts`<\/span><span style=\"color: #D8DEE9FF\"> tests with good coverage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Accessibility and i18n considered (ARIA labels, translation keys, no hardcoded text)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> SCSS follows BEM and design token conventions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> No deprecated Angular APIs or structural directives<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \u26a0\ufe0f Issues Found<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">####<\/span><span style=\"color: #88C0D0\"> Critical<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; i18n coverage incomplete: Only en.json has full keys; de.json and fr.json <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      missing translations. Will break non-English users.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">####<\/span><span style=\"color: #88C0D0\"> Major<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Branch hygiene: Merge commit instead of rebase for clean PR history<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No README or Storybook for new components (required for documentation)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No density documentation or demonstration<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">####<\/span><span style=\"color: #88C0D0\"> Minor<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Some ARIA labels use hardcoded English instead of translation keys<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Use input signals instead of classic <\/span><span style=\"color: #8FBCBB\">`@Input()`<\/span><span style=\"color: #D8DEE9FF\"> where possible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Add explicit accessibility tests for keyboard navigation<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \ud83d\udd27 Specific Recommendations<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">1.<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">i18n<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Copy all keys from en.json to de.json and fr.json<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">2.<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Branch Hygiene<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Rebase onto origin\/development<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">3.<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Component Documentation<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Add README.md and .stories.ts for each component<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">4.<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Density Support<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Document and demonstrate density tokens in Storybook<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \ud83d\ude80 Merge Assessment<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Ready to Merge<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: No (critical i18n and documentation issues)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Risk Level<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Medium (i18n breakage for non-English users)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Breaking Changes<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: No<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Estimated Review Time<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: 1-2 hours<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Notice how the review provides a complete picture: branch stats, categorized issues with severity levels, actionable recommendations, and a clear merge readiness assessment. The structured output makes it easy to create a todo list and prioritize fixes.<\/p>\n\n\n\n<p><strong>Tips for Crafting Your Own Instruction Files<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Keep It Human.<\/strong> Use a conversational tone and explain the \u201cwhy.\u201d<\/li>\n\n\n\n<li><strong>Iterate and Improve.<\/strong> Your first draft won\u2019t be perfect\u2014review and refine.<\/li>\n\n\n\n<li><strong>Balance Strictness and Flexibility.<\/strong> Call out non-negotiables versus guidelines.<\/li>\n\n\n\n<li><strong>Document the Why.<\/strong> Short rationales increase buy-in.<\/li>\n\n\n\n<li><strong>Encourage Questions.<\/strong> Invite reviewers to ask clarifying questions.<\/li>\n\n\n\n<li><strong>Integrate with Your Workflow.<\/strong> Store files in `.github\/` and reference them in PR templates.<\/li>\n\n\n\n<li><strong>Celebrate Successes.<\/strong> Positive feedback matters.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How Should a Good Instruction File Look? (With Examples)<\/strong><\/h2>\n\n\n\n<p>Below are real, adapted examples you can copy into `<code>.github\/review.md<\/code>` or use as workspace-level instructions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 1: Friendly Review Checklist<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># Code Review Checklist\n\n- &#91; &#93; Is the code easy to read and understand?\n- &#91; &#93; Are there tests for new logic?\n- &#91; &#93; Does the code follow our style guide?\n- &#91; &#93; Are all user-facing texts translatable?\n- &#91; &#93; Is accessibility (a11y) considered?\n- &#91; &#93; Are there any obvious performance issues?<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">#<\/span><span style=\"color: #88C0D0\"> Code Review Checklist<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Is the code easy to read and understand?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Are there tests for new logic?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Does the code follow our style guide?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Are all user-facing texts translatable?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Is accessibility (a11y) considered?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Are there any obvious performance issues?<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 2: Encouraging Constructive Feedback<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>## How to Give Great Feedback\n\n- Start with something positive\n- Be specific about what can be improved\n- Explain why a change is needed (not just what)\n- Suggest alternatives if possible\n- Thank the author for their work!<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> How to Give Great Feedback<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Start with something positive<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Be specific about what can be improved<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Explain why a change is needed (not just what)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Suggest alternatives if possible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Thank the author for their work!<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 3: Project-Specific Guidance (anonymized)<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>## Project Guidelines\n\n- Use `@if` and `@for` instead of `*ngIf`\/`*ngFor` in Angular templates\n- All components must support density tokens and smooth transitions\n- Never use `--mat-sys-*` tokens directly; use semantic tokens like `--my-component-action-button-color`\n- Add `data-test` attributes for all interactive elements<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> Project Guidelines<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Use <\/span><span style=\"color: #8FBCBB\">`@if`<\/span><span style=\"color: #D8DEE9FF\"> and <\/span><span style=\"color: #8FBCBB\">`@for`<\/span><span style=\"color: #D8DEE9FF\"> instead of <\/span><span style=\"color: #8FBCBB\">`*ngIf`<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #8FBCBB\">`*ngFor`<\/span><span style=\"color: #D8DEE9FF\"> in Angular templates<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> All components must support density tokens and smooth transitions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Never use <\/span><span style=\"color: #8FBCBB\">`--mat-sys-*`<\/span><span style=\"color: #D8DEE9FF\"> tokens directly; use semantic tokens like <\/span><span style=\"color: #8FBCBB\">`--my-component-action-button-color`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Add <\/span><span style=\"color: #8FBCBB\">`data-test`<\/span><span style=\"color: #D8DEE9FF\"> attributes for all interactive elements<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 4: Automation Reminders<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>## Automation\n\n- Run `nx lint &lt;project> --fix` before submitting a PR\n- Use Copilot to check for import order, spacing, and formatting\n- Let automation handle the boring stuff\u2014focus reviews on logic, design, and accessibility<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> Automation<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Run <\/span><span style=\"color: #8FBCBB\">`nx lint &lt;project&gt; --fix`<\/span><span style=\"color: #D8DEE9FF\"> before submitting a PR<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Use Copilot to check for import order, spacing, and formatting<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Let automation handle the boring stuff\u2014focus reviews on logic, design, and accessibility<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Getting Started: Prerequisites &amp; Setup<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GitHub Copilot subscription (Individual, Business, or Enterprise)<\/li>\n\n\n\n<li>VS Code with the GitHub Copilot extension installed<\/li>\n\n\n\n<li>Git repository where you can add instruction files<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Setting Up Your Instruction Files<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create `<code>.github\/copilot-instructions.md<\/code>` at the repo root if it is not already there<\/li>\n\n\n\n<li>Add your review guidelines (start with the templates above)<\/li>\n\n\n\n<li>Optionally add `<code>review.md<\/code>`, `<code>branch-review.md<\/code>`, `<code>git-review.md<\/code>` in `<code>.github\/<\/code>` and mention them in the instruction file.<\/li>\n\n\n\n<li>Open Copilot Chat and try: `<code>@workspace please review my current file<\/code>`<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Use These Files in Practice<\/strong><\/h2>\n\n\n\n<p><strong>File review:<\/strong> `@workspace review this file using our review standards`<\/p>\n\n\n\n<p><strong>Branch review (pre-PR):<\/strong> `@workspace review my branch changes against develop using branch-review guidelines`<\/p>\n\n\n\n<p><strong>Pre-commit review:<\/strong> `@workspace review my staged changes and suggest a commit message`<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Copilot Can (and Can&#8217;t) Do: Managing Expectations<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What Works Well<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pattern detection (missing tests, accessibility issues, style violations)<\/li>\n\n\n\n<li>Consistency checking against documented patterns<\/li>\n\n\n\n<li>Documentation review and best-practice reminders<\/li>\n\n\n\n<li>Helping junior developers understand standards through explanations<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Current Limitations<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Not fully autonomous\u2014explicit prompts are required<\/li>\n\n\n\n<li>Token limits for very large diffs (use the free models if you have any in your subscription)<\/li>\n\n\n\n<li>Logic and architectural nuance still require human judgment<\/li>\n\n\n\n<li>Context requirements: diffs or file context needed for accurate reviews<\/li>\n\n\n\n<li>Possible false positives\u2014verify suggestions<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Appendix: Make VS Code use Custom Review Commands<\/strong><\/h2>\n\n\n\n<p>Want to type `<code>\/review<\/code>` instead of a long `<code>@workspace ...<\/code>` command? You can either create your own VS Code extension (I will not go into details with that one), or you can use quick snippets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quick Snippets (No extension needed)<\/h3>\n\n\n\n<p>Building a VSCode extension just to type a bit less feels like overkill, but behold, there is an easy alternative. Just create <strong>VS Code snippets<\/strong> for quick access:<\/p>\n\n\n\n<p><strong>Add to `<code>.vscode\/copilot-chat.code-snippets<\/code>`:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{\n  \"Review File\": {\n    \"prefix\": \"\/review\",\n    \"body\": &#91;\n      \"@workspace use .github\/review.md to review the current file in detail\"\n    &#93;,\n    \"description\": \"Review current file with review.md\"\n  },\n  \"Review Branch\": {\n    \"prefix\": \"\/review-branch\",\n    \"body\": &#91;\n      \"@workspace use .github\/branch-review.md to review my branch changes against ${1:develop}\"\n    &#93;,\n    \"description\": \"Review branch with branch-review.md\"\n  },\n  \"Review Commit\": {\n    \"prefix\": \"\/review-commit\",\n    \"body\": &#91;\n      \"@workspace use .github\/git-review.md to review my staged changes and suggest a commit message\"\n    &#93;,\n    \"description\": \"Review staged changes with git-review.md\"\n  }\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">Review File<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">prefix<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/review<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">body<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">@workspace use .github\/review.md to review the current file in detail<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">description<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Review current file with review.md<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">Review Branch<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">prefix<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/review-branch<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">body<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">@workspace use .github\/branch-review.md to review my branch changes against ${1:develop}<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">description<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Review branch with branch-review.md<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">Review Commit<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">prefix<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/review-commit<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">body<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">@workspace use .github\/git-review.md to review my staged changes and suggest a commit message<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #8FBCBB\">description<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Review staged changes with git-review.md<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Now when you type `<code>\/review<\/code>` in Copilot Chat, VS Code autocompletes the full command. It&#8217;s not as elegant as a custom participant, but it works immediately with zero setup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Three Different Instruction Files? Understanding Their Roles<\/strong><\/h2>\n\n\n\n<p>We use three separate instruction files: `<code>review.md<\/code>`, `<code>branch-review.md<\/code>`, and `<code>git-review.md<\/code>`. Each serves a specific purpose:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>`<strong>review.md`<\/strong>: Deep-dive file-level checklist for quality, a11y, tests, and architecture.<\/li>\n\n\n\n<li><strong>`branch-review.md`<\/strong>: Pre-PR overview that compares your branch against mainline and generates a structured PR description.<\/li>\n\n\n\n<li><strong>`git-review.md`<\/strong>: Pre-commit checks for staged changes and conventional commit message suggestions.<\/li>\n<\/ul>\n\n\n\n<p>Splitting files helps Copilot focus on the right concerns at each stage and makes guidance more relevant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Epilogue: The Future of AI-Assisted Code Reviews<\/strong><\/h2>\n\n\n\n<p>Small changes\u2014like a well-crafted instruction file\u2014can have outsized impacts. Code reviews are no longer something we dread; they&#8217;re a chance to learn, grow, and connect as a team. With thoughtful guidance, you can turn your review process from a bottleneck into a superpower.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">E<strong>xample: Anonymized Code Review Instruction File<\/strong><\/h2>\n\n\n\n<p>Below is an anonymized and adapted version of our `review.md` instruction file. It includes a consolidated hard-rule callout.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># Code Review Instructions\n\nYou are an expert code reviewer for this project. When asked to perform a code review, follow these comprehensive guidelines:\n\n## Review Checklist\n\n### 1. Architecture &amp; Design\n- &#91; &#93; Follows project architecture patterns\n- &#91; &#93; Components are standalone and properly organized\n- &#91; &#93; Code is in the correct location (apps\/libs)\n- &#91; &#93; Dependencies between libraries are appropriate\n- &#91; &#93; Monorepo structure is followed\n\n> \u26a0\ufe0f **Hard rule \u2014 block merge**\n> No direct or indirect use of translation frameworks (e.g., ngx-translate, TranslateService, TranslatePipe) in publishable libraries. If present, mark as **Critical** and block until resolved.\n\n### 2. Angular Best Practices\n- &#91; &#93; Uses standalone components (not NgModules)\n- &#91; &#93; Uses modern control flow syntax (`@if`, `@for`, `@switch`) instead of structural directives\n- &#91; &#93; Uses CSS-based animations (with `animate.enter`\/`animate.leave`) instead of deprecated triggers\n- &#91; &#93; Uses OnPush change detection where appropriate\n- &#91; &#93; Uses signals for reactive state management\n- &#91; &#93; Proper component lifecycle usage\n- &#91; &#93; No direct DOM manipulation (use framework abstractions)\n- &#91; &#93; No inline templates or styles (use separate files)\n\n### 3. Code Quality\n- &#91; &#93; TypeScript strict mode compliance (no `any` types)\n- &#91; &#93; Proper type definitions and interfaces\n- &#91; &#93; Clear, descriptive variable and function names\n- &#91; &#93; Code is DRY (Don't Repeat Yourself)\n- &#91; &#93; Appropriate use of RxJS\/operators\n- &#91; &#93; Proper error handling\n\n### 4. Testing\n- &#91; &#93; Unit tests exist and follow conventions\n- &#91; &#93; Tests use `describe` and `it` (not `test`)\n- &#91; &#93; Tests are structured hierarchically\n- &#91; &#93; Use `data-test` attributes for element queries\n- &#91; &#93; Proper mocking of dependencies\n- &#91; &#93; Tests cover success and failure paths\n- &#91; &#93; 80%+ code coverage maintained\n\n### 5. Accessibility (WCAG 2.1 AA)\n- &#91; &#93; Semantic HTML elements used\n- &#91; &#93; Proper ARIA attributes included\n- &#91; &#93; Keyboard navigation supported\n- &#91; &#93; Focus indicators visible\n- &#91; &#93; Color contrast meets requirements (4.5:1 for normal text, 3:1 for large text)\n- &#91; &#93; All ARIA text supports i18n\n\n### 6. Internationalization (i18n)\n- &#91; &#93; All user-facing text supports translation\n- &#91; &#93; Translation keys are hierarchical (if used)\n- &#91; &#93; No hardcoded user-facing strings\n- &#91; &#93; Library components accept translated text via inputs\/signals, or via translationProviders (populated by the app)\n\n### 7. Styling &amp; Design Tokens\n- &#91; &#93; Uses SCSS with BEM methodology\n- &#91; &#93; Semantic design tokens (not generic wrappers)\n- &#91; &#93; No direct use of design system tokens in CSS rules\n- &#91; &#93; Design tokens describe purpose (e.g., `--component-action-button-color`)\n- &#91; &#93; Density support implemented correctly\n- &#91; &#93; Smooth transitions for density changes\n- &#91; &#93; Theme variables used for consistency\n\n### 8. Density System\n- &#91; &#93; Uses global density factor (e.g., `--density-factor`)\n- &#91; &#93; Calculations in CSS variable definitions only\n- &#91; &#93; Smooth transitions implemented\n- &#91; &#93; Transition duration token defined\n- &#91; &#93; Documented in component README\n- &#91; &#93; Storybook density demonstration included\n\n### 9. Component Structure\n- &#91; &#93; Complete file set (`.ts`, `.html`, `.scss`, `.spec.ts`, `.stories.ts`, `README.md`)\n- &#91; &#93; README documents purpose, usage, props, accessibility, density\n- &#91; &#93; Storybook stories demonstrate key features\n- &#91; &#93; Component published as secondary entry point (for libraries)\n- &#91; &#93; Proper imports from dedicated entry points\n\n### 10. Performance\n- &#91; &#93; Lazy loading used where appropriate\n- &#91; &#93; OnPush change detection for performance\n- &#91; &#93; Minimal template expression complexity\n- &#91; &#93; Proper subscription management\n\n### 11. Security\n- &#91; &#93; No sensitive data in code\n- &#91; &#93; Input sanitization where needed\n- &#91; &#93; Proper authentication\/authorization checks\n- &#91; &#93; No SQL injection or XSS vulnerabilities\n\n### 12. Documentation\n- &#91; &#93; Public APIs have JSDoc comments (libraries only)\n- &#91; &#93; Complex logic has brief explanatory comments\n- &#91; &#93; README files updated if needed\n- &#91; &#93; Component documentation complete\n\n## Review Output Format\n\nProvide your review in the following format:\n\n### \u2705 Strengths\nList what the code does well.\n\n### \u26a0\ufe0f Issues Found\nCategorize issues by severity:\n- **Critical**: Must fix before merge\n- **Major**: Should fix before merge\n- **Minor**: Nice to have improvements\n\n#### \ud83d\udcdd Todo List of Issues\nList all found issues as a markdown todo list for easy tracking. For example:\n```\n- &#91; &#93; Critical: Missing translation keys in fr.json\n- &#91; &#93; Major: Component does not use OnPush change detection\n- &#91; &#93; Minor: Improve variable naming in dashboard.service.ts\n```\n\n### \ud83d\udd27 Specific Recommendations\nProvide actionable suggestions with code examples where helpful.\n\n### \ud83d\udcdd Additional Notes\nAny other observations or suggestions.\n\n## Review Tone\n- Be constructive and respectful\n- Explain the \"why\" behind suggestions\n- Provide examples when possible\n- Focus on learning and improvement\n- Acknowledge good practices<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">#<\/span><span style=\"color: #88C0D0\"> Code Review Instructions<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">You are an expert code reviewer for this project. When asked to perform a code review, follow these comprehensive guidelines:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> Review Checklist<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 1. Architecture &amp; Design<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Follows project architecture patterns<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Components are standalone and properly organized<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Code is in the correct location (apps\/libs)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Dependencies between libraries are appropriate<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Monorepo structure is followed<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">&gt;<\/span><span style=\"color: #616E88\"> \u26a0\ufe0f <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #616E88; font-weight: bold\">Hard rule \u2014 block merge<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">&gt;<\/span><span style=\"color: #616E88\"> No direct or indirect use of translation frameworks (e.g., ngx-translate, TranslateService, TranslatePipe) in publishable libraries. If present, mark as <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #616E88; font-weight: bold\">Critical<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #616E88\"> and block until resolved.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 2. Angular Best Practices<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses standalone components (not NgModules)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses modern control flow syntax (<\/span><span style=\"color: #8FBCBB\">`@if`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`@for`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`@switch`<\/span><span style=\"color: #D8DEE9FF\">) instead of structural directives<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses CSS-based animations (with <\/span><span style=\"color: #8FBCBB\">`animate.enter`<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #8FBCBB\">`animate.leave`<\/span><span style=\"color: #D8DEE9FF\">) instead of deprecated triggers<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses OnPush change detection where appropriate<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses signals for reactive state management<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper component lifecycle usage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No direct DOM manipulation (use framework abstractions)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No inline templates or styles (use separate files)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 3. Code Quality<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; TypeScript strict mode compliance (no <\/span><span style=\"color: #8FBCBB\">`any`<\/span><span style=\"color: #D8DEE9FF\"> types)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper type definitions and interfaces<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Clear, descriptive variable and function names<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Code is DRY (Don&#39;t Repeat Yourself)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Appropriate use of RxJS\/operators<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper error handling<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 4. Testing<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Unit tests exist and follow conventions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Tests use <\/span><span style=\"color: #8FBCBB\">`describe`<\/span><span style=\"color: #D8DEE9FF\"> and <\/span><span style=\"color: #8FBCBB\">`it`<\/span><span style=\"color: #D8DEE9FF\"> (not <\/span><span style=\"color: #8FBCBB\">`test`<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Tests are structured hierarchically<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Use <\/span><span style=\"color: #8FBCBB\">`data-test`<\/span><span style=\"color: #D8DEE9FF\"> attributes for element queries<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper mocking of dependencies<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Tests cover success and failure paths<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; 80%+ code coverage maintained<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 5. Accessibility (WCAG 2.1 AA)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Semantic HTML elements used<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper ARIA attributes included<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Keyboard navigation supported<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Focus indicators visible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Color contrast meets requirements (4.5:1 for normal text, 3:1 for large text)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; All ARIA text supports i18n<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 6. Internationalization (i18n)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; All user-facing text supports translation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Translation keys are hierarchical (if used)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No hardcoded user-facing strings<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Library components accept translated text via inputs\/signals, or via translationProviders (populated by the app)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 7. Styling &amp; Design Tokens<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses SCSS with BEM methodology<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Semantic design tokens (not generic wrappers)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No direct use of design system tokens in CSS rules<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Design tokens describe purpose (e.g., <\/span><span style=\"color: #8FBCBB\">`--component-action-button-color`<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Density support implemented correctly<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Smooth transitions for density changes<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Theme variables used for consistency<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 8. Density System<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Uses global density factor (e.g., <\/span><span style=\"color: #8FBCBB\">`--density-factor`<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Calculations in CSS variable definitions only<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Smooth transitions implemented<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Transition duration token defined<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Documented in component README<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Storybook density demonstration included<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 9. Component Structure<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Complete file set (<\/span><span style=\"color: #8FBCBB\">`.ts`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`.html`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`.scss`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`.spec.ts`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`.stories.ts`<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #8FBCBB\">`README.md`<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; README documents purpose, usage, props, accessibility, density<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Storybook stories demonstrate key features<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Component published as secondary entry point (for libraries)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper imports from dedicated entry points<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 10. Performance<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Lazy loading used where appropriate<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; OnPush change detection for performance<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Minimal template expression complexity<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper subscription management<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 11. Security<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No sensitive data in code<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Input sanitization where needed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Proper authentication\/authorization checks<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; No SQL injection or XSS vulnerabilities<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> 12. Documentation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Public APIs have JSDoc comments (libraries only)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Complex logic has brief explanatory comments<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; README files updated if needed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> &#91; &#93; Component documentation complete<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> Review Output Format<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">Provide your review in the following format:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \u2705 Strengths<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">List what the code does well.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \u26a0\ufe0f Issues Found<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">Categorize issues by severity:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Critical<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Must fix before merge<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Major<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Should fix before merge<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF; font-weight: bold\">Minor<\/span><span style=\"color: #ECEFF4; font-weight: bold\">**<\/span><span style=\"color: #D8DEE9FF\">: Nice to have improvements<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">####<\/span><span style=\"color: #88C0D0\"> \ud83d\udcdd Todo List of Issues<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">List all found issues as a markdown todo list for easy tracking. For example:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #8FBCBB\">```<\/span><\/span>\n<span class=\"line\"><span style=\"color: #8FBCBB\">- &#91; &#93; Critical: Missing translation keys in fr.json<\/span><\/span>\n<span class=\"line\"><span style=\"color: #8FBCBB\">- &#91; &#93; Major: Component does not use OnPush change detection<\/span><\/span>\n<span class=\"line\"><span style=\"color: #8FBCBB\">- &#91; &#93; Minor: Improve variable naming in dashboard.service.ts<\/span><\/span>\n<span class=\"line\"><span style=\"color: #8FBCBB\">```<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \ud83d\udd27 Specific Recommendations<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">Provide actionable suggestions with code examples where helpful.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">###<\/span><span style=\"color: #88C0D0\"> \ud83d\udcdd Additional Notes<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">Any other observations or suggestions.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">##<\/span><span style=\"color: #88C0D0\"> Review Tone<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Be constructive and respectful<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Explain the &quot;why&quot; behind suggestions<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Provide examples when possible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Focus on learning and improvement<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">-<\/span><span style=\"color: #D8DEE9FF\"> Acknowledge good practices<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Happy coding\u2014and happy reviewing!<\/p>\n\n\n\n<p><em>*If you enjoyed this post, let&#8217;s connect! Share your own review tips, workflow improvements, or Copilot experiences in the comments.*<\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how GitHub Copilot instruction files transformed our code review process with actionable examples and step-by-step setup. TL;DR We used GitHub Copilot instruction files to automate repetitive review checks, increase clarity, and improve onboarding. Add a `.github\/copilot-instructions.md` file, define a few project-specific rules, and use Copilot Chat with `@workspace` to get guided, actionable PR feedback [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[5],"tags":[26,42,40,39,28,41],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-architecture","tag-ai","tag-best-practices","tag-code-review","tag-developer-experience","tag-development","tag-productivity"],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image.png",1200,800,false],"thumbnail":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-150x150.png",150,150,true],"medium":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-300x200.png",300,200,true],"medium_large":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-768x512.png",768,512,true],"large":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image-1024x683.png",1024,683,true],"1536x1536":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image.png",1200,800,false],"2048x2048":["https:\/\/marshfire.net\/wp\/wp-content\/uploads\/2025\/11\/image.png",1200,800,false]},"uagb_author_info":{"display_name":"marshfire","author_link":"https:\/\/marshfire.net\/wp\/author\/marshfire\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how GitHub Copilot instruction files transformed our code review process with actionable examples and step-by-step setup. TL;DR We used GitHub Copilot instruction files to automate repetitive review checks, increase clarity, and improve onboarding. Add a `.github\/copilot-instructions.md` file, define a few project-specific rules, and use Copilot Chat with `@workspace` to get guided, actionable PR feedback&hellip;","_links":{"self":[{"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":1,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/posts\/223\/revisions\/225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marshfire.net\/wp\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}