` with `role="status"` and `aria-label` for accessibility compliance during loading states. - **`UnifiedSkeleton`** — Used for circular icon placeholders (10 items) and the rectangular arrow button placeholder. - **`TextSkeleton.Heading` / `TextSkeleton.Body`** — Specialized text skeleton variants for the card's title and description lines. ## Usage Example ```typescript import { CategoryCardSkeleton } from './category-card-skeleton' // Basic usage in a loading state function CategoryGrid() { return (

{isLoading ? Array.from({ length: 6 }).map((_, i) => ( )) : categories.map((cat) => ( ))}

) } // With custom className override ``` ## Structure | Region | Skeleton Element | |---|---| | Icons row | 10 × circular `UnifiedSkeleton` (40×40px) | | Heading | `TextSkeleton.Heading` at 75% width | | Body lines | 2 × `TextSkeleton.Body` at 50% / 100% width | | Arrow button | Rectangular `UnifiedSkeleton` (48×48px, 6px radius) | **Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib)