From dddab5e459a65b4f162f33b948e45557fdfea946 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 17 Apr 2026 18:52:15 +1000
Subject: [PATCH] feat: add copy install command from skills list and modal
 (#1424)

* docs: reference gh skill install command for managing agent skills

Agent-Logs-Url: https://github.com/github/awesome-copilot/sessions/e8324f6a-26ee-4d2c-b86f-028cf78499d5

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>

* feat: add copy install command button to skills list and modal

Agent-Logs-Url: https://github.com/github/awesome-copilot/sessions/efbb7ae2-6ff7-40d2-a8fe-45253caea717

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>

* revert: undo changes to 05-skills.md as requested

Agent-Logs-Url: https://github.com/github/awesome-copilot/sessions/ba67c365-f36a-47de-af44-629305b9eb94

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
---
 docs/README.skills.md                      |  3 +-
 eng/constants.mjs                          |  3 +-
 website/src/components/Modal.astro         | 21 +++++++++++++
 website/src/scripts/modal.ts               | 36 ++++++++++++++++++++++
 website/src/scripts/pages/skills-render.ts |  9 ++++++
 website/src/scripts/pages/skills.ts        | 33 ++++++++++++++++++++
 website/src/scripts/utils.ts               |  5 +++
 7 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/docs/README.skills.md b/docs/README.skills.md
index 26affb64..6041106c 100644
--- a/docs/README.skills.md
+++ b/docs/README.skills.md
@@ -21,7 +21,8 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 
 **Usage:**
 - Browse the skills table below to find relevant capabilities
-- Copy the skill folder to your local skills directory
+- Install a skill using the GitHub CLI: `gh skill install github/awesome-copilot <skill-name>` (requires [GitHub CLI v2.90.0+](https://github.blog/changelog/2026-04-16-manage-agent-skills-with-github-cli/))
+- Or copy the skill folder manually to your local skills directory
 - Reference skills in your prompts or let the agent discover them automatically
 
 | Name | Description | Bundled Assets |
diff --git a/eng/constants.mjs b/eng/constants.mjs
index 21a11053..7f1cf724 100644
--- a/eng/constants.mjs
+++ b/eng/constants.mjs
@@ -103,7 +103,8 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 
 **Usage:**
 - Browse the skills table below to find relevant capabilities
-- Copy the skill folder to your local skills directory
+- Install a skill using the GitHub CLI: \`gh skill install github/awesome-copilot <skill-name>\` (requires [GitHub CLI v2.90.0+](https://github.blog/changelog/2026-04-16-manage-agent-skills-with-github-cli/))
+- Or copy the skill folder manually to your local skills directory
 - Reference skills in your prompts or let the agent discover them automatically`,
 
   hooksSection: `## 🪝 Hooks
diff --git a/website/src/components/Modal.astro b/website/src/components/Modal.astro
index 59c401bd..82b2e395 100644
--- a/website/src/components/Modal.astro
+++ b/website/src/components/Modal.astro
@@ -50,6 +50,27 @@
               <div id="modal-file-menu" class="modal-file-menu" role="menu"></div>
             </div>
           </div>
+          <button
+            id="install-command-btn"
+            class="btn btn-secondary hidden"
+            aria-label="Copy install command"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
+              ></path>
+              <path
+                d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+              ></path>
+            </svg>
+            <span aria-hidden="true">Copy Install</span>
+          </button>
           <button
             id="raw-btn"
             class="btn btn-secondary hidden"
diff --git a/website/src/scripts/modal.ts b/website/src/scripts/modal.ts
index e29df3da..5472d61b 100644
--- a/website/src/scripts/modal.ts
+++ b/website/src/scripts/modal.ts
@@ -16,6 +16,7 @@ import {
   escapeHtml,
   getResourceIconSvg,
   sanitizeUrl,
+  REPO_IDENTIFIER,
 } from "./utils";
 import fm from "front-matter";
 
@@ -498,6 +499,7 @@ export function setupModal(): void {
 
   const closeBtn = document.getElementById("close-modal");
   const copyBtn = document.getElementById("copy-btn");
+  const installCommandBtn = document.getElementById("install-command-btn");
   const downloadBtn = document.getElementById("download-btn");
   const shareBtn = document.getElementById("share-btn");
   const renderBtn = document.getElementById("render-btn");
@@ -535,6 +537,30 @@ export function setupModal(): void {
     }
   });
 
+  installCommandBtn?.addEventListener("click", async () => {
+    if (currentFilePath && currentFileType === "skill") {
+      const skill = await getSkillItemByFilePath(currentFilePath);
+      if (!skill) {
+        showToast("Could not resolve skill ID.", "error");
+        return;
+      }
+      const command = `gh skill install ${REPO_IDENTIFIER} ${skill.id}`;
+      const originalContent = installCommandBtn.innerHTML;
+      const success = await copyToClipboard(command);
+      showToast(
+        success ? "Install command copied!" : "Failed to copy",
+        success ? "success" : "error"
+      );
+      if (success) {
+        installCommandBtn.innerHTML =
+          '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z"/></svg><span aria-hidden="true">Copied!</span>';
+        setTimeout(() => {
+          installCommandBtn.innerHTML = originalContent;
+        }, 2000);
+      }
+    }
+  });
+
   downloadBtn?.addEventListener("click", async () => {
     if (currentFilePath) {
       if (currentFileType === "skill") {
@@ -849,6 +875,7 @@ export async function openFileModal(
     "install-insiders"
   ) as HTMLAnchorElement | null;
   const copyBtn = document.getElementById("copy-btn");
+  const installCommandBtn = document.getElementById("install-command-btn");
   const downloadBtn = document.getElementById("download-btn");
   const closeBtn = document.getElementById("close-modal");
   if (!modal || !title) return;
@@ -885,6 +912,10 @@ export async function openFileModal(
   if (type === "plugin") {
     const modalContent = getModalContent();
     if (!modalContent) return;
+    if (installCommandBtn) {
+      installCommandBtn.style.display = "none";
+      installCommandBtn.classList.add("hidden");
+    }
     hideSkillFileSwitcher();
     await openPluginModal(
       filePath,
@@ -906,6 +937,11 @@ export async function openFileModal(
       type === "skill" ? "Download skill as ZIP" : "Download file"
     );
   }
+  // Show copy install button only for skills
+  if (installCommandBtn) {
+    installCommandBtn.style.display = type === "skill" ? "inline-flex" : "none";
+    installCommandBtn.classList.toggle("hidden", type !== "skill");
+  }
   renderPlainText("Loading...");
   hideSkillFileSwitcher();
   updateViewButtons();
diff --git a/website/src/scripts/pages/skills-render.ts b/website/src/scripts/pages/skills-render.ts
index ce87e7d2..cdc57beb 100644
--- a/website/src/scripts/pages/skills-render.ts
+++ b/website/src/scripts/pages/skills-render.ts
@@ -93,6 +93,15 @@ export function renderSkillsHtml(
             </div>
           </button>
           <div class="resource-actions">
+            <button class="btn btn-secondary copy-install-btn" data-skill-id="${escapeHtml(
+              item.id
+            )}" title="Copy install command">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>
+                <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>
+              </svg>
+              Copy Install
+            </button>
             <button class="btn btn-primary download-skill-btn" data-skill-id="${escapeHtml(
               item.id
             )}" title="Download as ZIP">
diff --git a/website/src/scripts/pages/skills.ts b/website/src/scripts/pages/skills.ts
index 40017b4e..12a6fd9f 100644
--- a/website/src/scripts/pages/skills.ts
+++ b/website/src/scripts/pages/skills.ts
@@ -17,6 +17,8 @@ import {
   showToast,
   downloadZipBundle,
   updateQueryParams,
+  copyToClipboard,
+  REPO_IDENTIFIER,
 } from "../utils";
 import { setupModal, openFileModal } from "../modal";
 import {
@@ -109,6 +111,17 @@ function setupResourceListHandlers(list: HTMLElement | null): void {
 
   list.addEventListener("click", (event) => {
     const target = event.target as HTMLElement;
+
+    const copyInstallButton = target.closest(
+      ".copy-install-btn"
+    ) as HTMLButtonElement | null;
+    if (copyInstallButton) {
+      event.stopPropagation();
+      const skillId = copyInstallButton.dataset.skillId;
+      if (skillId) copyInstallCommand(skillId, copyInstallButton);
+      return;
+    }
+
     const downloadButton = target.closest(
       ".download-skill-btn"
     ) as HTMLButtonElement | null;
@@ -138,6 +151,26 @@ function syncUrlState(searchInput: HTMLInputElement | null): void {
   });
 }
 
+async function copyInstallCommand(
+  skillId: string,
+  btn: HTMLButtonElement
+): Promise<void> {
+  const command = `gh skill install ${REPO_IDENTIFIER} ${skillId}`;
+  const originalContent = btn.innerHTML;
+  const success = await copyToClipboard(command);
+  showToast(
+    success ? "Install command copied!" : "Failed to copy",
+    success ? "success" : "error"
+  );
+  if (success) {
+    btn.innerHTML =
+      '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z"/></svg> Copied!';
+    setTimeout(() => {
+      btn.innerHTML = originalContent;
+    }, 2000);
+  }
+}
+
 async function downloadSkill(
   skillId: string,
   btn: HTMLButtonElement
diff --git a/website/src/scripts/utils.ts b/website/src/scripts/utils.ts
index 5d8c5af1..991466ae 100644
--- a/website/src/scripts/utils.ts
+++ b/website/src/scripts/utils.ts
@@ -8,6 +8,11 @@ const REPO_BASE_URL =
   "https://raw.githubusercontent.com/github/awesome-copilot/main";
 const REPO_GITHUB_URL = "https://github.com/github/awesome-copilot/blob/main";
 
+/**
+ * The GitHub repo identifier used for `gh skill install` commands
+ */
+export const REPO_IDENTIFIER = "github/awesome-copilot";
+
 // VS Code install URL configurations
 const VSCODE_INSTALL_CONFIG: Record<
   string,