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>
This commit is contained in:
Copilot
2026-04-17 18:52:15 +10:00
committed by GitHub
parent 8ffb353f4a
commit dddab5e459
7 changed files with 108 additions and 2 deletions
@@ -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">
+33
View File
@@ -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