<!-- source-hash: ecac941a52e178236e11d54fe42337ec -->
Pure presentation component that renders an onboarding guide card in three layout variants — `catalog`, `default`, and `sm` — plus matching skeleton states for loading UI.

## Key Components

### `OnboardingGuideCard`
Main card component. Stateless and click-logic-free; the caller wraps with navigation and provides the resolved `href`.

| Prop | Type | Description |
|------|------|-------------|
| `guide` | `OnboardingGuide` | Guide entity data |
| `href` | `string` | Detail URL resolved by caller |
| `target` | `'_blank'` | Optional new-tab behavior |
| `size` | `'catalog' \| 'default' \| 'sm'` | Layout variant (default: `'default'`) |
| `placeholderUrl` | `string \| null` | OG fallback image for catalog/sm |
| `className` | `string` | Additional CSS classes |

### `OnboardingGuideCardSkeleton`
Loading placeholder that mirrors each layout variant's structure with animated pulse states.

### `HORIZONTAL_SIZE_TOKENS`
Internal token map for spacing/typography in the `default` variant.

## Variants

| Variant | Layout | Use Case |
|---------|--------|----------|
| `catalog` | Hero image + author grid | Public catalog page |
| `default` | Horizontal step-numbered | "More in section" rail |
| `sm` | Compact horizontal | Chat-inline rendering |

## Usage Example

```typescript
import { OnboardingGuideCard, OnboardingGuideCardSkeleton } from './onboarding-guide-card'

// Loading state
if (isLoading) {
  return <OnboardingGuideCardSkeleton size="catalog" />
}

// Catalog variant (public listing)
<OnboardingGuideCard
  guide={guide}
  href={`/guides/${guide.slug}`}
  size="catalog"
  placeholderUrl={ogImageUrl}
/>

// Chat inline (sm variant, new tab)
<OnboardingGuideCard
  guide={guide}
  href={`/guides/${guide.slug}`}
  size="sm"
  target="_blank"
  rel="noopener noreferrer"
/>
```