About flexbox-math
A skill for developers working with one-dimensional layouts, focused on the calculations behind Flexbox size distribution. It organizes rules, examples, patterns, and a debugging workflow for deriving base sizes, free space, grow and shrink allocation, and constraint clamping.
Key features
- 01Flexbox distribution concepts
- 02Rules and implementation exceptions
- 03Worked code examples
- 04Reusable formula patterns
- 05Step-by-step debugging workflow
Use cases
- 01Calculating free space in a Flexbox layout
- 02Debugging grow or shrink allocation
- 03Checking size constraints and clamping
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/flexbox-mathin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/flex-distribution/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-flex-distribution.mdDetails
From the project READMEFlexbox Math
Use this skill for one-dimensional layout distribution. It focuses on the arithmetic that determines base sizes, free space, grow allocation, shrink allocation, and constraint clamping.
Quick Start
- Read
guidelines.mdto select the smallest relevant file set. - Load
references/flex-distribution/rules.mdfor implementation decisions. - Load
references/flex-distribution/examples.mdwhen editing code. - Use
workflows/debug-flex-distribution.mdfor multi-step derivation or debugging.
Contents
| Resource | Purpose |
|---|---|
guidelines.md | Routes tasks to the right reference files |
references/source-map.md | Book source and chapter/section traceability |
references/flex-distribution/knowledge.md | Core concepts and terminology |
references/flex-distribution/rules.md | Practical rules, guidelines, and exceptions |
references/flex-distribution/examples.md | Bad/good examples and refactoring approach |
references/flex-distribution/patterns.md | Reusable formula and implementation patterns |
references/flex-distribution/checklist.md | Review checklist and red flags |
workflows/debug-flex-distribution.md | Step-by-step workflow |
Source
Derived from Math for Web Design by Paul McFedries, Chapter 5: Flexbox math.
Citations are tracked in references/source-map.md.