Skip to content
Get packs

Flexbox Layout Patterns

Reviews and fixes CSS Flexbox layouts, spacing with gap, and min-width overflow bugs.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

Once installed, the agent checks your CSS for common Flexbox mistakes, such as missing min-width: 0 on text-containing flex children, using margin instead of gap for spacing, and incorrect flex shorthand values. It can propose fixes and explain how flex-grow, flex-shrink, flex-basis and min-width work. It is guided by a single rule from the Front-End Checklist project, so it focuses on this topic rather than general CSS work.

Great for

  • Front-end developers debugging text overflow or items that won't shrink in a flex row or column
  • Developers cleaning up older stylesheets that use margins to space flex items
  • Designers or students who want a plain-language explanation of how flex sizing works

Skip it if

  • Grid-based or absolute-positioned layouts, since the skill is scoped to one-dimensional Flexbox (the reference is not about CSS Grid)
  • Projects that need a full design system or accessibility audit; the skill only covers this one Flexbox rule

Try asking

  • “Review my navbar CSS for Flexbox mistakes like missing min-width: 0 on text items”
  • “Why does my long title overflow instead of truncating inside a flex container?”
  • “Replace the margins between my flex items with gap and correct the flex shorthand”
  • “Explain what flex: 1 1 0 does compared with flex: 1 in this stylesheet”
Step-by-step guide: how to use Flexbox Layout PatternsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    flexbox-patterns.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip flexbox-patterns.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip flexbox-patterns.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the relevant component CSS and the markup or the breakpoint where the problem appears, so the agent can check the rendered behaviour.
  • Ask for the explanation first if you want to learn why min-width: 0 fixes truncation before applying changes.
  • Review the suggested diff before accepting it, since changing flex properties can shift layouts across breakpoints.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.