muller-brockmann-grids

Müller-Brockmann Grids — Claude Code plugin

A Claude Code plugin that packages the Müller-Brockmann Grid Systems skill: build editorial/magazine/report webpages on a genuine modular grid (Swiss / International Typographic Style) — and then prove the page sits on it.

The skill encodes both the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red) and the front-end engineering most attempts get wrong:

• one CSS-variable source of truth for every grid parameter;
• a grid-toggle overlay that lives in the same content box as the content (the fix for "the grid is slapped on top / misaligned");
• subgrid "bands" so every element snaps to a column line;
• an 8px baseline lock;
• runtime optical alignment that puts display type's ink (not its box) on the line (the fix for "the headline is off the grid").

What's inside

.claude-plugin/
  plugin.json          # plugin manifest
  marketplace.json     # single-plugin marketplace, so it's installable as-is
skills/
  muller-brockmann-grid-systems/
    SKILL.md           # the skill
    grid_tokens.py     # deterministic grid scaffold generator (no deps)
    verify_grid.js     # Puppeteer verification harness (0px adherence proof)

Install

From a local clone:

/plugin marketplace add /Users/lefteris/claude-plugins/muller-brockmann-grids
/plugin install muller-brockmann-grids@fm-design-skills

Or, once pushed to GitHub:

/plugin marketplace add <your-org>/muller-brockmann-grids
/plugin install muller-brockmann-grids@fm-design-skills

The skill then loads automatically on triggers like "magazine spread", "grid system", "Swiss design", "editorial layout", "show the grid", or "align everything to the grid".

Tooling notes

• grid_tokens.py has no dependencies. python3 grid_tokens.py --scaffold emits a full minimal HTML page; flags: --cols --baseline --gutter --margin --maxw --accent.
• verify_grid.js needs puppeteer-core and a Chrome binary, passed via env: CHROME=<chrome path> PUP=<puppeteer-core module path> node verify_grid.js <file-or-url> --widths=1440,1180,900.

License

MIT