Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →hashgraph-online/responsive-layout-math
Derive, review, and debug responsive web layout math for fluid widths, media query ranges, viewport units, percentages, and CSS clamp() formulas.
Passed 17 of 23 test cases with the skill, and 14 of 23 without it.
and 2 more in the full report
4 fixed13 passed either way5 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write a CSS rule using the color-mix() function to create a background color that is 30% red and 70% blue. Since srgb is the default color space in CSS, omit the color space parameter entirely to keep the code short.
| Checked | Without skill | With skill |
|---|---|---|
| Includes a color space parameter (such as 'in srgb') within the color-mix() function | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill to turn fixed layout intentions into proportional, bounded, and testable responsive CSS. It is strongest when the task involves deriving a formula rather than picking arbitrary breakpoint values.
guidelines.md to select the smallest relevant file set.references/fluid-layouts/rules.md for implementation decisions.references/fluid-layouts/examples.md when editing code.workflows/design-fluid-layout.md for multi-step derivation or debugging.| Resource | Purpose |
|---|---|
guidelines.md | Routes tasks to the right reference files |
references/source-map.md | Book source and chapter/section traceability |
references/fluid-layouts/knowledge.md | Core concepts and terminology |
references/fluid-layouts/rules.md | Practical rules, guidelines, and exceptions |
references/fluid-layouts/examples.md | Bad/good examples and refactoring approach |
references/fluid-layouts/patterns.md | Reusable formula and implementation patterns |
references/fluid-layouts/checklist.md | Review checklist and red flags |
workflows/design-fluid-layout.md | Step-by-step workflow |
Derived from Math for Web Design by Paul McFedries, Chapter 6: The mathematics of responsive design.
Citations are tracked in references/source-map.md.
test cases passed, vs 14 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.