diff --git a/app/components/Card.vue b/app/components/Card.vue
new file mode 100644
index 000000000..191070f21
--- /dev/null
+++ b/app/components/Card.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  /** 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 focus-within:bg-bg-muted focus-within:border-border-hover"
+    :class="{
+      '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/Filter/Panel.vue b/app/components/Filter/Panel.vue
index e244829df..349b174da 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.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/app/components/Package/Card.vue b/app/components/Package/Card.vue
index e40b1db72..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
@@ -29,18 +31,7 @@ const pkgDescription = useMarkdown(() => ({
 </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 focus-within:bg-bg-muted focus-within:border-border-hover"
-    :class="{
-      '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 :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -169,5 +160,5 @@ const pkgDescription = useMarkdown(() => ({
         {{ keyword }}
       </li>
     </ul>
-  </article>
+  </Card>
 </template>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 103e39b2c..9bac0da4e 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.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>
@@ -110,10 +110,12 @@
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
-        <div class="code-block pe-16">
-          <span class="skeleton inline-block h-5 w-52" />
+        <div
+          class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
+        >
+          <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>
 
@@ -131,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>
@@ -161,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>
@@ -179,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>
 
@@ -199,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>
@@ -232,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/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 3bf674b35..3ee7382a0 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -223,20 +223,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/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index 83797dab5..b953c9345 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -12,18 +12,7 @@ defineProps<{
 </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 focus-within:bg-bg-muted focus-within:border-border-hover"
-    :class="{
-      '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 :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
@@ -72,5 +61,5 @@ defineProps<{
         aria-hidden="true"
       />
     </NuxtLink>
-  </article>
+  </Card>
 </template>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index 71d4e4ee9..293618c67 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/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/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/pages/[...package].vue b/app/pages/[...package].vue
index 9fa2d76f3..b4e5bc35e 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -503,10 +503,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 74f37dadb..4df73fa19 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 9b92f9212..97782cd99 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/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',
 }
 
 /**
diff --git a/uno.config.ts b/uno.config.ts
index 67a80d954..a0f730355 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -139,19 +139,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',
-      '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',
@@ -166,21 +153,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'],
-
-    // 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'],
-
-    // Subtle divider
-    ['divider', 'border-t border-border'],
-
-    // Section spacing
-    ['section', 'py-8 sm:py-12'],
   ],
   rules: [
     // Custom scale for active states