From 778cfb11f5aaa58d7fdd9953e0225ea6dbc02134 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 00:57:42 +0100
Subject: [PATCH 01/11] refactor: extract reusable Card component

---
 app/components/Card.vue                 | 26 +++++++++++++++++++++++++
 app/components/PackageCard.vue          | 16 ++-------------
 app/components/SearchSuggestionCard.vue | 16 ++-------------
 uno.config.ts                           |  7 -------
 4 files changed, 30 insertions(+), 35 deletions(-)
 create mode 100644 app/components/Card.vue

diff --git a/app/components/Card.vue b/app/components/Card.vue
new file mode 100644
index 000000000..6bed3d442
--- /dev/null
+++ b/app/components/Card.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  /** Whether this suggestion is currently selected (keyboard nav) */
+  selected?: boolean
+  /** Whether this is an exact match for the query */
+  isExactMatch?: boolean
+}>()
+</script>
+
+<template>
+  <article
+    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    :class="{
+      'bg-bg-muted border-border-hover': selected,
+      'border-accent/30 bg-accent/5': isExactMatch,
+    }"
+  >
+    <!-- Glow effect for exact matches -->
+    <div
+      v-if="isExactMatch"
+      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
+      aria-hidden="true"
+    />
+    <slot />
+  </article>
+</template>
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 51e835f28..0d2e95d70 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -27,19 +27,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
-    :class="{
-      'bg-bg-muted border-border-hover': selected,
-      'border-accent/30 bg-accent/5': isExactMatch,
-    }"
-  >
-    <!-- Glow effect for exact matches -->
-    <div
-      v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
-      aria-hidden="true"
-    />
+  <Card :selected="selected" :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -173,5 +161,5 @@ const emit = defineEmits<{
         {{ keyword }}
       </li>
     </ul>
-  </article>
+  </Card>
 </template>
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index 7760b3c9c..c11a67764 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -18,19 +18,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <article
-    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
-    :class="{
-      'bg-bg-muted border-border-hover': selected,
-      'border-accent/30 bg-accent/5': isExactMatch,
-    }"
-  >
-    <!-- Glow effect for exact matches -->
-    <div
-      v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
-      aria-hidden="true"
-    />
+  <Card :selected="selected" :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
@@ -81,5 +69,5 @@ const emit = defineEmits<{
         aria-hidden="true"
       />
     </NuxtLink>
-  </article>
+  </Card>
 </template>
diff --git a/uno.config.ts b/uno.config.ts
index d87a7898a..bd76a8dcf 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -136,13 +136,6 @@ export default defineConfig({
     ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
-    // Cards
-    [
-      'card',
-      'bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200',
-    ],
-    ['card-interactive', 'card hover:(border-border-hover bg-bg-muted) cursor-pointer'],
-
     // Form elements
     [
       'input-base',

From 18b87a526704bd0207831d6884118d13fb72cb57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 01:11:27 +0100
Subject: [PATCH 02/11] refactor: replace single use class-shortcut with atomic
 classes

---
 app/components/PackageSkeleton.vue | 4 +++-
 uno.config.ts                      | 6 ------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/components/PackageSkeleton.vue b/app/components/PackageSkeleton.vue
index 103e39b2c..b49ea7324 100644
--- a/app/components/PackageSkeleton.vue
+++ b/app/components/PackageSkeleton.vue
@@ -110,7 +110,9 @@
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
-        <div class="code-block pe-16">
+        <div
+          class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
+        >
           <span class="skeleton inline-block h-5 w-52" />
         </div>
         <span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
diff --git a/uno.config.ts b/uno.config.ts
index bd76a8dcf..85249d0f2 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -157,12 +157,6 @@ export default defineConfig({
     ['badge-pink', 'bg-badge-pink/10 text-badge-pink'],
     ['badge-subtle', 'bg-bg-subtle text-fg-subtle'],
 
-    // Code blocks
-    [
-      'code-block',
-      'bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto',
-    ],
-
     // Skeleton loading
     ['skeleton', 'bg-bg-elevated rounded animate-skeleton-pulse'],
 

From 9ac4b654dfe01f567bf60a76dfc7ede562513ea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 01:14:46 +0100
Subject: [PATCH 03/11] refactor: remove unused class-shortcut

---
 uno.config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/uno.config.ts b/uno.config.ts
index 85249d0f2..630ec4b92 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -162,9 +162,6 @@ export default defineConfig({
 
     // Subtle divider
     ['divider', 'border-t border-border'],
-
-    // Section spacing
-    ['section', 'py-8 sm:py-12'],
   ],
   rules: [
     // Custom scale for active states

From 136872f6ebb10849d06b3164a00d1a256829f5c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 01:18:30 +0100
Subject: [PATCH 04/11] refactor: remove unused class-shortcut

---
 uno.config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/uno.config.ts b/uno.config.ts
index 630ec4b92..e87a991fc 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -159,9 +159,6 @@ export default defineConfig({
 
     // Skeleton loading
     ['skeleton', 'bg-bg-elevated rounded animate-skeleton-pulse'],
-
-    // Subtle divider
-    ['divider', 'border-t border-border'],
   ],
   rules: [
     // Custom scale for active states

From 18e2f54046d418f15290bc40a01bf1a1ed21cba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 03:34:07 +0100
Subject: [PATCH 05/11] refactor: Extract reusable Skeleton components

---
 app/components/PackageSkeleton.vue            | 106 +++++++++---------
 app/components/PackageWeeklyDownloadStats.vue |   8 +-
 app/components/SkeletonBlock.vue              |  10 ++
 app/components/SkeletonInline.vue             |  12 ++
 app/components/Toggle.server.vue              |   2 +-
 app/pages/[...package].vue                    |   8 +-
 app/pages/code/[...path].vue                  |  36 +++---
 app/pages/docs/[...path].vue                  |   8 +-
 app/pages/~[username]/orgs.vue                |   7 +-
 uno.config.ts                                 |   3 -
 10 files changed, 108 insertions(+), 92 deletions(-)
 create mode 100644 app/components/SkeletonBlock.vue
 create mode 100644 app/components/SkeletonInline.vue

diff --git a/app/components/PackageSkeleton.vue b/app/components/PackageSkeleton.vue
index b49ea7324..9bac0da4e 100644
--- a/app/components/PackageSkeleton.vue
+++ b/app/components/PackageSkeleton.vue
@@ -12,20 +12,20 @@
         <div class="flex-1 min-w-0">
           <!-- Package name: h1 font-mono text-2xl sm:text-3xl font-medium mb-2 -->
           <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
-            <span class="skeleton inline-block h-9 w-48" />
+            <SkeletonInline class="h-9 w-48" />
           </h1>
           <!-- Description: fixed height container matching min-h-[4.5rem] (72px) to prevent CLS -->
           <div class="relative max-w-2xl min-h-[4.5rem]">
             <div class="space-y-2">
-              <span class="skeleton block h-5 w-full" />
-              <span class="skeleton block h-5 w-4/5" />
-              <span class="skeleton block h-5 w-3/5" />
+              <SkeletonBlock class="h-5 w-full" />
+              <SkeletonBlock class="h-5 w-4/5" />
+              <SkeletonBlock class="h-5 w-3/5" />
             </div>
           </div>
         </div>
 
         <!-- Version badge: shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md -->
-        <span class="skeleton shrink-0 h-8 w-20 rounded-md" />
+        <SkeletonInline class="shrink-0 h-8 w-20 rounded-md" />
       </div>
 
       <!-- Stats grid: grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6 -->
@@ -36,7 +36,7 @@
             {{ $t('package.skeleton.license') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-12" />
+            <SkeletonInline class="h-5 w-12" />
           </dd>
         </div>
 
@@ -46,7 +46,7 @@
             {{ $t('package.skeleton.weekly') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-20" />
+            <SkeletonInline class="h-5 w-20" />
           </dd>
         </div>
 
@@ -56,7 +56,7 @@
             {{ $t('package.skeleton.size') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-16" />
+            <SkeletonInline class="h-5 w-16" />
           </dd>
         </div>
 
@@ -66,7 +66,7 @@
             {{ $t('package.skeleton.deps') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-8" />
+            <SkeletonInline class="h-5 w-8" />
           </dd>
         </div>
 
@@ -76,7 +76,7 @@
             {{ $t('package.skeleton.updated') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-28" />
+            <SkeletonInline class="h-5 w-28" />
           </dd>
         </div>
       </dl>
@@ -85,16 +85,16 @@
       <nav aria-label="Package links" class="mt-6">
         <ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
           <li>
-            <span class="skeleton inline-block h-5 w-14" />
+            <SkeletonInline class="h-5 w-14" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-20" />
+            <SkeletonInline class="h-5 w-20" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-16" />
+            <SkeletonInline class="h-5 w-16" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-12" />
+            <SkeletonInline class="h-5 w-12" />
           </li>
         </ul>
       </nav>
@@ -113,9 +113,9 @@
         <div
           class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
         >
-          <span class="skeleton inline-block h-5 w-52" />
+          <SkeletonInline class="h-5 w-52" />
         </div>
-        <span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
+        <SkeletonInline class="absolute top-3 inset-ie-3 h-6 w-12 rounded" />
       </div>
     </section>
 
@@ -133,20 +133,20 @@
           <!-- Simulated README content -->
           <div class="space-y-4">
             <!-- Heading -->
-            <span class="skeleton block h-7 w-2/3" />
+            <SkeletonBlock class="h-7 w-2/3" />
             <!-- Paragraphs -->
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-4/5" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-4/5" />
             <!-- Gap for section break -->
-            <span class="skeleton block h-6 w-1/2 mt-6" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-3/4" />
+            <SkeletonBlock class="h-6 w-1/2 mt-6" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-3/4" />
             <!-- Code block placeholder -->
-            <div class="skeleton h-24 w-full rounded-lg mt-4" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-5/6" />
+            <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-5/6" />
           </div>
         </section>
       </div>
@@ -163,10 +163,10 @@
           </h2>
           <ul class="space-y-2 list-none m-0 p-0">
             <li>
-              <span class="skeleton inline-block h-5 w-28" />
+              <SkeletonInline class="h-5 w-28" />
             </li>
             <li>
-              <span class="skeleton inline-block h-5 w-24" />
+              <SkeletonInline class="h-5 w-24" />
             </li>
           </ul>
         </section>
@@ -181,12 +181,12 @@
           </h2>
           <!-- flex flex-wrap gap-1.5 -->
           <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
-            <li><span class="skeleton inline-block h-6 w-16 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-12 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-20 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-14 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-18 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-10 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-16 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-12 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-20 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-14 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-18 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-10 rounded" /></li>
           </ul>
         </section>
 
@@ -201,24 +201,24 @@
           <!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
           <div class="space-y-1">
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-16" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-16" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-14" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-14" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-18" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-18" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-14" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-14" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-16" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-16" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
           </div>
         </section>
@@ -234,20 +234,20 @@
           <!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
           <ul class="space-y-1 list-none m-0 p-0">
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-24" />
-              <span class="skeleton inline-block h-4 w-12" />
+              <SkeletonInline class="h-4 w-24" />
+              <SkeletonInline class="h-4 w-12" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-32" />
-              <span class="skeleton inline-block h-4 w-10" />
+              <SkeletonInline class="h-4 w-32" />
+              <SkeletonInline class="h-4 w-10" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-20" />
-              <span class="skeleton inline-block h-4 w-14" />
+              <SkeletonInline class="h-4 w-20" />
+              <SkeletonInline class="h-4 w-14" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-28" />
-              <span class="skeleton inline-block h-4 w-12" />
+              <SkeletonInline class="h-4 w-28" />
+              <SkeletonInline class="h-4 w-12" />
             </li>
           </ul>
         </section>
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 7c986f13c..214c8502d 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -217,20 +217,20 @@ const config = computed(() => {
             <div class="min-h-[75.195px]">
               <!-- Title row: date range (24px height) -->
               <div class="h-6 flex items-center ps-3">
-                <span class="skeleton h-3 w-36" />
+                <SkeletonInline class="h-3 w-36" />
               </div>
               <!-- Chart area: data label left, sparkline right -->
               <div class="aspect-[500/80] flex items-center">
                 <!-- Data label (covers ~42% width) -->
                 <div class="w-[42%] flex items-center ps-0.5">
-                  <span class="skeleton h-7 w-24" />
+                  <SkeletonInline class="h-7 w-24" />
                 </div>
                 <!-- Sparkline area (~58% width) -->
                 <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                  <span
+                  <SkeletonInline
                     v-for="i in 16"
                     :key="i"
-                    class="skeleton flex-1 rounded-sm"
+                    class="flex-1 rounded-sm"
                     :style="{ height: `${25 + ((i * 7) % 50)}%` }"
                   />
                 </div>
diff --git a/app/components/SkeletonBlock.vue b/app/components/SkeletonBlock.vue
new file mode 100644
index 000000000..c455c8979
--- /dev/null
+++ b/app/components/SkeletonBlock.vue
@@ -0,0 +1,10 @@
+<!-- Vue component that only takes a class as prop and adds `bg-bg-elevated rounded animate-skeleton-pulse` to that class -->
+<script setup lang="ts">
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="`bg-bg-elevated rounded animate-skeleton-pulse ${props.class ?? ''}`" />
+</template>
diff --git a/app/components/SkeletonInline.vue b/app/components/SkeletonInline.vue
new file mode 100644
index 000000000..dbfb255e7
--- /dev/null
+++ b/app/components/SkeletonInline.vue
@@ -0,0 +1,12 @@
+<!-- Vue component that only takes a class as prop and adds `bg-bg-elevated rounded animate-skeleton-pulse` to that class -->
+<script setup lang="ts">
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <span
+    :class="`inline-block bg-bg-elevated rounded animate-skeleton-pulse ${props.class ?? ''}`"
+  />
+</template>
diff --git a/app/components/Toggle.server.vue b/app/components/Toggle.server.vue
index 71d4e4ee9..293618c67 100644
--- a/app/components/Toggle.server.vue
+++ b/app/components/Toggle.server.vue
@@ -10,7 +10,7 @@ defineProps<{
     <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
-    <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
+    <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" />
   </div>
   <p v-if="description" class="text-sm text-fg-muted">
     {{ description }}
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 7f5b066b3..8debfb5b1 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -455,10 +455,10 @@ function handleClick(event: MouseEvent) {
                 class="self-baseline ms-1 sm:ms-2"
               />
               <template #fallback>
-                <ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
-                  <li class="skeleton w-8 h-5 rounded" />
-                  <li class="skeleton w-12 h-5 rounded" />
-                </ul>
+                <div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
+                  <SkeletonBlock class="w-8 h-5 rounded" />
+                  <SkeletonBlock class="w-12 h-5 rounded" />
+                </div>
               </template>
             </ClientOnly>
 
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 966bf18cb..02e3e9d12 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -482,31 +482,31 @@ defineOgImageComponent('Default', {
           <!-- Fake line numbers column -->
           <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
             <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
-              <span class="skeleton w-4 h-3 rounded-sm" />
+              <SkeletonInline class="w-4 h-3 rounded-sm" />
             </div>
           </div>
           <!-- Fake code content -->
           <div class="flex-1 p-4 space-y-1.5">
-            <div class="skeleton h-4 w-32 rounded-sm" />
-            <div class="skeleton h-4 w-48 rounded-sm" />
-            <div class="skeleton h-4 w-24 rounded-sm" />
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-64 rounded-sm" />
-            <div class="skeleton h-4 w-56 rounded-sm" />
-            <div class="skeleton h-4 w-40 rounded-sm" />
-            <div class="skeleton h-4 w-72 rounded-sm" />
+            <SkeletonBlock class="h-4 w-64 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-72 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-36 rounded-sm" />
-            <div class="skeleton h-4 w-52 rounded-sm" />
-            <div class="skeleton h-4 w-44 rounded-sm" />
-            <div class="skeleton h-4 w-28 rounded-sm" />
+            <SkeletonBlock class="h-4 w-36 rounded-sm" />
+            <SkeletonBlock class="h-4 w-52 rounded-sm" />
+            <SkeletonBlock class="h-4 w-44 rounded-sm" />
+            <SkeletonBlock class="h-4 w-28 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-60 rounded-sm" />
-            <div class="skeleton h-4 w-48 rounded-sm" />
-            <div class="skeleton h-4 w-32 rounded-sm" />
-            <div class="skeleton h-4 w-56 rounded-sm" />
-            <div class="skeleton h-4 w-40 rounded-sm" />
-            <div class="skeleton h-4 w-24 rounded-sm" />
+            <SkeletonBlock class="h-4 w-60 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
           </div>
         </div>
 
diff --git a/app/pages/docs/[...path].vue b/app/pages/docs/[...path].vue
index c592c5d4e..de9efc329 100644
--- a/app/pages/docs/[...path].vue
+++ b/app/pages/docs/[...path].vue
@@ -165,10 +165,10 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
       <!-- Main content -->
       <main class="flex-1 min-w-0">
         <div v-if="showLoading" class="p-6 sm:p-8 lg:p-12 space-y-4">
-          <div class="skeleton h-8 w-64 rounded" />
-          <div class="skeleton h-4 w-full max-w-2xl rounded" />
-          <div class="skeleton h-4 w-5/6 max-w-2xl rounded" />
-          <div class="skeleton h-4 w-3/4 max-w-2xl rounded" />
+          <SkeletonBlock class="h-8 w-64 rounded" />
+          <SkeletonBlock class="h-4 w-full max-w-2xl rounded" />
+          <SkeletonBlock class="h-4 w-5/6 max-w-2xl rounded" />
+          <SkeletonBlock class="h-4 w-3/4 max-w-2xl rounded" />
         </div>
 
         <div v-else-if="showEmptyState" class="p-6 sm:p-8 lg:p-12">
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index aefbebe6f..b81b1a38c 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -216,10 +216,7 @@ defineOgImageComponent('Default', {
                   >
                     {{ org.role }}
                   </span>
-                  <span
-                    v-else-if="org.isLoadingDetails"
-                    class="skeleton inline-block mt-1 h-5 w-16 rounded"
-                  />
+                  <SkeletonInline v-else-if="org.isLoadingDetails" class="mt-1 h-5 w-16 rounded" />
                 </div>
               </div>
 
@@ -236,7 +233,7 @@ defineOgImageComponent('Default', {
                       )
                     }}
                   </span>
-                  <span v-else-if="org.isLoadingDetails" class="skeleton inline-block h-4 w-20" />
+                  <SkeletonInline v-else-if="org.isLoadingDetails" class="h-4 w-20" />
                   <span v-else class="text-fg-subtle">—</span>
                 </div>
               </div>
diff --git a/uno.config.ts b/uno.config.ts
index e87a991fc..8d0795841 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -156,9 +156,6 @@ export default defineConfig({
     ['badge-purple', 'bg-badge-purple/10 text-badge-purple'],
     ['badge-pink', 'bg-badge-pink/10 text-badge-pink'],
     ['badge-subtle', 'bg-bg-subtle text-fg-subtle'],
-
-    // Skeleton loading
-    ['skeleton', 'bg-bg-elevated rounded animate-skeleton-pulse'],
   ],
   rules: [
     // Custom scale for active states

From 740fbc7772cb1e7824383bd8302c08123da82337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 03:47:01 +0100
Subject: [PATCH 06/11] refactor: replace single use class-shortcut with atomic
 classes

---
 app/components/FilterPanel.vue | 2 +-
 uno.config.ts                  | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/components/FilterPanel.vue b/app/components/FilterPanel.vue
index e244829df..349b174da 100644
--- a/app/components/FilterPanel.vue
+++ b/app/components/FilterPanel.vue
@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            class="input-base"
+            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
             @input="handleTextInput"
           />
         </div>
diff --git a/uno.config.ts b/uno.config.ts
index 8d0795841..5e552d751 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -136,12 +136,6 @@ export default defineConfig({
     ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
-    // Form elements
-    [
-      'input-base',
-      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)',
-    ],
-
     // Tags/badges
     [
       'tag',

From 05fc0002ec6725d5e465078146b0e0ac26605c3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 04:17:13 +0100
Subject: [PATCH 07/11] Remove unused prop

This was changed in #587
---
 app/components/Card.vue                 | 3 ---
 app/components/PackageCard.vue          | 2 +-
 app/components/SearchSuggestionCard.vue | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/components/Card.vue b/app/components/Card.vue
index 2e7bfe48c..191070f21 100644
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 defineProps<{
-  /** Whether this suggestion is currently selected (keyboard nav) */
-  selected?: boolean
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
 }>()
@@ -11,7 +9,6 @@ defineProps<{
   <article
     class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 8821241ba..6dee71fc0 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -22,7 +22,7 @@ const isExactMatch = computed(() => {
 </script>
 
 <template>
-  <Card :selected="selected" :isExactMatch="isExactMatch">
+  <Card :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index 265d95dff..b953c9345 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -12,7 +12,7 @@ defineProps<{
 </script>
 
 <template>
-  <Card :selected="selected" :isExactMatch="isExactMatch">
+  <Card :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"

From 156e7cc5ac614900b9a333256e6eea4bab703953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 14:28:23 +0100
Subject: [PATCH 08/11] Add explicit import to avoic naming conflict

---
 app/components/Package/Card.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index a1b4f3811..0d35143b4 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import Card from '../Card.vue'
+
 const props = defineProps<{
   /** The search result object containing package data */
   result: NpmSearchResult

From 86b3d1d5e62f40509db9ddffa92f04414e5ee086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sun, 1 Feb 2026 17:15:48 +0100
Subject: [PATCH 09/11] test: ignore components already under test via other
 components

---
 test/unit/a11y-component-coverage.spec.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 81d89fdfb..1ea09aeb8 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -41,6 +41,9 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Package/WeeklyDownloadStats.vue':
     'Uses vue-data-ui VueUiSparkline - has DOM measurement issues in test environment',
   'UserCombobox.vue': 'Unused component - intended for future admin features',
+  'Card.vue': 'Already covered indirectly via other component tests',
+  'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
+  'SkeletonInline.vue': 'Already covered indirectly via other component tests',
 }
 
 /**

From 2d32b62d51511d9ff1e8a5eaf4ec42c9086a9497 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Feb 2026 11:12:12 +0000
Subject: [PATCH 10/11] fix: small fixes

---
 app/components/{Card.vue => BaseCard.vue} |  0
 app/components/Package/Card.vue           |  6 ++----
 app/components/SearchSuggestionCard.vue   |  4 ++--
 app/components/SkeletonBlock.vue          |  9 +--------
 app/components/SkeletonInline.vue         | 11 +----------
 5 files changed, 6 insertions(+), 24 deletions(-)
 rename app/components/{Card.vue => BaseCard.vue} (100%)

diff --git a/app/components/Card.vue b/app/components/BaseCard.vue
similarity index 100%
rename from app/components/Card.vue
rename to app/components/BaseCard.vue
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 401ebfe34..44259da47 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Card from '../Card.vue'
-
 const props = defineProps<{
   /** The search result object containing package data */
   result: NpmSearchResult
@@ -31,7 +29,7 @@ const pkgDescription = useMarkdown(() => ({
 </script>
 
 <template>
-  <Card :isExactMatch="isExactMatch">
+  <BaseCard :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -160,5 +158,5 @@ const pkgDescription = useMarkdown(() => ({
         {{ keyword }}
       </li>
     </ul>
-  </Card>
+  </BaseCard>
 </template>
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index b953c9345..5c0beff9e 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -12,7 +12,7 @@ defineProps<{
 </script>
 
 <template>
-  <Card :isExactMatch="isExactMatch">
+  <BaseCard :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
@@ -61,5 +61,5 @@ defineProps<{
         aria-hidden="true"
       />
     </NuxtLink>
-  </Card>
+  </BaseCard>
 </template>
diff --git a/app/components/SkeletonBlock.vue b/app/components/SkeletonBlock.vue
index c455c8979..7467e4c10 100644
--- a/app/components/SkeletonBlock.vue
+++ b/app/components/SkeletonBlock.vue
@@ -1,10 +1,3 @@
-<!-- Vue component that only takes a class as prop and adds `bg-bg-elevated rounded animate-skeleton-pulse` to that class -->
-<script setup lang="ts">
-const props = defineProps<{
-  class?: string
-}>()
-</script>
-
 <template>
-  <div :class="`bg-bg-elevated rounded animate-skeleton-pulse ${props.class ?? ''}`" />
+  <div class="bg-bg-elevated rounded animate-skeleton-pulse" />
 </template>
diff --git a/app/components/SkeletonInline.vue b/app/components/SkeletonInline.vue
index dbfb255e7..3ac496f76 100644
--- a/app/components/SkeletonInline.vue
+++ b/app/components/SkeletonInline.vue
@@ -1,12 +1,3 @@
-<!-- Vue component that only takes a class as prop and adds `bg-bg-elevated rounded animate-skeleton-pulse` to that class -->
-<script setup lang="ts">
-const props = defineProps<{
-  class?: string
-}>()
-</script>
-
 <template>
-  <span
-    :class="`inline-block bg-bg-elevated rounded animate-skeleton-pulse ${props.class ?? ''}`"
-  />
+  <span class="inline-block bg-bg-elevated rounded animate-skeleton-pulse" />
 </template>

From 1bbbd2db60ab4f87974c5a6a9ad6e47361fc3074 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Feb 2026 11:14:20 +0000
Subject: [PATCH 11/11] test: update tests

---
 test/nuxt/a11y.spec.ts                    | 20 ++++++++++++++++++++
 test/unit/a11y-component-coverage.spec.ts |  1 -
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 1d0c50dc3..277599977 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -57,6 +57,7 @@ afterEach(() => {
 import {
   AppFooter,
   AppHeader,
+  BaseCard,
   UserAvatar,
   BuildEnvironment,
   CallToAction,
@@ -211,6 +212,25 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('BaseCard', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(BaseCard, {
+        slots: { default: '<p>Card content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with exact match highlight', async () => {
+      const component = await mountSuspended(BaseCard, {
+        props: { isExactMatch: true },
+        slots: { default: '<p>Exact match content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TooltipApp', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TooltipApp, {
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 1ea09aeb8..129ff5650 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -41,7 +41,6 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Package/WeeklyDownloadStats.vue':
     'Uses vue-data-ui VueUiSparkline - has DOM measurement issues in test environment',
   'UserCombobox.vue': 'Unused component - intended for future admin features',
-  'Card.vue': 'Already covered indirectly via other component tests',
   'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
 }