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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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'"