AgentSkillsCN

media-query-optimizer

创建简约且互不重叠的媒体查询。在可能的情况下复用现有断点。适用于新增或重构响应式样式、媒体查询，或调整断点逻辑之时。

SKILL.md
--- frontmatter
name: media-query-optimizer
description: Create minimal, non-overlapping media queries. Reuse existing breakpoints where possible. Use when adding or refactoring responsive styles, media queries, or breakpoint logic.

Media Query Optimizer

Instructions

  1. •

    Reuse existing breakpoints: 375px, 768px, 1024px, 1440px (per project rules)

  2. •

    Keep queries minimal:

    • •One logical change per query when possible
    • •Avoid redundant rules across breakpoints
  3. •

    Avoid:

    • •Excessive breakpoints (more than 4–5)
    • •Overlapping or conflicting rules
    • •Duplicated selectors across queries
  4. •

    Structure: Prefer mobile-first (min-width) unless existing code uses max-width.