Skill Development

Css Layout Helper

Explain CSS layout issues and propose fixes

install path ~/.claude/skills/css-layout-helper/SKILL.md
command /css-layout-helper
frontendaccessibilitycssux
SKILL.md

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.

Copy this into ~/.claude/skills/css-layout-helper/SKILL.md to use it as a slash command in Claude Code.

get crystl