✦ StealThis .dev
Plugins Easy

Awesome GitHub Copilot — Plugins, Agents & Skills

Community directory of GitHub Copilot custom chat modes, agents, instructions and skills that developers can browse and copy into their projects.

markdown
Targets: HTML

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awesome GitHub Copilot — Directory Card</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
  :root {
    --bg: #0b0f17;
    --surface: #141a26;
    --surface-2: #1b2333;
    --text: #e6edf6;
    --muted: #8b97a8;
    --accent: #6ea8fe;
    --border: rgba(255, 255, 255, 0.08);
    --radius: 16px;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(110, 168, 254, 0.12), transparent 60%),
      var(--bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
  }

  .card {
    width: 100%;
    max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 20px 50px -20px rgba(0, 0, 0, 0.7);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(110, 168, 254, 0.1);
    border: 1px solid rgba(110, 168, 254, 0.25);
    padding: 5px 12px;
    border-radius: 999px;
  }

  h1 {
    margin: 16px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .desc {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 1rem;
  }

  .section-label {
    margin: 28px 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  pre {
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    overflow-x: auto;
  }

  pre + pre {
    margin-top: 10px;
  }

  code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text);
  }

  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .pill {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 999px;
  }

  .actions {
    margin-top: 28px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: #0b0f17;
    background: var(--accent);
    padding: 13px 20px;
    border-radius: 12px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }

  .btn:hover {
    background: #87b8ff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(110, 168, 254, 0.8);
  }

  .btn:focus-visible {
    outline: 3px solid rgba(110, 168, 254, 0.6);
    outline-offset: 3px;
  }

  .meta {
    margin-top: 18px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
  }

  .meta a {
    color: var(--accent);
    text-decoration: none;
  }

  .meta a:hover {
    text-decoration: underline;
  }

  @media (max-width: 480px) {
    .card {
      padding: 24px;
    }
    h1 {
      font-size: 1.35rem;
    }
  }
</style>
</head>
<body>
  <main class="card">
    <span class="eyebrow">GitHub Copilot · Ecosystem</span>
    <h1>Awesome GitHub Copilot — Plugins, Agents &amp; Skills</h1>
    <p class="desc">
      A community-curated directory of reusable GitHub Copilot chat modes, agents, custom
      instructions, and skills — browse the catalog and copy what fits into your project.
    </p>

    <h2 class="section-label">How to access</h2>
    <pre><code># Browse the directory
https://awesome-copilot.github.com/tools/</code></pre>
    <pre><code># Drop a customization into your repo
.github/copilot-instructions.md     # custom instructions
.github/chatmodes/*.chatmode.md     # chat modes
.github/prompts/*.prompt.md         # agents &amp; prompts</code></pre>

    <h2 class="section-label">Compatible with</h2>
    <div class="pills">
      <span class="pill">GitHub Copilot</span>
      <span class="pill">VS Code</span>
      <span class="pill">Copilot Chat</span>
      <span class="pill">MCP</span>
    </div>

    <div class="actions">
      <a
        class="btn"
        href="https://awesome-copilot.github.com/tools/"
        target="_blank"
        rel="noopener"
      >
        Open the directory →
      </a>
    </div>

    <p class="meta">
      Maintained by the <a href="https://awesome-copilot.github.com/tools/" target="_blank" rel="noopener">GitHub community</a>
    </p>
  </main>
</body>
</html>

What it is

Awesome GitHub Copilot is a community-curated directory of ready-to-use customizations for GitHub Copilot. It collects reusable chat modes, agents, custom instructions, and skills that extend how Copilot behaves inside VS Code and other editors. Instead of starting from a blank prompt, you browse the catalog, find a tailored configuration, and drop it into your repository or editor settings.

How to access / install

Browse the directory in your browser:

https://awesome-copilot.github.com/tools/

Most entries are plain Markdown files you copy into your project. Typical patterns:

  • Save a custom instructions file as .github/copilot-instructions.md in your repo.
  • Add a chat mode as a *.chatmode.md file under .github/chatmodes/.
  • Add an agent / prompt as a *.prompt.md file and invoke it from Copilot Chat.

After committing these files, GitHub Copilot picks them up automatically the next time it loads your workspace.

Good for

  • Teams that want a shared, version-controlled set of Copilot behaviors.
  • Developers looking for proven prompts, agents, and skills without writing them from scratch.
  • Standardizing review, refactor, testing, or documentation workflows across a codebase.