AgentSkillsCN

css-layout-helper

解释 CSS 布局问题并提出修复方案。在初级开发者难以处理对齐或间距时使用。

SKILL.md
--- frontmatter
name: css-layout-helper
description: Explain CSS layout issues and propose fixes. Use when a junior developer is struggling with alignment or spacing.

CSS Layout Helper

Purpose

Explain CSS layout issues and propose fixes.

Inputs to request

  • •HTML structure and CSS snippet.
  • •Desired layout and screenshots.
  • •Target browsers and breakpoints.

Workflow

  1. •Identify the container and child roles.
  2. •Recommend flex or grid with key properties.
  3. •Provide a minimal CSS snippet to test.

Output

  • •Proposed CSS changes with explanation.

Quality bar

  • •Prefer minimal changes over rewrites.
  • •Call out responsive implications.