Design Principle
Skeletons should preview real content structure instead of adding extra visual noise.
Principle
Skeletons should preview real content structure instead of adding extra visual noise.
Design action
Match skeleton count, width, and position to the final layout; show key containers first and avoid endless shimmer or large mismatches.
Examples
Positive example: Lists, cards, details, tables, and AI generation results wait for data. Counterexample: Skeleton styling is more visually dominant than real content.
Apply when
Lists, cards, details, tables, and AI generation results wait for data. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Match skeleton count, width, and position to the final layout; show key containers first and avoid endless shimmer or large mismatches.