diff --git a/app/components/BaseCard.vue b/app/components/BaseCard.vue
new file mode 100644
index 0000000000..4203f1b0de
--- /dev/null
+++ b/app/components/BaseCard.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 contrast-more:border-accent/90 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 e244829df6..349b174da0 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 28f39ae99e..44259da478 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -29,18 +29,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 contrast-more:border-accent/90 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"
-    />
+  <BaseCard :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -169,5 +158,5 @@ const pkgDescription = useMarkdown(() => ({
         {{ keyword }}
       </li>
     </ul>
-  </article>
+  </BaseCard>
 </template>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 0b0c66e95b..89f429c1d0 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.published') }}
           </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 3cb4b93daf..057fe9f17b 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -221,20 +221,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 9060f16ebb..5c0beff9e8 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 contrast-more:border-accent/90 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"
-    />
+  <BaseCard :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
@@ -72,5 +61,5 @@ defineProps<{
         aria-hidden="true"
       />
     </NuxtLink>
-  </article>
+  </BaseCard>
 </template>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index 71d4e4ee93..293618c67e 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 0000000000..7467e4c103
--- /dev/null
+++ b/app/components/SkeletonBlock.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="bg-bg-elevated rounded animate-skeleton-pulse" />
+</template>
diff --git a/app/components/SkeletonInline.vue b/app/components/SkeletonInline.vue
new file mode 100644
index 0000000000..3ac496f76b
--- /dev/null
+++ b/app/components/SkeletonInline.vue
@@ -0,0 +1,3 @@
+<template>
+  <span class="inline-block bg-bg-elevated rounded animate-skeleton-pulse" />
+</template>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 268221d223..9ef07ae6ac 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -493,31 +493,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/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
index 6c25bc7534..eb3b862794 100644
--- a/app/pages/package-docs/[...path].vue
+++ b/app/pages/package-docs/[...path].vue
@@ -166,10 +166,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/package/[...package].vue b/app/pages/package/[...package].vue
index 2d1301ea89..7b0c1c8384 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -476,10 +476,10 @@ defineOgImageComponent('Package', {
               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/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index b3320d1826..5cad2bba46 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -208,10 +208,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>
 
@@ -228,7 +225,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/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 1d0c50dc3c..277599977c 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 81d89fdfb6..129ff56504 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -41,6 +41,8 @@ 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',
+  '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 284aabc760..4d9c6eac47 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -142,19 +142,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',
@@ -169,21 +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'],
-
-    // 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