<!-- source-hash: 0762ecc460541acf4d69c0515fbfa03a -->
Storybook stories for the `MingoOnboardingCardSkeleton` and `MingoOnboardingListSkeleton` loading-state components, covering list variants by row count and individual card configurations.

## Key Components

| Story | Description |
|---|---|
| `Default` | List skeleton with 6 rows (standard empty-state replacement) |
| `FewRows` | List skeleton with 3 rows |
| `ManyRows` | List skeleton with 13 rows |
| `SingleRowDefault` | Isolated single card skeleton with default props |
| `SingleRowOneLine` | Single card with one description line |
| `SingleRowNoChips` | Single card with chip placeholders removed |
| `SingleRowCustomWidths` | Single card with custom `titleWidth`, `slashWidth`, and `chipWidths` |

## Usage Example

```typescript
// List skeleton — drop-in for the resolved onboarding card stack
<MingoOnboardingListSkeleton rows={6} />

// Single card skeleton with custom placeholder widths
<MingoOnboardingCardSkeleton
  titleWidth="w-48"
  slashWidth="w-28"
  descriptionLines={1}
  chipWidths={['w-20', 'w-16', 'w-14']}
/>
```

## Notes

- Stories are wrapped in a `w-[520px]` container with `bg-ods-bg` to simulate the live empty-state shell.
- `MingoOnboardingCardSkeleton` mirrors `MingoOnboardingCard` markup pixel-for-pixel (Figma node `7363:205938`), including `p-[var(--spacing-system-s)]`, `bg-ods-card`, `border-b` dividers, `size-4` icon slots, and `h-7` chip placeholders.
- `MingoOnboardingListSkeleton` wraps N rows in the same `rounded-md border overflow-hidden` shell used by the live component.