<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link rel="stylesheet" href="/assets/css/just-the-docs-default.css">
  <link rel="stylesheet" href="/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
  
  
  <script src="/assets/js/vendor/lunr.min.js"></script>
  
  <script src="/assets/js/just-the-docs.js"></script>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Agents in the SDLC | Learn how to leverage GitHub Copilot agents across the software development lifecycle</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Agents in the SDLC" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Learn how to leverage GitHub Copilot agents across the software development lifecycle" />
<meta property="og:description" content="Learn how to leverage GitHub Copilot agents across the software development lifecycle" />
<link rel="canonical" href="https://connect.copilot-workshops.com/assets/css/just-the-docs-head-nav.css" />
<meta property="og:url" content="https://connect.copilot-workshops.com/assets/css/just-the-docs-head-nav.css" />
<meta property="og:site_name" content="Agents in the SDLC" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Agents in the SDLC" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"Learn how to leverage GitHub Copilot agents across the software development lifecycle","headline":"Agents in the SDLC","url":"https://connect.copilot-workshops.com/assets/css/just-the-docs-head-nav.css"}</script>
<!-- End Jekyll SEO tag -->

  
  <style>
/* Theme toggle button - positioned top-right for visibility */
#theme-toggle-btn {
  position: fixed !important;
  top: 16px !important;
  right: 24px !important;
  z-index: 999999 !important;
  background-color: #7253ed !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#theme-toggle-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Light theme overrides for just-the-docs */
[data-theme="light"] body,
[data-theme="light"] .main,
[data-theme="light"] .main-content-wrap {
  background-color: #fff !important;
  color: #27262b !important;
}

[data-theme="light"] .side-bar {
  background-color: #f5f6fa !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .main-content,
[data-theme="light"] .site-nav,
[data-theme="light"] .site-header,
[data-theme="light"] .site-footer {
  background-color: #f5f6fa !important;
  color: #27262b !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .site-title,
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] blockquote {
  color: #27262b !important;
}

[data-theme="light"] a {
  color: #7253ed !important;
}

[data-theme="light"] .nav-list-link,
[data-theme="light"] .nav-list-item {
  color: #27262b !important;
}

[data-theme="light"] .nav-list-link:hover,
[data-theme="light"] .nav-list-link.active {
  background-color: #e8e8e8 !important;
}

/* Navigation specific fixes */
[data-theme="light"] .site-nav,
[data-theme="light"] .site-nav *,
[data-theme="light"] .nav-list,
[data-theme="light"] .nav-list *,
[data-theme="light"] .nav-list-item,
[data-theme="light"] .nav-list-link,
[data-theme="light"] .site-nav ul,
[data-theme="light"] .site-nav li,
[data-theme="light"] .site-nav a {
  color: #27262b !important;
  background-color: transparent !important;
  background-image: none !important;
}

[data-theme="light"] .side-bar *:not(#theme-toggle-btn) {
  color: #27262b !important;
}

[data-theme="light"] .side-bar a {
  color: #7253ed !important;
}

[data-theme="light"] .nav-list-link:hover {
  background-color: #e8e8e8 !important;
}

[data-theme="light"] .nav-list-expander,
[data-theme="light"] .nav-list-expander svg {
  color: #27262b !important;
}

[data-theme="light"] .breadcrumb-nav,
[data-theme="light"] .breadcrumb-nav-list,
[data-theme="light"] .breadcrumb-nav-list-item {
  color: #27262b !important;
}

[data-theme="light"] .search-input {
  background-color: #fff !important;
  color: #27262b !important;
  border-color: #ddd !important;
}

[data-theme="light"] .search-results {
  background-color: #fff !important;
  color: #27262b !important;
}

[data-theme="light"] code {
  background-color: #f0f0f0 !important;
  color: #27262b !important;
}

[data-theme="light"] pre {
  background-color: #f5f5f5 !important;
}

/* Code highlighting fixes */
[data-theme="light"] .highlight,
[data-theme="light"] .highlighter-rouge,
[data-theme="light"] .language-plaintext,
[data-theme="light"] .language-markdown,
[data-theme="light"] .language-yaml,
[data-theme="light"] .language-json,
[data-theme="light"] .language-bash,
[data-theme="light"] .language-shell,
[data-theme="light"] .language-javascript,
[data-theme="light"] .language-python {
  background-color: #f5f5f5 !important;
}

[data-theme="light"] .highlight pre,
[data-theme="light"] .highlighter-rouge pre,
[data-theme="light"] .highlight code,
[data-theme="light"] .highlighter-rouge code,
[data-theme="light"] pre code,
[data-theme="light"] pre.highlight {
  background-color: #f5f5f5 !important;
  color: #27262b !important;
}

[data-theme="light"] .highlight pre code,
[data-theme="light"] .highlighter-rouge pre code {
  color: #27262b !important;
}

/* Rouge syntax highlighting for light theme */
[data-theme="light"] .highlight .k,
[data-theme="light"] .highlight .kd,
[data-theme="light"] .highlight .kn,
[data-theme="light"] .highlight .kp,
[data-theme="light"] .highlight .kr,
[data-theme="light"] .highlight .kt {
  color: #d73a49 !important;
}

[data-theme="light"] .highlight .s,
[data-theme="light"] .highlight .s1,
[data-theme="light"] .highlight .s2,
[data-theme="light"] .highlight .se {
  color: #032f62 !important;
}

[data-theme="light"] .highlight .c,
[data-theme="light"] .highlight .c1,
[data-theme="light"] .highlight .cm {
  color: #6a737d !important;
}

[data-theme="light"] .highlight .n,
[data-theme="light"] .highlight .na,
[data-theme="light"] .highlight .nb,
[data-theme="light"] .highlight .nc,
[data-theme="light"] .highlight .nf,
[data-theme="light"] .highlight .nn,
[data-theme="light"] .highlight .nv {
  color: #005cc5 !important;
}

[data-theme="light"] .main-header {
  background-color: #fff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] table,
[data-theme="light"] .table-wrapper {
  background-color: #fff !important;
}

/* Table specific fixes */
[data-theme="light"] table thead,
[data-theme="light"] table tbody,
[data-theme="light"] table tr {
  background-color: #fff !important;
}

[data-theme="light"] table th {
  background-color: #f5f6fa !important;
  color: #27262b !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] table td {
  background-color: #fff !important;
  color: #27262b !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] table td a {
  color: #7253ed !important;
}

[data-theme="light"] table th,
[data-theme="light"] table td {
  border-color: #e0e0e0 !important;
}

[data-theme="light"] hr {
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .anchor-heading {
  color: #7253ed !important;
}

[data-theme="light"] #theme-toggle-btn {
  background: #27262b !important;
}

@media (max-width: 800px) {
  #theme-toggle-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
  }
}

/* ===== Hero Banner ===== */
.hero-banner {
  background: linear-gradient(135deg, #7253ed 0%, #4a90d9 100%);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.hero-banner h1 {
  color: #fff !important;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
}

.hero-banner p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
}

.hero-cta {
  display: inline-block;
  background: #fff;
  color: #27262b !important;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #27262b !important;
  text-decoration: none !important;
}

[data-theme="light"] .hero-banner {
  background: linear-gradient(135deg, #7253ed 0%, #4a90d9 100%);
}

@media (max-width: 600px) {
  .hero-banner {
    padding: 2rem 1.25rem;
  }
  .hero-banner h1 {
    font-size: 1.75rem;
  }
  .hero-banner p {
    font-size: 1rem;
  }
}

/* ===== Exercise Card Grid ===== */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.exercise-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid #3a3a4a;
  border-radius: 10px;
  background: #2a2a3a;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  color: inherit !important;
}

.exercise-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
}

.exercise-card .card-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.exercise-card .card-body {
  flex: 1;
  min-width: 0;
}

.exercise-card .card-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
  display: inline;
}

.exercise-card .card-badge {
  display: inline-block;
  background: #22863a;
  color: #fff !important;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.exercise-card .card-desc {
  color: #a0a0b0;
  font-size: 0.875rem;
  margin: 0.35rem 0 0 0;
  line-height: 1.4;
}

/* Light mode cards */
[data-theme="light"] .exercise-card {
  background: #fff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .exercise-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .exercise-card .card-title {
  color: #27262b !important;
}

[data-theme="light"] .exercise-card .card-desc {
  color: #57606a !important;
}

@media (max-width: 700px) {
  .exercise-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
// Apply saved theme immediately to prevent flash
(function() {
  var savedTheme = localStorage.getItem('theme') || 'dark';
  document.documentElement.setAttribute('data-theme', savedTheme);
})();
</script>

</head>
<body>
  <!-- Theme Toggle Button - Embedded directly in body -->
  <button id="theme-toggle-btn" class="theme-toggle" aria-label="Toggle dark/light mode" type="button">☀</button>
  
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
    <title>Link</title>
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
  </symbol>
  <symbol id="svg-menu" viewBox="0 0 24 24">
    <title>Menu</title>
    <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
    <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
    <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
  </symbol>
  <symbol id="svg-search" viewBox="0 0 24 24">
    <title>Search</title>
    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
  </symbol>
</svg>

  
  <header class="side-bar">
    <div class="site-header">
      <a href="/" class="site-title lh-tight">
        Agents in the SDLC
      </a>
      <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
        <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
      </button>
    </div>
    <nav aria-label="Main" id="site-nav" class="site-nav">
      <ul class="nav-list">
  
  
    
      
    <li class="nav-list-item">
      <a href="/" class="nav-list-link">
        Home
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/0-prereqs.html" class="nav-list-link">
        Exercise 0: Prerequisites
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/1-copilot-coding-agent.html" class="nav-list-link">
        Exercise 1 - GitHub Copilot coding agent
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/2-mcp.html" class="nav-list-link">
        Exercise 2 - Setting up the backlog with Copilot agent mode and GitHub’s MCP Server
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/3-custom-instructions.html" class="nav-list-link">
        Exercise 3 - Providing context to Copilot with instruction files
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/4-copilot-agent-mode-vscode.html" class="nav-list-link">
        Exercise 4 - Adding new functionality with Copilot Agent Mode
      </a>
    </li>
      
    
  
    
      
    <li class="nav-list-item">
      <a href="/5-reviewing-coding-agent.html" class="nav-list-link">
        Exercise 5: Review GitHub Copilot coding agent’s work
      </a>
    </li>
      
    
  
</ul>

    </nav>
    <div class="d-md-block d-none site-footer">
      This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
    </div>
  </header>
  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
      
      <div class="search" role="search">
        <div class="search-input-wrap">
          <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Agents in the SDLC" autocomplete="off">
          <label for="search-input" class="search-label">
            <span class="sr-only">Search Agents in the SDLC</span>
            <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
          </label>
        </div>
        <div id="search-results" class="search-results"></div>
      </div>
      
    </div>
    <div class="main-content-wrap">
      <div id="main-content" class="main-content">
        <main>
          

        </main>
        <hr>
        <footer>
          <div class="d-md-none mt-4 fs-2">
            This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
          </div>
        </footer>
      </div>
    </div>
    <div class="search-overlay"></div>
  </div>
  
  <script>
    // Theme toggle functionality
    (function() {
      var btn = document.getElementById('theme-toggle-btn');
      if (!btn) return; // Early exit if button doesn't exist
      
      var savedTheme = localStorage.getItem('theme') || document.documentElement.getAttribute('data-theme') || 'dark';
      
      // Update button appearance and aria-label based on current theme
      function updateButton(theme) {
        btn.textContent = theme === 'dark' ? '☀' : '☽';
        btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
        btn.setAttribute('aria-pressed', 'false');
      }
      
      // Initialize button with current theme
      updateButton(savedTheme);
      
      btn.addEventListener('click', function() {
        var currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
        var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        updateButton(newTheme);
      });
    })();
  </script>
</body>
</html>
