mcpField
C
css-grid-math

css-grid-math

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

About css-grid-math

A skill for reasoning about CSS Grid as a system of coordinates and track sizing. It guides layout calculations, implementation choices, and debugging through focused references and workflows.

Key features

  1. 01Calculate item placement and track sizes
  2. 02Explain flexible track sizing
  3. 03Route tasks to relevant references
  4. 04Provide debugging workflows and examples

Use cases

  1. 01Work out where grid items will be placed
  2. 02Diagnose unexpected flexible track widths
  3. 03Apply grid rules while editing layouts

Install

Copy the command and run it in a terminal.

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

After installing, type/css-grid-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/grid-layout/
checklist.md
examples.md
knowledge.md
patterns.md
rules.md
workflows/
debug-grid-layout.md

Details

From the project README

CSS Grid Math

Use this skill when a grid needs to be reasoned about as a coordinate and sizing system. It helps calculate where items land, how tracks divide space, and why flexible tracks do not always produce expected widths.

Quick Start

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

Source

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

Comments

Markdown supported