diff --git a/apps/web/src/components/DiffPanelShell.tsx b/apps/web/src/components/DiffPanelShell.tsx
index 7bc4ad7acfb720303054a1f93b5004552be85118..61d78518b00a01c3a9600776d847a68fc1ec7556 100644
--- a/apps/web/src/components/DiffPanelShell.tsx
+++ b/apps/web/src/components/DiffPanelShell.tsx
@@ -50,13 +50,13 @@ export function DiffFileHeaderSkeleton({ titleClassName }: { titleClassName: str
   return (
     <div className="flex h-8 items-center gap-2 px-2 pr-3">
       <div className="flex size-5 shrink-0 items-center justify-center">
-        <Skeleton className="size-2.5 rounded-[2px]" />
+        <Skeleton className="size-2.5" />
       </div>
-      <Skeleton className="size-5 shrink-0 rounded-md" />
-      <Skeleton className={cn("h-3 rounded-full", titleClassName)} />
+      <Skeleton className="size-5 shrink-0" />
+      <Skeleton shape="pill" className={cn("h-3", titleClassName)} />
       <div className="ml-auto flex shrink-0 items-center gap-2">
-        <Skeleton className="h-3 w-5 rounded-full" />
-        <Skeleton className="h-3 w-5 rounded-full" />
+        <Skeleton shape="pill" className="h-3 w-5" />
+        <Skeleton shape="pill" className="h-3 w-5" />
       </div>
     </div>
   );
@@ -65,8 +65,8 @@ export function DiffFileHeaderSkeleton({ titleClassName }: { titleClassName: str
 function DiffCodeLineSkeleton({ contentClassName }: { contentClassName: string }) {
   return (
     <div className="flex items-center gap-3">
-      <Skeleton className="h-2.5 w-5 shrink-0 rounded-full" />
-      <Skeleton className={cn("h-2.5 rounded-full", contentClassName)} />
+      <Skeleton shape="pill" className="h-2.5 w-5 shrink-0" />
+      <Skeleton shape="pill" className={cn("h-2.5", contentClassName)} />
     </div>
   );
 }
@@ -82,7 +82,7 @@ export function DiffPanelLoadingState(props: { label: string }) {
       <DiffFileHeaderSkeleton titleClassName="w-1/2 max-w-64" />
       <div className="flex h-6 items-center gap-2 px-2 pr-3">
         <div className="h-px flex-1 bg-border/40" />
-        <Skeleton className="h-2.5 w-24 rounded-full" />
+        <Skeleton shape="pill" className="h-2.5 w-24" />
         <div className="h-px flex-1 bg-border/40" />
       </div>
       <div className="space-y-2 px-3 py-2">
diff --git a/apps/web/src/components/clerk/MobileClientsUserProfilePage.tsx b/apps/web/src/components/clerk/MobileClientsUserProfilePage.tsx
index 22449c336742fcf110d39c08f0b873d159a3b246..83fcde596ec5c87f9ab6f988b7ddd22c0cfb7323 100644
--- a/apps/web/src/components/clerk/MobileClientsUserProfilePage.tsx
+++ b/apps/web/src/components/clerk/MobileClientsUserProfilePage.tsx
@@ -69,7 +69,7 @@ function MobileClientsSkeleton() {
       {MOBILE_CLIENT_SKELETON_ROWS.map((row) => (
         <div key={row} className="py-4">
           <div className="flex gap-3">
-            <Skeleton className="size-8 shrink-0 rounded-lg" />
+            <Skeleton shape="card" className="size-8 shrink-0" />
             <div className="flex-1 space-y-2">
               <Skeleton className="h-3.5 w-36" />
               <Skeleton className="h-3 w-28" />
diff --git a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
index 5d4e002cf8653d0c26cd729a74e567f3f091b35b..de054d0a5d29c82c0a6bd87b0e6b837f64d73656 100644
--- a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
+++ b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
@@ -57,10 +57,10 @@ function RemoteEnvironmentRowsSkeleton() {
     <div className={ITEM_ROW_CLASSNAME}>
       <div className={ITEM_ROW_INNER_CLASSNAME}>
         <div className="min-w-0 flex-1 space-y-2">
-          <Skeleton className="h-4 w-32 rounded-full" />
-          <Skeleton className="h-3 w-20 rounded-full" />
+          <Skeleton shape="pill" className="h-4 w-32" />
+          <Skeleton shape="pill" className="h-3 w-20" />
         </div>
-        <Skeleton className="h-7 w-16 rounded-md" />
+        <Skeleton className="h-7 w-16" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/settings/SourceControlSettings.tsx b/apps/web/src/components/settings/SourceControlSettings.tsx
index d7d8be98cc66cb8e3a4f1776a092c31a65f336a6..82ccab88c6a54202c1ddfafc01d1b8ea3758be1c 100644
--- a/apps/web/src/components/settings/SourceControlSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlSettings.tsx
@@ -440,20 +440,21 @@ function SourceControlSectionSkeleton({
             <div className="min-w-0 flex-1 space-y-2">
               <div className="flex items-center gap-2">
                 <span className="relative inline-flex size-5 shrink-0 items-center justify-center">
-                  <Skeleton className="size-4.5 rounded-md" />
+                  <Skeleton className="size-4.5" />
                   <Skeleton
-                    className="pointer-events-none absolute -left-0.5 -top-0.5 size-2 rounded-full ring-2 ring-background"
+                    shape="pill"
+                    className="pointer-events-none absolute -left-0.5 -top-0.5 size-2"
                     aria-hidden
                   />
                 </span>
-                <Skeleton className="h-4 w-28 rounded-full" />
-                <Skeleton className="h-5 w-14 rounded-full" />
+                <Skeleton shape="pill" className="h-4 w-28" />
+                <Skeleton shape="pill" className="h-5 w-14" />
               </div>
-              <Skeleton className="h-3 w-full max-w-xs rounded-full" />
+              <Skeleton shape="pill" className="h-3 w-full max-w-xs" />
             </div>
             <div className="flex shrink-0 items-center gap-2">
-              <Skeleton className="size-7 rounded-md" />
-              <Skeleton className="h-5 w-9 rounded-full" />
+              <Skeleton className="size-7" />
+              <Skeleton shape="pill" className="h-5 w-9" />
             </div>
           </div>
         </div>
diff --git a/apps/web/src/components/ui/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
index 0d6e12eaa580fe249642972fd971140c60a9af43..f9fe5b5592f8c68c62881a3c027ade64a7185a7c 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -1,12 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "~/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+// A skeleton's width and height are its content, so consumers size it through
+// className (the lint contract allows layout there). Its shape is not.
+const skeletonVariants = cva("bg-muted-foreground/15 motion-safe:animate-skeleton", {
+  variants: {
+    shape: {
+      block: "rounded-sm",
+      card: "rounded-lg",
+      pill: "rounded-full",
+    },
+  },
+  defaultVariants: { shape: "block" },
+});
+
+function Skeleton({
+  className,
+  shape,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>) {
   return (
-    <div
-      className={cn("rounded-sm bg-muted-foreground/15 motion-safe:animate-skeleton", className)}
-      data-slot="skeleton"
-      {...props}
-    />
+    <div className={cn(skeletonVariants({ shape }), className)} data-slot="skeleton" {...props} />
   );
 }
 
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 0936217f970278c1bc3d11f86f2fa6e9200ca21d..02650a16edce3f342346eaf85d6e410c212348c3 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -868,8 +868,8 @@ function UsageSkeleton() {
             <div key={provider} className="flex flex-col gap-1">
               <div className="flex min-h-5 items-center justify-between gap-4">
                 <span className="flex items-center gap-2">
-                  <Skeleton className="size-2 shrink-0 rounded-full" />
-                  <Skeleton className="size-4 shrink-0 rounded-full" />
+                  <Skeleton shape="pill" className="size-2 shrink-0" />
+                  <Skeleton shape="pill" className="size-4 shrink-0" />
                   <Skeleton className="h-3.5 w-20" />
                 </span>
                 <Skeleton className="h-3.5 w-14" />
@@ -882,8 +882,8 @@ function UsageSkeleton() {
         <div className="flex flex-col gap-3">
           <Skeleton className="h-5 w-24" />
           <div className="flex flex-col gap-1">
-            <Skeleton className="ml-16 h-56 bg-muted-foreground/10" />
-            <Skeleton className="ml-16 h-4 bg-muted-foreground/10" />
+            <Skeleton className="ml-16 h-56" />
+            <Skeleton className="ml-16 h-4" />
           </div>
         </div>
       </section>
@@ -905,9 +905,9 @@ function UsageSkeleton() {
       <section className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-3">
           <h2 className="text-sm font-medium text-foreground">Breakdown</h2>
-          <Skeleton className="h-7 w-28 rounded-lg" />
+          <Skeleton shape="card" className="h-7 w-28" />
         </div>
-        <Skeleton className="h-44 bg-muted-foreground/10" />
+        <Skeleton className="h-44" />
       </section>
     </>
   );
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index bdf34708ecd7101f0e266073ae2355dc3a7c7ee2..db8a73b20326fb891a39006072178a8b19ec8a98 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 1008;
+export const RESTYLE_CEILING = 981;
 
 const RULE = "shadcn(no-restyle)";