diff --git a/apps/web/src/components/ui/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
index d2b4b7802..7bc70313c 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -61,7 +61,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
   ({ variant = 'rectangular', width, height, className, ...props }, ref) => {
-    const baseClasses = 'animate-pulse bg-kodo-steel/50';
+    const baseClasses = 'relative overflow-hidden bg-muted/50';
 
     const variantClasses = {
       text: 'rounded h-4 w-full',
@@ -80,7 +80,10 @@ const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
         className={cn(baseClasses, variantClasses[variant], className)}
         style={style}
         {...props}
-      />
+      >
+        {/* Shimmer overlay — sweeping gradient for premium loading feel */}
+        <div className="absolute inset-0 skeleton-shimmer" />
+      </div>
     );
   },
 );
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index bc05562b2..6089ed0b0 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1072,6 +1072,27 @@
   }
 }
 
+/* Skeleton shimmer — premium loading effect (Spotify/Discord-like) */
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 40%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.06) 60%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-shimmer {
+    animation: none;
+    background: none;
+  }
+}
+
 @keyframes spin-slow {
   to {
     transform: rotate(360deg);