| name | jeff-cls-stability |
| description | Jeff's layout-stability conventions to prevent cumulative layout shift (CLS). Use when building loading states, image-heavy UIs, cards, tables, maps, and media containers. |
Jeff's CLS Stability
Prevent content jumping by reserving space and matching loading/content dimensions.
Apply when
- Building loading states and skeletons.
- Rendering avatars/images/media/maps/charts.
- Implementing tables/cards that switch loading-empty-data states.
Rules
- Give images/media explicit dimensions or fixed aspect ratio.
- Keep avatar containers fixed-size with non-shrinking children.
- Match skeleton dimensions to final content dimensions.
- Use fixed/min-height wrappers for conditional content areas.
- Keep map/media containers at reserved final height.
- Prevent stacked elements from compressing (
shrink-0).
Validation checklist