Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style), not a decorative one. Use for any editorial/magazine/report/longform page that must read as rigorously grid-aligned or "Swiss". Triggers: "magazine spread", "grid system", "Swiss design", "editorial layout", "show the grid / grid overlay toggle", "align everything to the grid", and the failure modes "grid slapped on top / misaligned" or "the headline is off the grid". Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red) AND the front-end engineering to make the grid real, visible, and verified: one CSS-variable source of truth, a grid-toggle overlay in the SAME content box as the content, subgrid "bands" so every element snaps to a column line, an 8px baseline lock, and runtime OPTICAL ALIGNMENT putting display type's ink (not its box) on the line. Ships a scaffold generator (grid_tokens.py) and a Puppeteer verification harness (verify_grid.js) that proves 0px adherence.
How this skill is triggered — by the user, by Claude, or both
Slash command
/muller-brockmann-grids:muller-brockmann-grid-systemsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Josef Müller-Brockmann (1914–1996), Zurich; *Grid Systems in Graphic Design* (1981) is the corpus. The grid is treated as an ethic, not decoration: **"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."** This ski...
Josef Müller-Brockmann (1914–1996), Zurich; Grid Systems in Graphic Design (1981) is the corpus. The grid is treated as an ethic, not decoration: "The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice." This skill encodes that discipline AND — the part most attempts get wrong — the front-end engineering to make the grid genuinely load-bearing on the web, plus a harness that PROVES it.
Two real review notes this skill exists to prevent:
- "the grid is just slapped on top and misaligned" → the overlay wasn't in the same content box as the content (see §2.2).
- "the H in the headline is off the grid" → the headline's BOX was on the grid but its INK wasn't; large glyphs carry a side-bearing (see §2.6). Box-on-grid ≠ ink-on-grid.
grid_tokens.py emits this whole scaffold correctly; the rules below are why it's built the way it is.
Put every grid parameter in :root CSS variables — --cols, --gutter, --margin, --bl (baseline), --lh (leading=3×bl), --maxw. Content and the overlay both read these same variables. Never hand-author the overlay separately or it will drift.
Failure mode: content sits in a centered max-width container while the overlay is a full-width sibling of the section. On any viewport wider than --maxw, the centered content and the full-width overlay no longer share column positions → "slapped on top / misaligned."
Fix: put .guides inside the same .wrap, and draw the column guides with left/right = var(--margin) and the same repeat(var(--cols),1fr) + column-gap:var(--gutter). Then the overlay columns are the content columns at every width. Add left/right margin lines at var(--margin).
Don't eyeball spans. Each horizontal band spans all columns and re-exposes them:
.band{grid-column:1 / -1; display:grid; grid-template-columns:subgrid; column-gap:var(--gutter); align-items:start;}
@supports not (grid-template-columns:subgrid){ .band{grid-template-columns:repeat(var(--cols),1fr);} }
Children place with grid-column: <startline> / <endline> (e.g. 1 / 6, 6 / 13). Every headline, paragraph, photo, caption now snaps to identical lines.
--lh (e.g. 24px = 3×8). Every line-height a multiple of the baseline, in px (not unitless) for display type — unitless line-heights on large type push the box off the grid.A control (button + G key) toggles body.grid-on; overlay fades 0→1. Overlay draws: translucent numbered column fields, the baseline (major line every --lh, faint minor every --bl), and margin lines. Showing the real grid the page is built on IS the demo.
A 180px headline whose layout box is exactly on line 1 still looks misaligned against body text, because the letterform's ink is inset by its left side-bearing. Cure at runtime:
// after document.fonts.ready and on resize:
var cvs=document.createElement('canvas'),ctx=cvs.getContext('2d');
document.querySelectorAll('.masthead,.numeral,.shead h2,.h2b').forEach(function(el){
el.style.marginLeft='0px';
var cs=getComputedStyle(el),ch=(el.textContent||'').trim()[0]; if(!ch) return;
if(cs.textTransform==='uppercase') ch=ch.toUpperCase();
ctx.font=cs.fontStyle+' '+cs.fontWeight+' '+cs.fontSize+' '+cs.fontFamily; ctx.textAlign='left';
var abl=ctx.measureText(ch).actualBoundingBoxLeft; // +ve = ink overhangs left of box
if(isFinite(abl)) el.style.marginLeft=abl.toFixed(2)+'px'; // shift box so INK lands on the line
});
Apply to the masthead, big numerals, and section headlines. It scales with fluid type (re-runs on resize) and uses the actually-loaded font, so it's correct in the user's browser.
CRITICAL measurement caveat: side-bearing is font-specific. If you measure with the wrong font you get the wrong nudge. Headless/sandbox Chrome usually lacks the webfont, so canvas falls back to a different grotesque (measured −16px on the fallback vs −7px on real Inter for the same H). To verify optics offline you must embed the real webfont via @font-face (local TTF). In production the runtime JS measures the loaded font and is correct.
verify_grid.jsRender with headless Chrome (Puppeteer) and assert, at several widths including > and < --maxw (to catch centered-container drift, e.g. 1440 / 1180 / 900):
.band > * left snaps to a column START and right to a column END (~0px). Exclude the optically-aligned display elements from this box check (their box is intentionally side-bearing-offset; they're validated in step 4). Gotcha: build BOTH the column-start set and the column-end set — a grid item spanning "to line N" ends at the far side of the gutter, so single-edge math falsely reports a one-gutter error..guides .col rect equals the computed column rect (~0px).actualBoundingBoxLeft, real font) equals its own column line (nearest column-start to its box), not always line 1.Sandbox Chrome flags that work: --headless=new --no-sandbox --disable-gpu --disable-dbus --use-gl=angle --use-angle=swiftshader. file:// works for non-ES-module pages; the CLI --screenshot can hang on tall pages — drive via Puppeteer and screenshot per viewport. Read PNGs back with the image-capable Read tool to eyeball a zoom crop of the top-left corner (masthead vs body vs column line) — the fastest human check.
A clean run looks like: col=0px overlay=0px baseline≤4px ink=0px → GRID VERIFY: PASS.
#fff, ink #111, one accent (Swiss red #e4002b). No warm-cream Claude look; no blue/purple gradients./api/files/... URLs can't authenticate inside the iframe (broken-image trap).Helvetica/Arial CSS stack silently falls back to Noto Sans (reads like Calibri). Render in Liberation Sans or an embedded Helvetica/Arimo TTF before trusting it. (Same trap as the optical-measurement caveat: wrong font in → wrong result out.).grid + .guides, consistent margins/folios.python3 grid_tokens.py (or --scaffold for a full page; --cols/--baseline/--gutter/--margin/--maxw/--accent to taste; it warns if gutter/margin aren't baseline multiples).CHROME=… PUP=… node verify_grid.js <file-or-url> --widths=1440,1180,900. Eyeball a top-left zoom crop. Fix, republish.grid_tokens.py — deterministic scaffold generator. Emits the :root tokens, .grid/.band (subgrid) scaffold, .guides overlay CSS, toggle JS, and the optical-alignment JS — all wired to one source of truth. --scaffold emits a full minimal HTML page. No network/credentials.verify_grid.js — Puppeteer harness implementing all four checks above with the corrected both-edges column math, the optical-exclusion, per-element column-line ink targeting, and PASS/FAIL output at multiple widths. Env: CHROME (chrome binary), PUP (puppeteer-core module path).A grid you can't toggle on and measure is a mood board, not a system. Build it from one source of truth, prove it at 0px, and align the ink.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub futuremedia/muller-brockmann-grids --plugin muller-brockmann-grids