fix: align visually with playground component

Author: danielroe

app/components/PackageSkillsCard.vue

@@ -12,30 +12,18 @@ const skillsModal = useModal('skills-modal')
 
 <template>
   <section v-if="skills.length" id="skills" class="scroll-mt-20">
-    <h2 id="skills-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      <a
-        href="#skills"
-        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-      >
-        {{ $t('package.skills.title') }}
-        <span
-          class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-          aria-hidden="true"
-        />
-      </a>
+    <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      {{ $t('package.skills.title') }}
     </h2>
     <button
       type="button"
-      class="group/btn w-full flex items-center gap-2 px-3 py-2 bg-bg-subtle border border-border rounded-lg hover:border-border-hover hover:bg-bg-muted transition-colors"
+      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
       @click="skillsModal.open()"
     >
-      <span class="i-custom:agent-skills size-4 text-fg-muted" aria-hidden="true" />
-      <span class="text-sm text-fg">{{
+      <span class="i-custom:agent-skills w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+      <span class="text-fg-muted">{{
         $t('package.skills.skills_available', { count: skills.length }, skills.length)
       }}</span>
-      <span class="text-xs text-fg-subtle group-hover/btn:text-fg transition-colors ms-auto">{{
-        $t('package.skills.view')
-      }}</span>
     </button>
   </section>
 </template>