📖 Step 2: Design - UI/UX Basics#60 / 291
Skeleton UI
Skeleton UI
📖One-line summary
A gray placeholder screen shown while data is loading.
💡Easy explanation
The gray skeleton screen shown while data loads. Those shimmering gray rectangles in the Instagram feed — you've seen them.
✨Example
Skeleton before / content after (auto-switch)
⚡Vibe coding prompt examples
>_
Build a skeleton UI to show during data loading. Implement skeletons for the card list, profile area, and text blocks.
>_
Build a skeleton component using Tailwind CSS animate-pulse. Match the actual content's size and layout.
>_
Implement a skeleton UI with a CSS shimmer effect that flows from left to right.
Try these prompts in your AI coding assistant!