OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry css-layout-helper

Explain CSS layout issues and propose fixes. Use when a junior developer is struggling with alignment or spacing.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/css-layout-helper" ~/.claude/skills/majiayu000-claude-skill-registry-css-layout-helper && rm -rf "$T"
manifest: skills/data/css-layout-helper/SKILL.md
tags
#css#layout#debugging#frontend#development
source content

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.