From b1cb88d9b826ac9a4098f6fa36fd37d4c580b819 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:04:18 +0530
Subject: [PATCH 01/21] fix(a11y): make buttons always visible | fix(ui): make
 borders visible

---
 app/components/Terminal/Execute.vue | 2 +-
 app/components/Terminal/Install.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 0484ef6466..19de1bcec2 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 5fe249ea0a..c51fb9b509 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -185,7 +185,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               {{ runCopied ? $t('common.copied') : $t('common.copy') }}
@@ -230,7 +230,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >

From 5cf068cfbb41dd2c246fa4ce4d1ecf3876b78a27 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:04:58 +0530
Subject: [PATCH 02/21] test: update tests for copy command

---
 test/e2e/create-command.spec.ts | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 15f00ee4ce..07dd1d16d8 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -62,7 +62,7 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Copy Functionality', () => {
-    test('hovering create command shows copy button', async ({ page, goto }) => {
+    test('copy button is always visible', async ({ page, goto }) => {
       await goto('/package/vite', { waitUntil: 'hydration' })
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
@@ -75,14 +75,8 @@ test.describe('Create Command', () => {
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
-      // Copy button should initially be hidden (opacity-0)
+      // Copy button should always be visible
       const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await createCommandContainer.hover()
-
-      // Copy button should become visible
       await expect(copyButton).toHaveCSS('opacity', '1')
     })
 
@@ -104,9 +98,6 @@ test.describe('Create Command', () => {
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
-      await createCommandContainer.hover()
-
-      // Click the copy button
       const copyButton = createCommandContainer.locator('button')
       await copyButton.click()
 
@@ -123,21 +114,15 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Install Command Copy', () => {
-    test('hovering install command shows copy button', async ({ page, goto }) => {
+    test('copy button is always visible', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })
 
       // Find the install command container
       const installCommandContainer = page.locator('.group\\/installcmd').first()
       await expect(installCommandContainer).toBeVisible()
 
-      // Copy button should initially be hidden
+      // Copy button should always be visible
       const copyButton = installCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await installCommandContainer.hover()
-
-      // Copy button should become visible
       await expect(copyButton).toHaveCSS('opacity', '1')
     })
 
@@ -151,11 +136,7 @@ test.describe('Create Command', () => {
 
       await goto('/package/is-odd', { waitUntil: 'hydration' })
 
-      // Find and hover over the install command container
       const installCommandContainer = page.locator('.group\\/installcmd').first()
-      await installCommandContainer.hover()
-
-      // Click the copy button
       const copyButton = installCommandContainer.locator('button')
       await copyButton.click()
 

From 2b3481a8b85ab42bccfcdc5fb6c9a2bee77e32d4 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:10:25 +0530
Subject: [PATCH 03/21] test: add missing run command tests

---
 test/e2e/create-command.spec.ts | 52 +++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 07dd1d16d8..ad9e6721d0 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -151,4 +151,56 @@ test.describe('Create Command', () => {
       await expect(copyButton).not.toContainText(/copied/i)
     })
   })
+
+  test.describe('Run Command Copy', () => {
+    test('copy button is always visible', async ({ page, goto }) => {
+      await goto('/package/vite', { waitUntil: 'hydration' })
+
+      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
+
+      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
+        timeout: 15000,
+      })
+
+      // Find the run command container
+      const runCommandContainer = page.locator('.group\\/runcmd').first()
+      await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
+
+      // Copy button should always be visible
+      const copyButton = runCommandContainer.locator('button')
+      await expect(copyButton).toHaveCSS('opacity', '1')
+    })
+
+    test('clicking copy button copies run command and shows confirmation', async ({
+      page,
+      goto,
+      context,
+    }) => {
+      // Grant clipboard permissions
+      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+
+      await goto('/package/vite', { waitUntil: 'hydration' })
+      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
+
+      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
+        timeout: 15000,
+      })
+
+      const runCommandContainer = page.locator('.group\\/runcmd').first()
+      await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
+
+      const copyButton = runCommandContainer.locator('button')
+      await copyButton.click()
+
+      // Button text should change to "copied!"
+      await expect(copyButton).toContainText(/copied/i)
+
+      // Verify clipboard content contains the run command
+      const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
+      expect(clipboardContent).toMatch(/vite|npx vite/i)
+
+      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
+      await expect(copyButton).not.toContainText(/copied/i)
+    })
+  })
 })

From 8c8cefade5227b40970e89aa7f00f49c2230251d Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 14:00:37 +0530
Subject: [PATCH 04/21] fix(a11y): make copy button always visible

---
 app/components/Package/SkillsModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 8261e378b1..cd083b54a4 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >

From 97c7c56eb01d617da29f127f5fc93a0b9290872d Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 14:06:59 +0530
Subject: [PATCH 05/21] fix(test): exact match the npx command

---
 test/e2e/create-command.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index ad9e6721d0..7b7163fede 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -197,7 +197,7 @@ test.describe('Create Command', () => {
 
       // Verify clipboard content contains the run command
       const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
-      expect(clipboardContent).toMatch(/vite|npx vite/i)
+      expect(clipboardContent).toMatch(/npx vite/i)
 
       await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
       await expect(copyButton).not.toContainText(/copied/i)

From dd5e281daec89807aca3f7bb05616d87f5a62c30 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Sun, 8 Feb 2026 17:04:10 +0530
Subject: [PATCH 06/21] style: use checkmark and copy icons to be consistent

---
 app/components/Package/SkillsModal.vue |  6 +++++-
 app/components/Terminal/Execute.vue    |  8 ++++++--
 app/components/Terminal/Install.vue    | 26 ++++++++++++++++++--------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index cd083b54a4..99118f69de 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -137,7 +137,11 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
+            <span
+              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
       </div>
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 19de1bcec2..81571225b3 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,11 +70,15 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
-            {{ executeCopied ? $t('common.copied') : $t('common.copy') }}
+            <span
+              :class="executeCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
       </div>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index c51fb9b509..a1aa22b4b0 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,11 +123,15 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
+            <span
+              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
 
@@ -185,10 +189,14 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
-              {{ runCopied ? $t('common.copied') : $t('common.copy') }}
+              <span
+                :class="runCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="size-4 inline-block"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </template>
@@ -230,13 +238,15 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
-              <span aria-live="polite">{{
-                createCopied ? $t('common.copied') : $t('common.copy')
-              }}</span>
+              <span
+                :class="createCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="size-4 inline-block"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </template>

From 1209f1989411ec6e5ef4b71171e5a73f648640f9 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 10 Feb 2026 10:04:40 +0530
Subject: [PATCH 07/21] fix: add arial lable to run locally command

---
 app/components/Terminal/Install.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 237ff8110f..85625ed126 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -192,6 +192,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             <button
               type="button"
               class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              :aria-label="$t('package.run.locally')"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               <span

From ea5b4dbd62d5078ca192f54d1aaccc80d42cd06a Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Wed, 11 Mar 2026 23:08:13 +0530
Subject: [PATCH 08/21] feat:a11y: hide and show on hower only for devices that
 support it and keep them always available for assitive technologies

---
 app/components/Package/SkillsModal.vue |  2 +-
 app/components/Terminal/Execute.vue    |  2 +-
 app/components/Terminal/Install.vue    | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index c83a5b0e45..ad81aa5c5e 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 81571225b3..c67afa28c1 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 87f3f5f922..025b683e3b 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -153,7 +153,7 @@ const copyDevInstallCommand = () =>
           >
           <button
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -190,7 +190,7 @@ const copyDevInstallCommand = () =>
             <ButtonBase
               type="button"
               size="small"
-              class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:not-focus:sr-only active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
               @click.stop="copyDevInstallCommand"
             >
@@ -255,8 +255,8 @@ const copyDevInstallCommand = () =>
             >
             <button
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
-              :aria-label="$t('package.run.locally')"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+              :aria-label="$t('package.run.copy_command')"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               <span
@@ -305,7 +305,7 @@ const copyDevInstallCommand = () =>
             >
             <button
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >

From 4730c57a3b983c8c5ee7fa0ec5a41eca53af8bc0 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Wed, 11 Mar 2026 23:08:55 +0530
Subject: [PATCH 09/21] feat: improve command text

---
 i18n/locales/en.json |  6 +++++-
 i18n/schema.json     | 12 ++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c187265c73..4635ec06ed 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -320,7 +320,11 @@
     },
     "run": {
       "title": "Run",
-      "locally": "Run locally"
+      "locally": "Run locally",
+      "copy_command": "Copy command to run locally"
+    },
+    "command": {
+      "copied": "Command copied"
     },
     "readme": {
       "title": "Readme",
diff --git a/i18n/schema.json b/i18n/schema.json
index 1ee624a990..660af20c95 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -966,6 +966,18 @@
             },
             "locally": {
               "type": "string"
+            },
+            "copy_command": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "command": {
+          "type": "object",
+          "properties": {
+            "copied": {
+              "type": "string"
             }
           },
           "additionalProperties": false

From 9831bf9e428e6d58a4bb398756e2417e67e7b302 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Wed, 11 Mar 2026 23:09:02 +0530
Subject: [PATCH 10/21] test: update tests

---
 test/e2e/create-command.spec.ts | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 7b7163fede..d541407f7d 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -62,7 +62,7 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Copy Functionality', () => {
-    test('copy button is always visible', async ({ page, goto }) => {
+    test('copy button is accessible and keyboard discoverable', async ({ page, goto }) => {
       await goto('/package/vite', { waitUntil: 'hydration' })
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
@@ -75,9 +75,13 @@ test.describe('Create Command', () => {
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
-      // Copy button should always be visible
+      // Copy button should be in the DOM and accessible to screen readers
       const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '1')
+      await expect(copyButton).toBeAttached()
+
+      // Focus the button to verify it's keyboard accessible
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
     })
 
     test('clicking copy button copies create command and shows confirmation', async ({
@@ -114,16 +118,20 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Install Command Copy', () => {
-    test('copy button is always visible', async ({ page, goto }) => {
+    test('copy button is accessible and keyboard discoverable', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })
 
       // Find the install command container
       const installCommandContainer = page.locator('.group\\/installcmd').first()
       await expect(installCommandContainer).toBeVisible()
 
-      // Copy button should always be visible
+      // Copy button should be in the DOM and accessible to screen readers
       const copyButton = installCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '1')
+      await expect(copyButton).toBeAttached()
+
+      // Focus the button to verify it's keyboard accessible
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
     })
 
     test('clicking copy button copies install command and shows confirmation', async ({
@@ -153,7 +161,7 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Run Command Copy', () => {
-    test('copy button is always visible', async ({ page, goto }) => {
+    test('copy button is accessible and keyboard discoverable', async ({ page, goto }) => {
       await goto('/package/vite', { waitUntil: 'hydration' })
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
@@ -166,9 +174,13 @@ test.describe('Create Command', () => {
       const runCommandContainer = page.locator('.group\\/runcmd').first()
       await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
 
-      // Copy button should always be visible
+      // Copy button should be in the DOM and accessible to screen readers
       const copyButton = runCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '1')
+      await expect(copyButton).toBeAttached()
+
+      // Focus the button to verify it's keyboard accessible
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
     })
 
     test('clicking copy button copies run command and shows confirmation', async ({

From beee5a935998d7928df1dc6ef5b05d90a3d79734 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 12 Mar 2026 09:52:24 +0530
Subject: [PATCH 11/21] style: use lucide icons | fix: css for sr

---
 app/components/Package/SkillsModal.vue |  4 ++--
 app/components/Terminal/Execute.vue    |  4 ++--
 app/components/Terminal/Install.vue    | 27 +++++++++++++-------------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index ad81aa5c5e..367009aa48 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -133,12 +133,12 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
             <span
-              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
               class="size-4 inline-block"
               aria-hidden="true"
             />
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index c67afa28c1..b1c0d4453e 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,12 +70,12 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
             <span
-              :class="executeCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              :class="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               class="size-4 inline-block"
               aria-hidden="true"
             />
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 025b683e3b..921340c237 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -153,12 +153,12 @@ const copyDevInstallCommand = () =>
           >
           <button
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
             <span
-              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
               class="size-4 inline-block"
               aria-hidden="true"
             />
@@ -187,17 +187,18 @@ const copyDevInstallCommand = () =>
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <ButtonBase
+            <button
               type="button"
-              size="small"
-              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:not-focus:sr-only active:scale-95 focus-visible:opacity-100 select-none"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
               :aria-label="$t('package.get_started.copy_dev_command')"
               @click.stop="copyDevInstallCommand"
             >
-              <span aria-live="polite">{{
-                devInstallCopied ? $t('common.copied') : $t('common.copy')
-              }}</span>
-            </ButtonBase>
+              <span
+                :class="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
+                class="size-4 inline-block"
+                aria-hidden="true"
+              />
+            </button>
           </div>
         </template>
 
@@ -255,12 +256,12 @@ const copyDevInstallCommand = () =>
             >
             <button
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
               :aria-label="$t('package.run.copy_command')"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               <span
-                :class="runCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                :class="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
                 class="size-4 inline-block"
                 aria-hidden="true"
               />
@@ -305,12 +306,12 @@ const copyDevInstallCommand = () =>
             >
             <button
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:not-focus:sr-only"
+              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
               <span
-                :class="createCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                :class="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
                 class="size-4 inline-block"
                 aria-hidden="true"
               />

From d0ee70cdf102e4941b7866fc723e48cf0c64541f Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 12 Mar 2026 10:20:11 +0530
Subject: [PATCH 12/21] feat:style: use ButtonBase for consistent styling

---
 app/components/Package/SkillsModal.vue | 16 +++-----
 app/components/Terminal/Execute.vue    | 14 +++----
 app/components/Terminal/Install.vue    | 56 +++++++++-----------------
 3 files changed, 31 insertions(+), 55 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 367009aa48..6c3d250d08 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -131,18 +131,14 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             <span class="text-fg">npx </span>
             <span class="text-fg-muted">skills add {{ baseUrl }}/{{ packageName }}</span>
           </code>
-          <button
+          <ButtonBase
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+            size="small"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100"
             :aria-label="$t('package.get_started.copy_command')"
+            :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyCommand"
-          >
-            <span
-              :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
-              class="size-4 inline-block"
-              aria-hidden="true"
-            />
-          </button>
+          />
         </div>
       </div>
     </div>
@@ -209,7 +205,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                 <span v-if="skill.fileCounts?.references" class="text-fg-subtle">
                   <span class="i-lucide:file-text size-3 align-[-2px] me-0.5" />{{
                     $t(
-                      'package.skills.file_counts.refs',
+                      'package.skills.file_counts.references',
                       { count: skill.fileCounts.references },
                       skill.fileCounts.references,
                     )
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index b1c0d4453e..890d087f98 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -68,18 +68,14 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
             ></code
           >
-          <button
+          <ButtonBase
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+            size="small"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
+            :classicon="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyExecuteCommand"
-          >
-            <span
-              :class="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
-              class="size-4 inline-block"
-              aria-hidden="true"
-            />
-          </button>
+          />
         </div>
       </div>
     </div>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 921340c237..37ff54d980 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -151,18 +151,14 @@ const copyDevInstallCommand = () =>
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
             ></code
           >
-          <button
+          <ButtonBase
             type="button"
-            class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+            size="small"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
+            :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyInstallCommand"
-          >
-            <span
-              :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
-              class="size-4 inline-block"
-              aria-hidden="true"
-            />
-          </button>
+          />
         </div>
 
         <!-- Suggested dev dependency install command -->
@@ -187,18 +183,14 @@ const copyDevInstallCommand = () =>
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+              size="small"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
+              :classicon="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyDevInstallCommand"
-            >
-              <span
-                :class="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
-                class="size-4 inline-block"
-                aria-hidden="true"
-              />
-            </button>
+            />
           </div>
         </template>
 
@@ -254,18 +246,14 @@ const copyDevInstallCommand = () =>
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+              size="small"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.run.copy_command')"
+              :classicon="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
-            >
-              <span
-                :class="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
-                class="size-4 inline-block"
-                aria-hidden="true"
-              />
-            </button>
+            />
           </div>
         </template>
 
@@ -304,18 +292,14 @@ const copyDevInstallCommand = () =>
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               type="button"
-              class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
+              size="small"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.create.copy_command')"
+              :classicon="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyCreateCommand"
-            >
-              <span
-                :class="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
-                class="size-4 inline-block"
-                aria-hidden="true"
-              />
-            </button>
+            />
           </div>
         </template>
       </div>

From 5fb969f6485c762316e0114d34b56f3bcb44c57e Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 12 Mar 2026 10:47:16 +0530
Subject: [PATCH 13/21] feat: add new square size

---
 app/components/Button/Base.vue         | 3 ++-
 app/components/Package/SkillsModal.vue | 2 +-
 app/components/Terminal/Execute.vue    | 2 +-
 app/components/Terminal/Install.vue    | 8 ++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index f37d57be06..ee610f941d 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -9,7 +9,7 @@ const props = withDefaults(
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
     /** @default "medium" */
-    size?: 'small' | 'medium'
+    size?: 'small' | 'medium' | 'square'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -43,6 +43,7 @@ defineExpose({
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
+      'p-1': size === 'square',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 6c3d250d08..a988ca77da 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <ButtonBase
             type="button"
-            size="small"
+            size="square"
             class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 890d087f98..c4f7e955a9 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <ButtonBase
             type="button"
-            size="small"
+            size="square"
             class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 37ff54d980..36de783c09 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -153,7 +153,7 @@ const copyDevInstallCommand = () =>
           >
           <ButtonBase
             type="button"
-            size="small"
+            size="square"
             class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
@@ -185,7 +185,7 @@ const copyDevInstallCommand = () =>
             >
             <ButtonBase
               type="button"
-              size="small"
+              size="square"
               class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
               :classicon="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
@@ -248,7 +248,7 @@ const copyDevInstallCommand = () =>
             >
             <ButtonBase
               type="button"
-              size="small"
+              size="square"
               class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.run.copy_command')"
               :classicon="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
@@ -294,7 +294,7 @@ const copyDevInstallCommand = () =>
             >
             <ButtonBase
               type="button"
-              size="small"
+              size="square"
               class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.create.copy_command')"
               :classicon="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"

From 6acbee4cbe68d9d7b01e98b710668deec98b11a9 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 14:17:48 +0530
Subject: [PATCH 14/21] feat:style: add new icon size

---
 app/components/Button/Base.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 1a142b193f..99bfa87628 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
     /** @default "md" */
-    size?: 'sm' | 'md'
+    size?: 'sm' | 'md' | 'icon'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -50,6 +50,7 @@ defineExpose({
       'flex': block,
       'text-sm px-4 py-2': size === 'md',
       'text-xs px-2 py-0.5': size === 'sm',
+      'text-sm p-2': size === 'icon',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

From ae832146ad38d21b81c0de20efff9993182c24dc Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 14:19:08 +0530
Subject: [PATCH 15/21] feat: update copy icon button

---
 app/components/Package/SkillsModal.vue |  8 ++++----
 app/components/Terminal/Execute.vue    |  4 ++--
 app/components/Terminal/Install.vue    | 16 ++++++++--------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 11a2fd7fe1..ef7fb3c965 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -123,16 +123,16 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
       <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
-        <div class="relative group/cmd">
-          <code class="font-mono text-sm whitespace-nowrap">
+        <div class="relative flex items-center gap-2 group/cmd">
+          <code class="font-mono text-sm">
             <span class="text-fg-subtle select-none">$ </span>
             <span class="text-fg">npx </span>
             <span class="text-fg-muted">skills add {{ baseUrl }}/{{ packageName }}</span>
           </code>
           <ButtonBase
             type="button"
-            size="square"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/cmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyCommand"
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 560d0870e8..f3114ab311 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,8 +70,8 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <ButtonBase
             type="button"
-            size="square"
-            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/executecmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyExecuteCommand"
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index f356726a6a..e33a72e750 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -237,8 +237,8 @@ useCommandPaletteContextCommands(
           >
           <ButtonBase
             type="button"
-            size="square"
-            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/installcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyInstallCommand"
@@ -269,8 +269,8 @@ useCommandPaletteContextCommands(
             >
             <ButtonBase
               type="button"
-              size="sm"
-              class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/devinstallcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
               :classicon="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyDevInstallCommand"
@@ -332,8 +332,8 @@ useCommandPaletteContextCommands(
             >
             <ButtonBase
               type="button"
-              size="square"
-              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/runcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.run.copy_command')"
               :classicon="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
@@ -378,8 +378,8 @@ useCommandPaletteContextCommands(
             >
             <ButtonBase
               type="button"
-              size="square"
-              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/createcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.create.copy_command')"
               :classicon="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyCreateCommand"

From b2f1c2b04902105fb5fdbbff03c986fe9e76a30b Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 14:25:20 +0530
Subject: [PATCH 16/21] fix:style: dollar sign alignment

---
 app/components/Terminal/Execute.vue | 2 +-
 app/components/Terminal/Install.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index f3114ab311..14c2b0a4c1 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -59,7 +59,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           :data-pm-cmd="pm.id"
           class="flex items-center gap-2 group/executecmd"
         >
-          <span class="text-fg-subtle font-mono text-sm select-none">$</span>
+          <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
           <code class="font-mono text-sm"
             ><span
               v-for="(part, i) in getExecutePartsForPM(pm.id)"
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index e33a72e750..c247442aa3 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -226,7 +226,7 @@ useCommandPaletteContextCommands(
           :data-pm-cmd="pm.id"
           class="flex items-center gap-2 group/installcmd min-w-0"
         >
-          <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+          <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
           <code class="font-mono text-sm min-w-0"
             ><span
               v-for="(part, i) in getInstallPartsForPM(pm.id)"
@@ -286,7 +286,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 min-w-0"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm min-w-0"
               ><span
                 v-for="(part, i) in getTypesInstallPartsForPM(pm.id)"
@@ -321,7 +321,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 group/runcmd"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm"
               ><span
                 v-for="(part, i) in getRunPartsForPM(pm.id, executableInfo?.primaryCommand)"
@@ -367,7 +367,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 group/createcmd"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm"
               ><span
                 v-for="(part, i) in getCreatePartsForPM(pm.id)"

From b267f2380d8d05b291979b4c9d78b81788413b4e Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 15:10:47 +0530
Subject: [PATCH 17/21] feat: add copied schema in i18n

---
 i18n/locales/en.json |  7 ++++++-
 i18n/schema.json     | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3469bc669c..977ef7452e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -472,7 +472,12 @@
       "copy_command": "Copy command to run locally"
     },
     "command": {
-      "copied": "Command copied"
+      "copied_install": "Install command copied",
+      "copied_dev_install": "Dev install command copied",
+      "copied_run": "Run command copied",
+      "copied_create": "Create command copied",
+      "copied_execute": "Execute command copied",
+      "copied_skills": "Skills command copied"
     },
     "readme": {
       "title": "Readme",
diff --git a/i18n/schema.json b/i18n/schema.json
index 823b6cadfa..1b3097098b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1420,7 +1420,22 @@
         "command": {
           "type": "object",
           "properties": {
-            "copied": {
+            "copied_install": {
+              "type": "string"
+            },
+            "copied_dev_install": {
+              "type": "string"
+            },
+            "copied_run": {
+              "type": "string"
+            },
+            "copied_create": {
+              "type": "string"
+            },
+            "copied_execute": {
+              "type": "string"
+            },
+            "copied_skills": {
               "type": "string"
             }
           },

From 6cb2a0b15357df6f8380ac54bacbcb2d582af6b9 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 15:23:33 +0530
Subject: [PATCH 18/21] feat: use new NuxtAnnouncer

---
 app/app.vue                            |  2 ++
 app/components/Package/SkillsModal.vue |  7 ++++++-
 app/components/Terminal/Execute.vue    |  6 +++++-
 app/components/Terminal/Install.vue    | 26 ++++++++++++++++++++------
 app/composables/useInstallCommand.ts   |  3 ++-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 34fc1d5c01..fab31b20ea 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -146,6 +146,8 @@ defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the
       {{ route.name === 'search' ? `${$t('search.title_packages')} - npmx` : message }}
     </NuxtRouteAnnouncer>
 
+    <NuxtAnnouncer />
+
     <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
       <NuxtPage />
     </div>
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index ef7fb3c965..43401263d9 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -35,7 +35,12 @@ const installCommand = computed(() => {
 })
 
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-const copyCommand = () => installCommand.value && copy(installCommand.value)
+const { polite } = useAnnouncer()
+const copyCommand = () => {
+  if (!installCommand.value) return
+  copy(installCommand.value)
+  polite($t('package.command.copied_skills'))
+}
 
 function getWarningTooltip(skill: SkillListItem): string | undefined {
   if (!skill.warnings?.length) return undefined
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 14c2b0a4c1..d131f84875 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 
 const selectedPM = useSelectedPackageManager()
+const { polite } = useAnnouncer()
 
 // Generate execute command parts for a specific package manager
 function getExecutePartsForPM(pmId: PackageManagerId) {
@@ -39,7 +40,10 @@ function getFullExecuteCommand() {
 
 // Copy handler
 const { copied: executeCopied, copy: copyExecute } = useClipboard({ copiedDuring: 2000 })
-const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
+const copyExecuteCommand = () => {
+  copyExecute(getFullExecuteCommand())
+  polite($t('package.command.copied_execute'))
+}
 </script>
 
 <template>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index c247442aa3..9a4a56087c 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -23,6 +23,14 @@ const { selectedPM, showTypesInInstall, copied, copyInstallCommand } = useInstal
   () => props.installVersionOverride ?? null,
 )
 
+const { announce } = useCommandPalette()
+const { polite } = useAnnouncer()
+
+async function copyInstallCommandWithAnnounce() {
+  const success = await copyInstallCommand()
+  if (success) polite($t('package.command.copied_install'))
+}
+
 // Generate install command parts for a specific package manager
 function getInstallPartsForPM(pmId: PackageManagerId) {
   return getInstallCommandParts({
@@ -105,13 +113,19 @@ function getFullCreateCommand() {
 
 // Copy handlers
 const { copied: runCopied, copy: copyRun } = useClipboard({ copiedDuring: 2000 })
-const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
+const copyRunCommand = (command?: string) => {
+  copyRun(getFullRunCommand(command))
+  polite($t('package.command.copied_run'))
+}
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
-const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+const copyCreateCommand = () => {
+  copyCreate(getFullCreateCommand())
+  polite($t('package.command.copied_create'))
+}
 
 const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
-const copyDevInstallCommand = () =>
+const copyDevInstallCommand = () => {
   copyDevInstall(
     getInstallCommand({
       packageName: props.packageName,
@@ -121,8 +135,8 @@ const copyDevInstallCommand = () =>
       dev: true,
     }),
   )
-
-const { announce } = useCommandPalette()
+  polite($t('package.command.copied_dev_install'))
+}
 
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
@@ -241,7 +255,7 @@ useCommandPaletteContextCommands(
             class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/installcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
             :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
-            @click.stop="copyInstallCommand"
+            @click.stop="copyInstallCommandWithAnnounce"
           />
         </div>
 
diff --git a/app/composables/useInstallCommand.ts b/app/composables/useInstallCommand.ts
index 827ac89f46..0d9fd065e6 100644
--- a/app/composables/useInstallCommand.ts
+++ b/app/composables/useInstallCommand.ts
@@ -82,8 +82,9 @@ export function useInstallCommand(
   const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
   async function copyInstallCommand() {
-    if (!fullInstallCommand.value) return
+    if (!fullInstallCommand.value) return false
     await copy(fullInstallCommand.value)
+    return true
   }
 
   return {

From 42e15a5e6f6001b61594d6e3ca0cf4ee186d3955 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 15:47:47 +0530
Subject: [PATCH 19/21] test: update test to check new icons and nuxt announcer

---
 test/e2e/create-command.spec.ts | 52 ++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index d541407f7d..4dd4f1ab58 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -103,17 +103,25 @@ test.describe('Create Command', () => {
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
       const copyButton = createCommandContainer.locator('button')
+
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
+
       await copyButton.click()
 
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:check/)
 
-      // Verify clipboard content contains the create command
       const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
       expect(clipboardContent).toMatch(/create vite/i)
 
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
+      await expect(page.locator('.nuxt-announcer [aria-live="polite"]')).toContainText(
+        'Create command copied',
+      )
+
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:copy/, {
+        timeout: 5000,
+      })
+      await expect(copyButton.locator('span[aria-hidden="true"]')).not.toHaveClass(/i-lucide:check/)
     })
   })
 
@@ -146,17 +154,26 @@ test.describe('Create Command', () => {
 
       const installCommandContainer = page.locator('.group\\/installcmd').first()
       const copyButton = installCommandContainer.locator('button')
+
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
+
       await copyButton.click()
 
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:check/)
 
       // Verify clipboard content contains the install command
       const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
       expect(clipboardContent).toMatch(/install is-odd|add is-odd/i)
 
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
+      await expect(page.locator('.nuxt-announcer [aria-live="polite"]')).toContainText(
+        'Install command copied',
+      )
+
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:copy/, {
+        timeout: 5000,
+      })
+      await expect(copyButton.locator('span[aria-hidden="true"]')).not.toHaveClass(/i-lucide:check/)
     })
   })
 
@@ -202,17 +219,26 @@ test.describe('Create Command', () => {
       await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
 
       const copyButton = runCommandContainer.locator('button')
+
+      await copyButton.focus()
+      await expect(copyButton).toBeFocused()
+
       await copyButton.click()
 
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:check/)
 
       // Verify clipboard content contains the run command
       const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
       expect(clipboardContent).toMatch(/npx vite/i)
 
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
+      await expect(page.locator('.nuxt-announcer [aria-live="polite"]')).toContainText(
+        'Run command copied',
+      )
+
+      await expect(copyButton.locator('span[aria-hidden="true"]')).toHaveClass(/i-lucide:copy/, {
+        timeout: 5000,
+      })
+      await expect(copyButton.locator('span[aria-hidden="true"]')).not.toHaveClass(/i-lucide:check/)
     })
   })
 })

From bbc651547416e4c3af54cab1fb3779998e0962ad Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 15:53:12 +0530
Subject: [PATCH 20/21] fix: broken i18n key

---
 app/components/Package/SkillsModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 43401263d9..a88d823bb2 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -208,7 +208,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                 <span v-if="skill.fileCounts?.references" class="text-fg-subtle">
                   <span class="i-lucide:file-text size-3 align-[-2px] me-0.5" />{{
                     $t(
-                      'package.skills.file_counts.references',
+                      'package.skills.file_counts.refs',
                       { count: skill.fileCounts.references },
                       skill.fileCounts.references,
                     )

From 442d5e4b564f8d233a499ecb4c377f82d42deda2 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Tue, 21 Apr 2026 17:16:29 +0530
Subject: [PATCH 21/21] fix:tests: version selector doesn't render "v" prefix

---
 test/e2e/create-command.spec.ts | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 4dd4f1ab58..5893f16571 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -67,11 +67,6 @@ test.describe('Create Command', () => {
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
 
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      // Find the create command container (wait longer for API response)
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
@@ -95,10 +90,6 @@ test.describe('Create Command', () => {
       await goto('/package/vite', { waitUntil: 'hydration' })
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
 
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
@@ -183,11 +174,6 @@ test.describe('Create Command', () => {
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
 
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      // Find the run command container
       const runCommandContainer = page.locator('.group\\/runcmd').first()
       await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
 
@@ -211,10 +197,6 @@ test.describe('Create Command', () => {
       await goto('/package/vite', { waitUntil: 'hydration' })
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
 
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
       const runCommandContainer = page.locator('.group\\/runcmd').first()
       await expect(runCommandContainer).toBeVisible({ timeout: 20000 })