mcpField
R
responsive-layout-math

responsive-layout-math

github.com/lvtd-llcDesign & UI143 installsUpdated 7w ago
Repository

About responsive-layout-math

A skill for designers and developers deriving responsive CSS layouts from proportional, bounded formulas. It provides reference material and a workflow for implementation and debugging.

Key features

  1. 01Derive fluid layout formulas
  2. 02Set proportional bounds
  3. 03Use CSS implementation patterns
  4. 04Review examples and checklists
  5. 05Follow a layout debugging workflow

Use cases

  1. 01Replace arbitrary breakpoints with derived values
  2. 02Implement fluid responsive layouts
  3. 03Review or refactor layout CSS

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lvtd-llc/skills --skill responsive-layout-math

After installing, type/responsive-layout-mathin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

guidelines.md
agents/
openai.yaml
references/
source-map.md
references/fluid-layouts/
checklist.md
examples.md
knowledge.md
patterns.md
rules.md
workflows/
design-fluid-layout.md

Details

From the project README

Responsive Layout Math

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.

Quick Start

  1. Read guidelines.md to select the smallest relevant file set.
  2. Load references/fluid-layouts/rules.md for implementation decisions.
  3. Load references/fluid-layouts/examples.md when editing code.
  4. Use workflows/design-fluid-layout.md for multi-step derivation or debugging.

Contents

ResourcePurpose
guidelines.mdRoutes tasks to the right reference files
references/source-map.mdBook source and chapter/section traceability
references/fluid-layouts/knowledge.mdCore concepts and terminology
references/fluid-layouts/rules.mdPractical rules, guidelines, and exceptions
references/fluid-layouts/examples.mdBad/good examples and refactoring approach
references/fluid-layouts/patterns.mdReusable formula and implementation patterns
references/fluid-layouts/checklist.mdReview checklist and red flags
workflows/design-fluid-layout.mdStep-by-step workflow

Source

Derived from Math for Web Design by Paul McFedries, Chapter 6: The mathematics of responsive design. Citations are tracked in references/source-map.md.

Comments

Markdown supported