AgentSkillsCN

jeff-cls-stability

遵循Jeff的布局稳定性规范，有效预防累积布局偏移（CLS）。在构建加载状态、图片密集型界面、卡片、表格、地图以及媒体容器等场景时，此规范尤为适用。

SKILL.md
--- frontmatter
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

  • • No visible jump when data/images finish loading.
  • • Skeleton-to-content swap keeps footprint stable.
  • • Scroll position is not disrupted by late layout expansion.