Fix gh skill command to gh skills and update README (#1531)

* Fixing gh skill to be gh skills and adding to the README

* Adding skills install instruction to readme

* Fixing escapes

website/src/scripts/modal.ts

@@ -100,8 +100,8 @@ async function resolveResourceTitle(
     type === "skill"
       ? getCollectionRootPath(filePath, "skills")
       : type === "hook"
-        ? getCollectionRootPath(filePath, "hooks")
-        : filePath.substring(0, filePath.lastIndexOf("/"));
+      ? getCollectionRootPath(filePath, "hooks")
+      : filePath.substring(0, filePath.lastIndexOf("/"));
 
   if (collectionRootPath) {
     const parentItem = data.items.find((i) => i.path === collectionRootPath);
@@ -119,7 +119,10 @@ function isMarkdownFile(filePath: string): boolean {
   return /\.(md|markdown|mdx)$/i.test(filePath);
 }
 
-function getCollectionRootPath(filePath: string, collectionName: string): string | null {
+function getCollectionRootPath(
+  filePath: string,
+  collectionName: string
+): string | null {
   const segments = filePath.split("/");
   const collectionIndex = segments.indexOf(collectionName);
   if (collectionIndex === -1 || segments.length <= collectionIndex + 1) {
@@ -140,7 +143,9 @@ async function getSkillsData(): Promise<SkillsData | null> {
   return skillsCache;
 }
 
-async function getSkillItemByFilePath(filePath: string): Promise<SkillItem | null> {
+async function getSkillItemByFilePath(
+  filePath: string
+): Promise<SkillItem | null> {
   if (getResourceType(filePath) !== "skill") return null;
 
   const skillsData = await getSkillsData();
@@ -285,7 +290,10 @@ function getLanguageForFile(filePath: string): string {
   return "text";
 }
 
-async function renderHighlightedCode(content: string, filePath: string): Promise<void> {
+async function renderHighlightedCode(
+  content: string,
+  filePath: string
+): Promise<void> {
   try {
     const { codeToHtml } = await import("shiki");
     const container = ensureDivContent("modal-code-content");
@@ -306,7 +314,9 @@ async function renderHighlightedCode(content: string, filePath: string): Promise
 function updateViewButtons(): void {
   const renderBtn = document.getElementById("render-btn");
   const rawBtn = document.getElementById("raw-btn");
-  const markdownFile = currentFilePath ? isMarkdownFile(currentFilePath) : false;
+  const markdownFile = currentFilePath
+    ? isMarkdownFile(currentFilePath)
+    : false;
 
   if (!renderBtn || !rawBtn) return;
 
@@ -377,7 +387,9 @@ async function configureSkillFileSwitcher(filePath: string): Promise<void> {
       (file) =>
         `<button type="button" class="modal-file-menu-item${
           file.path === filePath ? " active" : ""
-        }" data-path="${escapeHtml(file.path)}" role="menuitemradio" aria-checked="${
+        }" data-path="${escapeHtml(
+          file.path
+        )}" role="menuitemradio" aria-checked="${
           file.path === filePath ? "true" : "false"
         }">${escapeHtml(file.name)}</button>`
     )
@@ -544,7 +556,7 @@ export function setupModal(): void {
         showToast("Could not resolve skill ID.", "error");
         return;
       }
-      const command = `gh skill install ${REPO_IDENTIFIER} ${skill.id}`;
+      const command = `gh skills install ${REPO_IDENTIFIER} ${skill.id}`;
       const originalContent = installCommandBtn.innerHTML;
       const success = await copyToClipboard(command);
       showToast(
@@ -623,7 +635,9 @@ export function setupModal(): void {
     setFileMenuOpen(Boolean(isOpen));
     if (isOpen) {
       fileMenu
-        ?.querySelector<HTMLElement>(".modal-file-menu-item.active, .modal-file-menu-item")
+        ?.querySelector<HTMLElement>(
+          ".modal-file-menu-item.active, .modal-file-menu-item"
+        )
         ?.focus();
     }
   };

website/src/scripts/pages/skills.ts

@@ -52,7 +52,7 @@ let currentFilters = {
   categories: [] as string[],
   hasAssets: false,
 };
-let currentSort: SkillSortOption = 'title';
+let currentSort: SkillSortOption = "title";
 let resourceListHandlersReady = false;
 
 function sortItems(items: Skill[]): Skill[] {
@@ -155,7 +155,7 @@ async function copyInstallCommand(
   skillId: string,
   btn: HTMLButtonElement
 ): Promise<void> {
-  const command = `gh skill install ${REPO_IDENTIFIER} ${skillId}`;
+  const command = `gh skills install ${REPO_IDENTIFIER} ${skillId}`;
   const originalContent = btn.innerHTML;
   const success = await copyToClipboard(command);
   showToast(
@@ -216,7 +216,9 @@ export async function initSkillsPage(): Promise<void> {
     "filter-has-assets"
   ) as HTMLInputElement;
   const clearFiltersBtn = document.getElementById("clear-filters");
-  const sortSelect = document.getElementById("sort-select") as HTMLSelectElement;
+  const sortSelect = document.getElementById(
+    "sort-select"
+  ) as HTMLSelectElement;
 
   setupResourceListHandlers(list as HTMLElement | null);
 
@@ -290,7 +292,7 @@ export async function initSkillsPage(): Promise<void> {
 
   clearFiltersBtn?.addEventListener("click", () => {
     currentFilters = { categories: [], hasAssets: false };
-    currentSort = 'title';
+    currentSort = "title";
     categorySelect.removeActiveItems();
     if (hasAssetsCheckbox) hasAssetsCheckbox.checked = false;
     if (searchInput) searchInput.value = "";

website/src/scripts/utils.ts

@@ -9,7 +9,7 @@ const REPO_BASE_URL =
 const REPO_GITHUB_URL = "https://github.com/github/awesome-copilot/blob/main";
 
 /**
- * The GitHub repo identifier used for `gh skill install` commands
+ * The GitHub repo identifier used for `gh skills install` commands
  */
 export const REPO_IDENTIFIER = "github/awesome-copilot";