Design a Skeleton Screen Loading System for Seamless Perceived Performance

Design a skeleton screen (content placeholder) system for [APPLICATION NAME], a [APP TYPE, e.g., social media feed, e-commerce catalog, project management dashboard]. The app's primary content types include [CONTENT TYPE 1], [CONTENT TYPE 2], and [CONTENT TYPE 3]. Create a comprehensive skeleton screen specification: 1. **Content Audit & Mapping**: For each primary content type, break down the UI into skeleton-friendly zones: - Identify which elements get placeholder shapes (text lines, image blocks, avatar circles, buttons) - Specify exact placeholder dimensions that match the final rendered content to prevent layout shift (CLS) - Note elements that should NOT be skeletonized (e.g., persistent navigation, fixed headers) 2. **Visual Styling**: Define the skeleton's visual language: - Base placeholder color: [suggest specific hex based on light/dark theme] - Animation type: shimmer (direction and speed), pulse (opacity range and duration), or wave - Border radius consistency with the design system - Contrast ratio against the page background 3. **Animation Specification**: Provide exact CSS/motion values: - Animation duration (recommend range) - Easing function - Shimmer gradient colors and angle - Stagger delay between skeleton groups (if applicable) 4. **Loading Hierarchy**: Define the progressive loading sequence: - Which sections appear as skeletons first vs. load instantly - Transition behavior: fade-in, slide-up, or instant swap when real content arrives - Handling of partially loaded states (e.g., text loads before images) 5. **Edge Cases**: Address skeleton behavior for: - Extremely fast loads (<200ms): avoid skeleton flash - Failed loads / timeouts: transition from skeleton to error state - Variable content lengths: how skeletons adapt to unknown content size - Infinite scroll: skeleton rows appended at the bottom 6. **Accessibility**: Ensure screen readers announce 'Content loading' with appropriate aria-busy and aria-live attributes. Output as a developer-ready specification with annotated wireframes described in detail.