<!-- source-hash: 488cd803a90fe77f309f227712b7625f -->
A comprehensive collection of specialized skeleton loading components for different content layouts and user interface patterns.

## Key Components

### Content Layout Skeletons
- **`ParagraphSkeleton`** - Multi-line text blocks with natural line length variation
- **`ListSkeleton`** - Navigation menus and categorized lists with optional icons/actions
- **`TableSkeleton`** - Data tables with configurable rows and columns
- **`FormSkeleton`** - Input fields, labels, and form buttons

### Navigation & UI Skeletons
- **`NavigationSkeleton`** - Menu items for horizontal/vertical navigation bars
- **`ProfileSkeleton`** - User profiles with avatar, bio, and statistics
- **`CommentSkeleton`** - User-generated content with ratings and reply threads

### Feature & Content Skeletons
- **`FeatureListSkeleton`** - Product features with optional grouping and icons
- **`TimelineSkeleton`** - Activity feeds and chronological content
- **`PricingSkeleton`** - Pricing plans with features and call-to-action buttons

## Usage Example

```typescript
import { 
  ParagraphSkeleton, 
  ProfileSkeleton, 
  PricingSkeleton 
} from './content-skeleton'

// Loading state for article content
<ParagraphSkeleton lines={6} className="mb-8" />

// User profile loading with bio and stats
<ProfileSkeleton 
  showBio={true} 
  showStats={true} 
  className="border rounded-lg p-4" 
/>

// Pricing page with 3 plan columns
<PricingSkeleton plans={3} className="max-w-6xl mx-auto" />

// Comment section with ratings and replies
<CommentSkeleton 
  showRating={true} 
  showReplies={true} 
/>
```

Each component uses the unified skeleton system and includes responsive design patterns, semantic HTML structure, and accessibility attributes for optimal loading states across different content types.