mcpField
C
css-math-units

css-math-units

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

About css-math-units

A reference skill for tracing how CSS values resolve into computed layout values. It supports developers debugging or editing unit conversions, inherited sizes, `calc()` expressions, custom-property math, and box sizing.

Key features

  1. 01CSS unit conversion
  2. 02Inherited size calculations
  3. 03`calc()` and custom-property math
  4. 04Box model sizing guidance
  5. 05Debugging workflow and checklists

Use cases

  1. 01Trace a CSS value to its computed size
  2. 02Debug nested or inherited dimensions
  3. 03Review CSS calculation changes
  4. 04Apply reusable sizing formulas

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lvtd-llc/skills --skill css-math-units

After installing, type/css-math-unitsin 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/css-calculations/
checklist.md
examples.md
knowledge.md
patterns.md
rules.md
workflows/
debug-css-calculation.md

Details

From the project README

CSS Math Units

Use this skill to trace how CSS values become computed layout values. It is useful for unit conversion, inherited size multiplication, calc expressions, custom property math, and box model sizing.

Quick Start

  1. Read guidelines.md to select the smallest relevant file set.
  2. Load references/css-calculations/rules.md for implementation decisions.
  3. Load references/css-calculations/examples.md when editing code.
  4. Use workflows/debug-css-calculation.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/css-calculations/knowledge.mdCore concepts and terminology
references/css-calculations/rules.mdPractical rules, guidelines, and exceptions
references/css-calculations/examples.mdBad/good examples and refactoring approach
references/css-calculations/patterns.mdReusable formula and implementation patterns
references/css-calculations/checklist.mdReview checklist and red flags
workflows/debug-css-calculation.mdStep-by-step workflow

Source

Derived from Math for Web Design by Paul McFedries, Chapter 3: Math basics for CSS. Citations are tracked in references/source-map.md.

Comments

Markdown supported