AgentSkillsCN

responsive-layout-auditor

识别破坏布局的 CSS 模式，并推荐通过 flex、grid 以及 max-width 容器化等手段进行最小化修复。适用于响应式布局审计、处理溢出或裁剪问题，或排查 CSS 中的布局隐患之时。

SKILL.md
--- frontmatter
name: responsive-layout-auditor
description: Identify layout-breaking CSS patterns and recommend minimal fixes using flex, grid, and max-width containment. Use when auditing responsive layouts, fixing overflow/clipping, or reviewing CSS for layout issues.

Responsive Layout Auditor

Instructions

  1. •

    Identify layout-breaking patterns:

    • •Fixed widths that cause overflow
    • •Missing containment (overflow, min-width issues)
    • •Flex/grid items that don't wrap or shrink
  2. •

    Recommend minimal fixes:

    • •Prefer flex with flex-wrap, min-width: 0, or overflow: hidden
    • •Use grid with minmax(0, 1fr) for fluid columns
    • •Apply max-width: 100% for images/containers
  3. •

    Constraints:

    • •Avoid redesigns; preserve visual intent
    • •No framework injection (Tailwind, Bootstrap)