<!-- source-hash: 060ea3cce7fdd7cdb79d215a50260791 -->
Storybook stories for the `ContentLoader` UI component, showcasing all skeleton loading variants and configuration options.

## Key Components

| Export | Description |
|--------|-------------|
| `Card` | Default card-grid skeleton story |
| `Form` | Form fields skeleton story |
| `Detail` | Detail page with sidebar skeleton story |
| `List` | List rows with avatars skeleton story |
| `WithoutTitle` | Card variant without a title skeleton |
| `ManyItems` | Stress test with 8 list items |
| `SingleItem` | Single card skeleton |
| `CustomContainer` | Form skeleton with custom container class |
| `AllVariants` | Side-by-side showcase of all four variants using named loader components |
| `ShortcutComponents` | Demonstrates `CardLoader`, `FormLoader`, `DetailLoader`, `ListLoader` shortcut components |

## Usage Example

```typescript
import {
  ContentLoader,
  CardLoader,
  FormLoader,
  DetailLoader,
  ListLoader,
} from '@/components/ui/content-loader';

// Generic loader with variant prop
<ContentLoader variant="card" items={4} showTitle />

// Shortcut components for common patterns
<CardLoader items={3} showTitle />
<FormLoader items={5} showTitle />
<DetailLoader items={2} showTitle containerClassName="bg-bg-card rounded-lg" />
<ListLoader items={8} />
```

## Controls

| Prop | Type | Range/Options |
|------|------|---------------|
| `variant` | `select` | `card`, `form`, `detail`, `list` |
| `items` | `number` | 1–12 |
| `showTitle` | `boolean` | `true` / `false` |
| `containerClassName` | `string` | Any Tailwind/CSS class string |