From c208bc38c6d9dd6be1f227f41985514a519d4b67 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 14:53:07 +1100
Subject: [PATCH 1/3] fix(registry): quiet the Skill page run and install rail

The rail stacked a logo row, three heading styles, two divider rules,
a separate copy button, and bordered behavior chips. Each action stays;
the noise around them goes.
---
 .../registry/app/components/SkillDetail.vue   |  40 ++--
 .../app/components/_SkillCommandPanel.vue     | 188 ++++++++----------
 .../skill-detail-howto-schema.nuxt.test.ts    |   7 +-
 3 files changed, 112 insertions(+), 123 deletions(-)

diff --git a/layers/registry/app/components/SkillDetail.vue b/layers/registry/app/components/SkillDetail.vue
index 3d00f745..d492bc0f 100644
--- a/layers/registry/app/components/SkillDetail.vue
+++ b/layers/registry/app/components/SkillDetail.vue
@@ -1840,20 +1840,33 @@ useHead(computed(() => ({
             class="hidden lg:block"
             aria-labelledby="rail-behaviors-heading"
           >
-            <h2
-              id="rail-behaviors-heading"
-              class="section-label mb-2"
-            >
-              Skill behaviors
-            </h2>
+            <div class="mb-1 flex items-baseline justify-between gap-2">
+              <h2
+                id="rail-behaviors-heading"
+                class="font-mono text-sm text-default"
+              >
+                Skill behaviors
+              </h2>
+              <a
+                href="#skill-behaviors"
+                class="data-label inline-flex min-h-9 items-center gap-1 transition-colors hover:text-default"
+              >
+                Where each one appears
+                <UIcon
+                  name="i-lucide-arrow-down"
+                  class="size-3"
+                  aria-hidden="true"
+                />
+              </a>
+            </div>
             <ul
               role="list"
-              class="flex flex-wrap gap-1.5"
+              class="space-y-1.5 font-mono text-xs text-muted"
             >
               <li
                 v-for="behavior in behaviors"
                 :key="behavior.id"
-                class="skill-chip"
+                class="flex items-center gap-2"
               >
                 <UIcon
                   :name="behaviorIcon(behavior)"
@@ -1868,17 +1881,6 @@ useHead(computed(() => ({
                 >, needs approval</span>
               </li>
             </ul>
-            <a
-              href="#skill-behaviors"
-              class="data-label mt-2 inline-flex min-h-6 items-center gap-1 transition-colors hover:text-default"
-            >
-              Where each one appears
-              <UIcon
-                name="i-lucide-arrow-down"
-                class="size-3"
-                aria-hidden="true"
-              />
-            </a>
           </section>
         </aside>
 
diff --git a/layers/registry/app/components/_SkillCommandPanel.vue b/layers/registry/app/components/_SkillCommandPanel.vue
index 7cd6f450..4fee26d3 100644
--- a/layers/registry/app/components/_SkillCommandPanel.vue
+++ b/layers/registry/app/components/_SkillCommandPanel.vue
@@ -2,7 +2,6 @@
 import type { RunCheckFlag } from '#shared/run-check-flags'
 import type { ZipState } from '../utils/skill-zip'
 import { SKILL_RUN_PROMPT_LEAD } from '#shared/skill-commands'
-import { AGENT_LOGOS } from '~/utils/agent-logos'
 import SkillRunFlag from './_SkillRunFlag.vue'
 
 type CommandMode = 'run' | 'install'
@@ -59,7 +58,8 @@ const registrySetup: Record<InstallTarget, { to: string, label: string }> = {
   claude: { to: '/developers?setup=mcp&app=claude', label: 'Search the registry from Claude' },
   chatgpt: { to: '/developers?setup=mcp&app=chatgpt', label: 'Search the registry from ChatGPT' },
 }
-const agentNames = AGENT_LOGOS.map(agent => agent.label).join(', ')
+// A wrapped URL breaks after a path slash, never inside a name or the origin.
+const runUrlParts = computed(() => runUrl.match(/^[a-z]+:\/\/[^/]+\/?|[^/]+\/|[^/]+$/gi) ?? [runUrl])
 
 const mode = defineModel<CommandMode>({ required: true })
 
@@ -74,6 +74,7 @@ const copyLabel = computed(() => commandCopied.value
   : mode.value === 'run' ? 'Copy Agent prompt' : 'Copy install command')
 const copyErrorId = useId()
 const installPanelId = useId()
+const forkNoteId = useId()
 
 // Stacked shows both commands, so the copy error follows the last click.
 function copyFrom(next: CommandMode) {
@@ -86,54 +87,31 @@ function copyFrom(next: CommandMode) {
   <div
     v-if="layout === 'stacked'"
     data-testid="skill-command-panel"
-    class="space-y-6"
+    class="space-y-8"
   >
-    <div class="flex items-center gap-2">
-      <div
-        role="img"
-        class="skill-agent-stack"
-        :aria-label="`Works with ${agentNames}`"
-      >
-        <span
-          v-for="agent in AGENT_LOGOS"
-          :key="agent.id"
-          :title="agent.label"
-        >
-          <UIcon
-            :name="agent.icon"
-            class="size-3"
-            aria-hidden="true"
-          />
-        </span>
-      </div>
-      <span
-        class="data-label"
-        aria-hidden="true"
-      >Works with your agent</span>
-    </div>
-
-    <div class="space-y-3">
-      <div class="space-y-1">
-        <h2 class="font-mono text-sm text-default">
-          Run once off
-        </h2>
-        <p class="text-xs leading-relaxed text-muted">
-          <strong class="font-medium text-default">This session only.</strong> Nothing lands on disk. Nothing to clean up.
-        </p>
-      </div>
-      <p class="rounded-lg border border-default bg-muted px-3 py-2 text-sm leading-relaxed text-default">
-        {{ SKILL_RUN_PROMPT_LEAD }} <code class="install-command install-command--wrap install-command__target inline">{{ runUrl }}</code>
+    <div class="space-y-2">
+      <h2 class="font-mono text-sm text-default">
+        Run once off
+      </h2>
+      <p class="text-xs leading-relaxed text-muted">
+        Nothing lands on disk. Nothing to clean up.
       </p>
-      <UButton
-        :icon="runCopied ? 'i-lucide-check' : 'i-lucide-copy'"
-        :label="runCopied ? 'Copied' : 'Copy prompt'"
-        color="neutral"
-        variant="outline"
-        size="sm"
-        class="font-mono"
-        :aria-describedby="copyError && mode === 'run' ? copyErrorId : undefined"
-        @click="copyFrom('run')"
-      />
+      <div class="flex items-center gap-2 rounded-lg border border-default bg-muted py-1 pr-1 pl-3 text-xs">
+        <code class="install-command install-command--wrap block min-w-0 flex-1 py-1"><span class="install-command__runner">{{ `${SKILL_RUN_PROMPT_LEAD} ` }}</span><span class="install-command__target"><template
+          v-for="(part, index) in runUrlParts"
+          :key="index"
+        >{{ part }}<wbr v-if="index < runUrlParts.length - 1"></template></span></code>
+        <UButton
+          :icon="runCopied ? 'i-lucide-check' : 'i-lucide-copy'"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          class="min-h-11 min-w-11 shrink-0"
+          :aria-label="runCopied ? 'Copied' : 'Copy Agent prompt'"
+          :aria-describedby="copyError && mode === 'run' ? copyErrorId : undefined"
+          @click="copyFrom('run')"
+        />
+      </div>
       <SkillRunFlag
         v-if="runFlag"
         :flag="runFlag"
@@ -141,7 +119,7 @@ function copyFrom(next: CommandMode) {
       />
     </div>
 
-    <div class="space-y-3 border-t border-default pt-6">
+    <div class="space-y-2">
       <h2 class="font-mono text-sm text-default">
         Install as a Skill
       </h2>
@@ -167,13 +145,13 @@ function copyFrom(next: CommandMode) {
       </div>
       <div
         :id="installPanelId"
-        class="space-y-3"
+        class="space-y-2 pt-1"
       >
         <template v-if="installTarget === 'local'">
           <p class="text-xs leading-relaxed text-muted">
             The files land in your project. The lockfile records them.
           </p>
-          <div class="flex items-center gap-2 rounded-lg border border-default py-1 pr-1 pl-3 text-sm">
+          <div class="flex items-center gap-2 rounded-lg border border-default bg-muted py-1 pr-1 pl-3 text-xs">
             <InstallCommand
               :command="installCommand"
               wrap
@@ -216,26 +194,47 @@ function copyFrom(next: CommandMode) {
             {{ zipState.message }}
           </p>
         </template>
+      </div>
+    </div>
+
+    <ul
+      role="list"
+      class="font-mono text-xs"
+    >
+      <li>
+        <NuxtLink
+          :to="`${runUrl}.md?action=fork`"
+          class="inline-flex min-h-9 items-center gap-2 text-default underline-offset-2 hover:underline"
+          :aria-describedby="forkNoteId"
+        >
+          <UIcon
+            name="i-lucide-git-fork"
+            class="size-3.5"
+            aria-hidden="true"
+          />
+          Fork this Skill
+        </NuxtLink>
+        <p
+          :id="forkNoteId"
+          class="pb-1 pl-5.5 font-sans leading-relaxed text-muted"
+        >
+          A fork creates an editable local Skill with its original author and licence.
+        </p>
+      </li>
+      <li>
         <NuxtLink
           :to="registrySetup[installTarget].to"
-          class="inline-flex min-h-11 items-center text-xs text-muted underline underline-offset-2 hover:text-default"
+          class="inline-flex min-h-9 items-center gap-2 text-default underline-offset-2 hover:underline"
         >
+          <UIcon
+            name="i-lucide-search"
+            class="size-3.5"
+            aria-hidden="true"
+          />
           {{ registrySetup[installTarget].label }}
         </NuxtLink>
-      </div>
-    </div>
-
-    <div class="space-y-1 border-t border-default pt-6">
-      <NuxtLink
-        :to="`${runUrl}.md?action=fork`"
-        class="inline-flex min-h-11 items-center font-mono text-sm text-default underline underline-offset-2 hover:text-primary"
-      >
-        Fork this Skill
-      </NuxtLink>
-      <p class="text-sm leading-relaxed text-muted">
-        A fork creates an editable local Skill with its original author and licence.
-      </p>
-    </div>
+      </li>
+    </ul>
 
     <p
       v-if="copyError"
@@ -272,15 +271,16 @@ function copyFrom(next: CommandMode) {
     </div>
 
     <div class="flex items-center gap-2 rounded-lg border border-default bg-muted py-1 pr-1 pl-3 text-sm">
-      <div class="min-w-0 flex-1 py-1">
-        <p v-if="mode === 'run'" class="section-label mb-1">
-          Ask your Agent
-        </p>
-        <p v-if="mode === 'run'" class="leading-relaxed text-default">
-          {{ SKILL_RUN_PROMPT_LEAD }} <code class="install-command install-command--wrap install-command__target inline">{{ runUrl }}</code>
-        </p>
-        <InstallCommand v-else :command="installCommand" wrap class="block" />
-      </div>
+      <code v-if="mode === 'run'" class="install-command install-command--wrap block min-w-0 flex-1 py-1"><span class="install-command__runner">{{ `${SKILL_RUN_PROMPT_LEAD} ` }}</span><span class="install-command__target"><template
+        v-for="(part, index) in runUrlParts"
+        :key="index"
+      >{{ part }}<wbr v-if="index < runUrlParts.length - 1"></template></span></code>
+      <InstallCommand
+        v-else
+        :command="installCommand"
+        wrap
+        class="block min-w-0 flex-1 py-1"
+      />
       <UButton
         :icon="commandCopied ? 'i-lucide-check' : 'i-lucide-copy'"
         color="neutral"
@@ -297,7 +297,7 @@ function copyFrom(next: CommandMode) {
       v-if="mode === 'run'"
       class="text-xs leading-relaxed text-muted"
     >
-      <strong class="font-medium text-default">This session only.</strong> Nothing lands on disk.
+      Nothing lands on disk. Nothing to clean up.
     </p>
     <SkillRunFlag
       v-if="mode === 'run' && runFlag"
@@ -305,14 +305,23 @@ function copyFrom(next: CommandMode) {
       :source-url="sourceUrl"
     />
 
-    <div class="space-y-1">
+    <div class="text-xs">
       <NuxtLink
         :to="`${runUrl}.md?action=fork`"
-        class="inline-flex min-h-11 items-center font-mono text-sm text-default underline underline-offset-2 hover:text-primary"
+        class="inline-flex min-h-11 items-center gap-2 font-mono text-default underline-offset-2 hover:underline"
+        :aria-describedby="forkNoteId"
       >
+        <UIcon
+          name="i-lucide-git-fork"
+          class="size-3.5"
+          aria-hidden="true"
+        />
         Fork this Skill
       </NuxtLink>
-      <p class="text-sm leading-relaxed text-muted">
+      <p
+        :id="forkNoteId"
+        class="pl-5.5 leading-relaxed text-muted"
+      >
         A fork creates an editable local Skill with its original author and licence.
       </p>
     </div>
@@ -327,24 +336,3 @@ function copyFrom(next: CommandMode) {
     </p>
   </div>
 </template>
-
-<style scoped>
-/* Overlapping monochrome marks, so the row reads as "every agent" without
-   pulling focus from the commands. */
-.skill-agent-stack {
-  display: flex;
-}
-.skill-agent-stack > span {
-  display: grid;
-  place-items: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border: 1px solid var(--ui-border);
-  border-radius: 999px;
-  background: var(--ui-bg);
-  color: var(--ui-text-muted);
-}
-.skill-agent-stack > span + span {
-  margin-left: -0.375rem;
-}
-</style>
diff --git a/test/unit/skill-detail-howto-schema.nuxt.test.ts b/test/unit/skill-detail-howto-schema.nuxt.test.ts
index 5e834d8f..32f196ca 100644
--- a/test/unit/skill-detail-howto-schema.nuxt.test.ts
+++ b/test/unit/skill-detail-howto-schema.nuxt.test.ts
@@ -203,8 +203,7 @@ describe('skillDetail command choice', () => {
     })
 
     expect(tabs!.findAll('.install-command')).toHaveLength(1)
-    expect(tabs!.get('.install-command').text()).toBe('https://skilld.dev/gh/antfu/skills/vite')
-    expect(tabs!.text()).toContain('Use this Skill:')
+    expect(tabs!.get('.install-command').text()).toBe('Use this Skill: https://skilld.dev/gh/antfu/skills/vite')
     const installTab = tabs!.findAll('button[aria-pressed]').find(button => button.text() === 'Install')
     expect(installTab, 'Install mode is missing').toBeTruthy()
     await installTab!.trigger('click')
@@ -213,10 +212,10 @@ describe('skillDetail command choice', () => {
     })
 
     expect(stacked!.findAll('.install-command').map(command => command.text())).toEqual([
-      'https://skilld.dev/gh/antfu/skills/vite',
+      'Use this Skill: https://skilld.dev/gh/antfu/skills/vite',
       'npx skilld install antfu/skills/vite',
     ])
-    expect(stacked!.findAll('button').some(button => button.text() === 'Copy prompt')).toBe(true)
+    expect(stacked!.get('button[aria-label="Copy Agent prompt"]')).toBeTruthy()
     expect(stacked!.get('button[aria-label="Copy install command"]')).toBeTruthy()
 
     wrapper.unmount()

From acadebea7d1c98076ca281231344f8d094665dcf Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 15:01:31 +1100
Subject: [PATCH 2/3] fix(registry): unbox the run flag and share the run
 prompt

A third bordered box under the run command made the rail busy again
whenever a run check failed. The run prompt markup was copied in both
panel layouts; one component keeps their wrapping rules together.
---
 .../registry/app/components/SkillDetail.vue   |  3 +-
 .../app/components/_SkillCommandPanel.vue     | 35 ++++++++++---------
 .../registry/app/components/_SkillRunFlag.vue |  6 ++--
 .../app/components/_SkillRunPrompt.vue        | 18 ++++++++++
 4 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 layers/registry/app/components/_SkillRunPrompt.vue

diff --git a/layers/registry/app/components/SkillDetail.vue b/layers/registry/app/components/SkillDetail.vue
index d492bc0f..1f434522 100644
--- a/layers/registry/app/components/SkillDetail.vue
+++ b/layers/registry/app/components/SkillDetail.vue
@@ -1807,7 +1807,7 @@ useHead(computed(() => ({
             <div class="mb-2 flex items-baseline justify-between gap-2">
               <h2
                 id="files-heading"
-                class="section-label"
+                class="font-mono text-sm text-default"
               >
                 Files
               </h2>
@@ -1867,6 +1867,7 @@ useHead(computed(() => ({
                 v-for="behavior in behaviors"
                 :key="behavior.id"
                 class="flex items-center gap-2"
+                :class="behavior.tier === 'ask' ? 'text-default' : undefined"
               >
                 <UIcon
                   :name="behaviorIcon(behavior)"
diff --git a/layers/registry/app/components/_SkillCommandPanel.vue b/layers/registry/app/components/_SkillCommandPanel.vue
index 4fee26d3..adc1d39d 100644
--- a/layers/registry/app/components/_SkillCommandPanel.vue
+++ b/layers/registry/app/components/_SkillCommandPanel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RunCheckFlag } from '#shared/run-check-flags'
 import type { ZipState } from '../utils/skill-zip'
-import { SKILL_RUN_PROMPT_LEAD } from '#shared/skill-commands'
 import SkillRunFlag from './_SkillRunFlag.vue'
+import SkillRunPrompt from './_SkillRunPrompt.vue'
 
 type CommandMode = 'run' | 'install'
 type InstallTarget = 'local' | 'claude' | 'chatgpt'
@@ -58,8 +58,6 @@ const registrySetup: Record<InstallTarget, { to: string, label: string }> = {
   claude: { to: '/developers?setup=mcp&app=claude', label: 'Search the registry from Claude' },
   chatgpt: { to: '/developers?setup=mcp&app=chatgpt', label: 'Search the registry from ChatGPT' },
 }
-// A wrapped URL breaks after a path slash, never inside a name or the origin.
-const runUrlParts = computed(() => runUrl.match(/^[a-z]+:\/\/[^/]+\/?|[^/]+\/|[^/]+$/gi) ?? [runUrl])
 
 const mode = defineModel<CommandMode>({ required: true })
 
@@ -90,17 +88,19 @@ function copyFrom(next: CommandMode) {
     class="space-y-8"
   >
     <div class="space-y-2">
-      <h2 class="font-mono text-sm text-default">
-        Run once off
-      </h2>
-      <p class="text-xs leading-relaxed text-muted">
-        Nothing lands on disk. Nothing to clean up.
-      </p>
+      <div class="space-y-1">
+        <h2 class="font-mono text-sm text-default">
+          Run once off
+        </h2>
+        <p class="text-xs leading-relaxed text-muted">
+          Nothing lands on disk. Nothing to clean up.
+        </p>
+      </div>
       <div class="flex items-center gap-2 rounded-lg border border-default bg-muted py-1 pr-1 pl-3 text-xs">
-        <code class="install-command install-command--wrap block min-w-0 flex-1 py-1"><span class="install-command__runner">{{ `${SKILL_RUN_PROMPT_LEAD} ` }}</span><span class="install-command__target"><template
-          v-for="(part, index) in runUrlParts"
-          :key="index"
-        >{{ part }}<wbr v-if="index < runUrlParts.length - 1"></template></span></code>
+        <SkillRunPrompt
+          :url="runUrl"
+          class="block min-w-0 flex-1 py-1"
+        />
         <UButton
           :icon="runCopied ? 'i-lucide-check' : 'i-lucide-copy'"
           color="neutral"
@@ -271,10 +271,11 @@ function copyFrom(next: CommandMode) {
     </div>
 
     <div class="flex items-center gap-2 rounded-lg border border-default bg-muted py-1 pr-1 pl-3 text-sm">
-      <code v-if="mode === 'run'" class="install-command install-command--wrap block min-w-0 flex-1 py-1"><span class="install-command__runner">{{ `${SKILL_RUN_PROMPT_LEAD} ` }}</span><span class="install-command__target"><template
-        v-for="(part, index) in runUrlParts"
-        :key="index"
-      >{{ part }}<wbr v-if="index < runUrlParts.length - 1"></template></span></code>
+      <SkillRunPrompt
+        v-if="mode === 'run'"
+        :url="runUrl"
+        class="block min-w-0 flex-1 py-1"
+      />
       <InstallCommand
         v-else
         :command="installCommand"
diff --git a/layers/registry/app/components/_SkillRunFlag.vue b/layers/registry/app/components/_SkillRunFlag.vue
index 5be2dad7..5c85bf0b 100644
--- a/layers/registry/app/components/_SkillRunFlag.vue
+++ b/layers/registry/app/components/_SkillRunFlag.vue
@@ -19,14 +19,14 @@ const headingId = useId()
     role="note"
     :aria-labelledby="headingId"
     data-testid="skill-run-flag"
-    class="flex gap-2 rounded-lg border border-default bg-muted/30 px-3 py-2 text-xs leading-relaxed"
+    class="flex gap-2 text-xs leading-relaxed"
   >
     <UIcon
       name="i-lucide-circle-alert"
       class="mt-0.5 size-3.5 shrink-0 text-warning"
       aria-hidden="true"
     />
-    <div class="min-w-0 space-y-1">
+    <div class="min-w-0 space-y-0.5">
       <p
         :id="headingId"
         class="font-mono text-default"
@@ -43,7 +43,7 @@ const headingId = useId()
             :href="sourceUrl"
             target="_blank"
             rel="noopener"
-            class="font-mono underline underline-offset-2 transition-colors hover:text-default"
+            class="font-mono whitespace-nowrap underline underline-offset-2 transition-colors hover:text-default"
           >SKILL.md on GitHub</a>
         </template>
       </p>
diff --git a/layers/registry/app/components/_SkillRunPrompt.vue b/layers/registry/app/components/_SkillRunPrompt.vue
new file mode 100644
index 00000000..4aceb949
--- /dev/null
+++ b/layers/registry/app/components/_SkillRunPrompt.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { SKILL_RUN_PROMPT_LEAD } from '#shared/skill-commands'
+
+const { url } = defineProps<{
+  /** The Skill page. The Agent fetches it and receives the SKILL.md as markdown. */
+  url: string
+}>()
+
+// A wrapped URL breaks after a path slash, never inside a name or the origin.
+const parts = computed(() => url.match(/^[a-z]+:\/\/[^/]+\/?|[^/]+\/|[^/]+$/gi) ?? [url])
+</script>
+
+<template>
+  <code class="install-command install-command--wrap"><span class="install-command__runner">{{ `${SKILL_RUN_PROMPT_LEAD} ` }}</span><span class="install-command__target"><template
+    v-for="(part, index) in parts"
+    :key="index"
+  >{{ part }}<wbr v-if="index < parts.length - 1"></template></span></code>
+</template>

From 76b5b0ced8b52c1b34bddefe1c463c9af7545978 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 15:19:25 +1100
Subject: [PATCH 3/3] fix(registry): fit the fork note on one line, rose rail
 tabs

The fork note was the longest text left in the rail. COPY.md owns that
string, so it changes there too. Rose is the site's selected state, so
the rail tabs now match the mobile panel and /developers.
---
 COPY.md                                               | 2 +-
 layers/registry/app/components/_SkillCommandPanel.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/COPY.md b/COPY.md
index f8e77708..767f1922 100644
--- a/COPY.md
+++ b/COPY.md
@@ -103,7 +103,7 @@ The Agent request uses `Fork this Skill: <Skill page URL>`.
 The Skill page's Markdown explains how to copy the source and install the local path.
 Keep run as the default. Fork is the opt-in for an editable local copy.
 The HTML page links to that Markdown with `Fork this Skill`.
-Its description uses `A fork creates an editable local Skill with its original author and licence.`
+Its description uses `Edit a local copy. It keeps the author and licence.`
 The fork link adds `?action=fork` to request only the fork workflow.
 That workflow uses a shallow fetch at one commit and plain installation output.
 Check existing files before fetching. Keep licence and provenance checks.
diff --git a/layers/registry/app/components/_SkillCommandPanel.vue b/layers/registry/app/components/_SkillCommandPanel.vue
index adc1d39d..9dd0b303 100644
--- a/layers/registry/app/components/_SkillCommandPanel.vue
+++ b/layers/registry/app/components/_SkillCommandPanel.vue
@@ -134,7 +134,7 @@ function copyFrom(next: CommandMode) {
           type="button"
           class="-mb-px min-h-9 border-b font-mono text-xs transition-colors"
           :class="installTarget === item.value
-            ? 'border-[var(--ui-text)] text-default'
+            ? 'border-primary text-default'
             : 'border-transparent text-muted hover:text-default'"
           :aria-pressed="installTarget === item.value"
           :aria-controls="installPanelId"
@@ -218,7 +218,7 @@ function copyFrom(next: CommandMode) {
           :id="forkNoteId"
           class="pb-1 pl-5.5 font-sans leading-relaxed text-muted"
         >
-          A fork creates an editable local Skill with its original author and licence.
+          Edit a local copy. It keeps the author and licence.
         </p>
       </li>
       <li>
@@ -323,7 +323,7 @@ function copyFrom(next: CommandMode) {
         :id="forkNoteId"
         class="pl-5.5 leading-relaxed text-muted"
       >
-        A fork creates an editable local Skill with its original author and licence.
+        Edit a local copy. It keeps the author and licence.
       </p>
     </div>