<!-- source-hash: 2ce1ed4f74bd8adbc4a828190f04cf96 -->
A React skeleton component that displays a loading placeholder for category cards with animated shimmer effects while content is being fetched.

## Key Components

- **CategoryCardSkeleton** - Main skeleton component that mimics the layout of a category card
- **CategoryCardSkeletonProps** - Interface defining optional className for styling customization
- **UnifiedSkeleton** - Imported base skeleton component for shapes and animations
- **TextSkeleton** - Imported text-specific skeleton components for headings and body text

## Usage Example

```typescript
import { CategoryCardSkeleton } from './category-card-skeleton'

// Basic usage
function CategoryGrid() {
  const [loading, setLoading] = useState(true)
  const [categories, setCategories] = useState([])

  return (
    <div className="grid grid-cols-3 gap-4">
      {loading ? (
        // Show skeleton placeholders while loading
        Array.from({ length: 6 }).map((_, i) => (
          <CategoryCardSkeleton key={i} />
        ))
      ) : (
        categories.map(category => (
          <CategoryCard key={category.id} {...category} />
        ))
      )}
    </div>
  )
}

// With custom styling
<CategoryCardSkeleton className="shadow-lg border-blue-200" />
```

The component renders a structured skeleton with 10 circular icon placeholders, text content blocks of varying widths, and an action button placeholder, all with proper ARIA labels for accessibility.