Design an Effective Skeleton Screen Loading Pattern

Design a skeleton screen (shimmer/placeholder loading) system for a [APPLICATION_TYPE] application that displays [CONTENT_TYPE] (e.g., user cards, news feeds, product listings, dashboards). The skeleton screens should reduce perceived loading time and maintain layout stability. **Deliverables:** 1. **Content Audit & Mapping**: - List the primary content blocks on the [PAGE_NAME] page - For each block, identify which elements get skeleton placeholders (text lines, images, avatars, buttons, charts) and which remain static (navigation, headers, icons) - Define the skeleton shape for each element: rectangular block, circular, rounded pill, or custom 2. **Visual Design Tokens**: - Base skeleton color (light mode and dark mode variants) - Animation style: shimmer gradient (specify direction, speed in ms, and easing), pulse opacity, or wave effect - Corner radius matching the actual component's border radius - Spacing that exactly mirrors the loaded state to prevent layout shift (CLS = 0) 3. **Skeleton Anatomy per Component**: - Provide skeleton specifications for at least 4 distinct components: [COMPONENT_1], [COMPONENT_2], [COMPONENT_3], [COMPONENT_4] - For each, describe: number of text line placeholders, their widths (vary between 60%-100% to mimic natural text), image placeholder dimensions, and spacing 4. **Transition Behavior**: - Define how content replaces skeletons: instant swap, fade-in (specify duration), or staggered reveal (specify delay between items) - Specify minimum display time (e.g., 300ms) to avoid flash of skeleton on fast connections 5. **Edge Cases**: Address behaviors for partial loading, error states during skeleton display, and infinite scroll skeleton append patterns. Format the output as a design system documentation page with code-ready specifications.