@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -27,6 +27,7 @@ import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
 import { CardHoverPlay } from '../../features/video-center-badge';
 import { VideoHoverPreviewSurface } from '../../features/video-hover-preview';
 import { EntityIcon } from '../../icon-display';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -138,20 +139,20 @@ function CaseStudyPersonRow({ study }: { study: CaseStudyCardData }) {
 export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' | 'result' }) {
   if (size === 'result') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK, 'animate-pulse')}>
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK)}>
         <div className="flex h-[60px] shrink-0 items-center gap-3">
-          <div className="h-12 w-12 rounded-full bg-ods-border" />
+          <UnifiedSkeleton className="h-12 w-12 rounded-full" />
           <div className="flex-1 space-y-2">
-            <div className="h-4 w-2/3 rounded bg-ods-border" />
-            <div className="h-3 w-1/2 rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+            <UnifiedSkeleton className="h-3 w-1/2 rounded" />
           </div>
         </div>
         <div className={CASE_STUDY_RESULT_METRIC_BOX} data-testid="case-study-result-skeleton-metric">
-          <div className="h-10 w-1/3 rounded bg-ods-border" />
-          <div className="h-4 w-3/4 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-10 w-1/3 rounded" />
+          <UnifiedSkeleton className="h-4 w-3/4 rounded" />
         </div>
         <div className={CASE_STUDY_RESULT_FOOTER_BOX}>
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
         </div>
       </div>
     );
@@ -159,34 +160,34 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-1/2 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-1/2 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
           </span>
         </span>
       </span>
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-6 p-6')}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
       {/* Skeleton aspect matches the real card's image slot (OG 1200×630) */}
-      <div className="aspect-[1200/630] w-full rounded-sm bg-ods-border" />
+      <UnifiedSkeleton className="aspect-[1200/630] w-full rounded-sm" />
       <div className="flex h-[72px] flex-col gap-2">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-5 w-1/2 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
       </div>
       <div className="flex h-[60px] items-center gap-3">
-        <div className="h-12 w-12 rounded-full bg-ods-border" />
+        <UnifiedSkeleton className="h-12 w-12 rounded-full" />
         <div className="flex-1 space-y-2">
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
-          <div className="h-3 w-1/2 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
         </div>
       </div>
     </div>

package/src/components/chat/entity-cards/chat-ticket-item.tsx

@@ -4,7 +4,7 @@ import { ChevronRight } from 'lucide-react';
 import { type ButtonHTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../../utils/cn';
 import { WrenchIcon } from '../../icons-v2-generated/household/wrench-icon';
-import { Skeleton } from '../../ui/skeleton';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Tag } from '../../ui/tag';
 import { TicketStatusTag, resolveStatusTagProps, resolveTicketStatus } from '../../ui/ticket-status-tag';
 
@@ -72,14 +72,14 @@ const ChatTicketItem = forwardRef<HTMLButtonElement, ChatTicketItemProps>(
         >
           <div className="flex min-w-0 flex-1 flex-col justify-center gap-1">
             {/* title line */}
-            <Skeleton className="h-5 w-1/2" />
+            <UnifiedSkeleton className="h-5 w-1/2" />
             {/* subtitle line */}
-            <Skeleton className="h-4 w-1/3" />
+            <UnifiedSkeleton className="h-4 w-1/3" />
           </div>
           {/* status tag */}
-          <Skeleton className="h-8 w-20 shrink-0 rounded-r-md" />
+          <UnifiedSkeleton className="h-8 w-20 shrink-0 rounded-r-md" />
           {/* chevron box */}
-          <Skeleton className="size-12 shrink-0 rounded-md" />
+          <UnifiedSkeleton className="size-12 shrink-0 rounded-md" />
         </div>
       );
     }

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -13,6 +13,7 @@ import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
 import type { CustomerInterview } from '../../../types/customer-interview';
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -54,39 +55,39 @@ export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'de
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-2/5 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
           </span>
         </span>
       </span>
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-6 p-6')}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
       {/* Aspect matches the loaded image slot (OG 1200×630) */}
-      <div className="aspect-[1200/630] w-full rounded-sm bg-ods-border" />
+      <UnifiedSkeleton className="aspect-[1200/630] w-full rounded-sm" />
       <div className="space-y-2">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-5 w-1/2 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
       </div>
       <div className="space-y-2">
-        <div className="h-3 w-full rounded bg-ods-border" />
-        <div className="h-3 w-5/6 rounded bg-ods-border" />
-        <div className="h-3 w-4/5 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-3 w-full rounded" />
+        <UnifiedSkeleton className="h-3 w-5/6 rounded" />
+        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
       </div>
       <div className="mt-auto flex h-[60px] items-center gap-3">
-        <div className="h-12 w-12 rounded-full bg-ods-border" />
+        <UnifiedSkeleton className="h-12 w-12 rounded-full" />
         <div className="flex-1 space-y-2">
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
-          <div className="h-3 w-1/2 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
         </div>
       </div>
     </div>

package/src/components/chat/entity-cards/data-room-doc-card.tsx

@@ -16,6 +16,7 @@
 import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import type { DataRoomDocCardItem } from '../types/entities/data-room-doc';
 import {
@@ -104,17 +105,17 @@ export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
         </span>
       </span>
       <span className="flex h-5 shrink-0 items-center self-start">
-        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
       </span>
     </span>
   );

package/src/components/chat/entity-cards/design-doc-card.tsx

@@ -62,8 +62,6 @@ export function DesignDocCardSkeleton() {
         CONTENT_CARD_SKELETON_FRAME_CLASS,
         'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
       )}
-      role="status"
-      aria-label="Loading design doc"
     >
       <div className="flex w-full items-center gap-[16px]">
         <div className="flex min-w-0 flex-1 flex-col gap-2">

package/src/components/chat/entity-cards/generic-entity-card.tsx

@@ -12,6 +12,7 @@ import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import {
   COMPACT_CARD_META_ROW,
@@ -127,18 +128,18 @@ export function GenericEntityCardSkeleton({ className }: { className?: string })
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
         </span>
-        <span className="h-3 w-1/4 rounded bg-ods-bg/70" />
+        <UnifiedSkeleton as="span" className="h-3 w-1/4 rounded" />
       </span>
       <span className="flex h-5 shrink-0 items-center self-start">
-        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
       </span>
     </span>
   );

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -21,6 +21,7 @@ import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { GitHubActivityItem, GitHubActivityKind, PrReviewState } from '../types/entities/github-activity';
 import {
   COMPACT_CARD_ICON_SLOT,
@@ -295,33 +296,33 @@ export function GitHubActivityCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 animate-pulse items-center gap-3 ${className ?? ''}`}>
+      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
         <div className="flex w-28 shrink-0 items-center gap-2">
-          <div className="h-3.5 w-3.5 rounded bg-ods-bg" />
-          <div className="h-3 w-16 rounded bg-ods-bg" />
+          <UnifiedSkeleton className="h-3.5 w-3.5 rounded" />
+          <UnifiedSkeleton className="h-3 w-16 rounded" />
         </div>
-        <div className="h-3 w-2/3 flex-1 rounded bg-ods-bg" />
-        <div className="h-3 w-40 shrink-0 rounded bg-ods-bg/60" />
-        <div className="h-3 w-20 shrink-0 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+        <UnifiedSkeleton className="h-3 w-40 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
       </div>
     );
   }
   return (
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+      <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className={COMPACT_CARD_TITLE_ROW}>
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
-          <span className="h-3 w-1/2 rounded bg-ods-bg/70" />
+          <UnifiedSkeleton as="span" className="h-3 w-1/2 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
           <span className={COMPACT_CARD_SUMMARY}>{COMPACT_CARD_ROW_FILLER}</span>
         </span>
       </span>
       <span className="flex h-5 shrink-0 items-center self-start">
-        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
       </span>
     </span>
   );

package/src/components/chat/entity-cards/hubspot-ticket-card.tsx

@@ -13,6 +13,7 @@ import { ExternalLink } from 'lucide-react';
 import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import type { HubspotTicketItem } from '../types/entities/hubspot-ticket';
 import {
@@ -177,11 +178,11 @@ export function HubspotTicketCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 animate-pulse items-center gap-3 ${className ?? ''}`}>
-        <div className="h-3 w-40 shrink-0 rounded bg-ods-bg" />
-        <div className="h-3 w-2/3 flex-1 rounded bg-ods-bg/60" />
-        <div className="h-3 w-16 shrink-0 rounded bg-ods-bg/60" />
-        <div className="h-3 w-20 shrink-0 rounded bg-ods-bg/60" />
+      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
+        <UnifiedSkeleton className="h-3 w-40 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+        <UnifiedSkeleton className="h-3 w-16 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
       </div>
     );
   }
@@ -189,23 +190,23 @@ export function HubspotTicketCardSkeleton({
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 flex-wrap items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-12 rounded-full bg-ods-bg/60" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-12 rounded-full" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-4/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
-          <span className="h-5 w-2/5 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-4/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-2/5 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
-          <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+          <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
         </span>
       </span>
       <span className="flex h-5 shrink-0 items-center self-start">
-        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
       </span>
     </span>
   );

package/src/components/chat/entity-cards/index.ts

@@ -27,9 +27,11 @@ export {
 } from './content-card-frame';
 export {
   AdminContentCardGrid,
+  AdminContentCardGridSkeleton,
   AdminContentCardSkeleton,
   ADMIN_CONTENT_CARD_GRID_CLASS,
   type AdminContentCardGridProps,
+  type AdminContentCardGridSkeletonProps,
 } from './admin-content-card-grid';
 export { EmployeeEntryCard, EmployeeEntryCardSkeleton, EmployeeEntryBadge } from './employee-entry-card';
 export type { EmployeeEntryCardData, EmployeeEntryCardProps } from './employee-entry-card';

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -11,6 +11,7 @@
 import { Calendar } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -52,30 +53,30 @@ export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'defau
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
-            <span className="h-3.5 w-1/2 rounded bg-ods-bg" />
-            <span className="h-4 w-8 shrink-0 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-1/2 rounded" />
+            <UnifiedSkeleton as="span" className="h-4 w-8 shrink-0 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
           </span>
         </span>
       </span>
     );
   }
   return (
-    <div className={`h-full animate-pulse ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
-      <div className="aspect-[1200/630] bg-ods-border" />
+    <div className={`h-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
+      <UnifiedSkeleton className="aspect-[1200/630]" />
       <div className="space-y-3 p-4">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-3 w-full rounded bg-ods-border" />
-        <div className="h-3 w-4/5 rounded bg-ods-border" />
-        <div className="h-4 w-1/3 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-3 w-full rounded" />
+        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
+        <UnifiedSkeleton className="h-4 w-1/3 rounded" />
       </div>
     </div>
   );

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -23,6 +23,7 @@ import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { formatDurationMMSS } from '../../../utils/format';
 import { CardHoverPlay } from '../../features/video-center-badge';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { OnboardingGuide } from '../types/entities/onboarding-guide';
 import {
   COMPACT_CARD_OUTER,
@@ -94,17 +95,17 @@ const HORIZONTAL_SIZE_TOKENS = {
 export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
   if (size === 'catalog') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-4 p-6')}>
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6')}>
         <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <div className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border md:w-[256px]" />
+          <UnifiedSkeleton className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg md:w-[256px]" />
           <div className="flex min-w-0 flex-1 flex-col">
             <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]">
-              <div className="h-[25px] w-3/4 rounded bg-ods-border md:h-[30px]" />
-              <div className="h-[25px] w-1/2 rounded bg-ods-border md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-3/4 rounded md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-1/2 rounded md:h-[30px]" />
             </div>
             <div className="flex min-h-[46px] flex-col justify-start gap-2 md:min-h-[52px]">
-              <div className="h-3 w-full rounded bg-ods-border/70" />
-              <div className="h-3 w-5/6 rounded bg-ods-border/70" />
+              <UnifiedSkeleton className="h-3 w-full rounded" />
+              <UnifiedSkeleton className="h-3 w-5/6 rounded" />
             </div>
           </div>
         </div>
@@ -115,16 +116,16 @@ export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'cata
               className="flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r"
             >
               <div className="flex flex-col gap-2">
-                <div className="h-6 w-32 rounded bg-ods-border" />
-                <div className="h-3 w-20 rounded bg-ods-border" />
+                <UnifiedSkeleton className="h-6 w-32 rounded" />
+                <UnifiedSkeleton className="h-3 w-20 rounded" />
               </div>
             </div>
           ))}
           <div className="flex items-center gap-3 p-4">
-            <div className="h-10 w-10 shrink-0 rounded-full bg-ods-border" />
+            <UnifiedSkeleton className="h-10 w-10 shrink-0 rounded-full" />
             <div className="flex min-w-0 flex-1 flex-col gap-2">
-              <div className="h-4 w-3/4 rounded bg-ods-border" />
-              <div className="h-3 w-1/2 rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded" />
             </div>
           </div>
         </div>
@@ -134,34 +135,32 @@ export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'cata
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-2/5 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
           </span>
         </span>
         <span className="flex h-5 shrink-0 items-center self-start">
-          <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
         </span>
       </span>
     );
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
   return (
-    <span
-      className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding} animate-pulse`}
-    >
+    <span className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`}>
       <span className={`inline-flex shrink-0 items-center justify-center rounded-full bg-ods-bg ${t.step}`} />
       <span className="flex min-w-0 flex-1 flex-col gap-2">
-        <span className="block h-4 w-2/3 rounded bg-ods-bg" />
-        <span className="block h-3 w-1/3 rounded bg-ods-bg/70" />
-        <span className="block h-3 w-full rounded bg-ods-bg/40" />
+        <UnifiedSkeleton as="span" className="block h-4 w-2/3 rounded" />
+        <UnifiedSkeleton as="span" className="block h-3 w-1/3 rounded" />
+        <UnifiedSkeleton as="span" className="block h-3 w-full rounded" />
       </span>
     </span>
   );