Align-Grid: Real Müller-Brockmann Grids for Agent-Built Pages

Where this fits

You're an agent tasked with building a magazine-style landing page or a corporate report. Most agents output generic flexbox layouts that look nothing like a designed grid. This skill encodes the Swiss typographic discipline and the engineering to make it real—so your agent can produce pages that match a design system, not just a template.

Why agents benefit

• Encodes Müller-Brockmann's grid rules as CSS variables, giving the agent a single source of truth for columns, modules, baseline, and spacing.
• Provides an interactive grid overlay that lives inside the content box, letting the agent visually verify alignment during development.
• Uses subgrid bands to snap every element to column lines, eliminating the guesswork of nested layouts.
• Implements an 8px baseline lock and optical alignment for display type, ensuring ink sits on the line, not just the box.
• Ships with a Puppeteer verification harness that programmatically proves 0px adherence—so the agent can self-check before delivering.

Practical scenarios

Magazine-style article pages

When the agent needs to produce long-form editorial with pull quotes, images, and captions, align-grid ensures every element snaps to the same modular grid, giving the page a coherent rhythm.

Corporate annual reports

For data-heavy reports with charts and tables, the grid provides a consistent baseline and column system, making the layout feel structured and trustworthy.

Design portfolio showcases

When the agent is building a portfolio site that itself must demonstrate design skill, using a genuine Swiss grid signals professionalism and attention to detail.

Add it to your agent workflow

Install the skill via:

npx skills add danielvm-git/bigpowers --skill align-grid

Then invoke it in your agent prompt: "Use align-grid to scaffold the page, then run the verification harness to confirm alignment." The generator creates the CSS variables, overlay, and subgrid structure. The harness outputs a pass/fail report.

Compare before adopting

Compare the quality of the generated grid—does it actually use subgrid and baseline locking, or just decorative lines? Check maintenance: is the skill actively updated with modern CSS features? Alternatives like generic grid generators won't enforce the Swiss typographic rules. Also consider how well it integrates with your existing agent framework and build pipeline.

Why it is worth tracking

With 163 stars and an active author, this skill shows community interest in disciplined front-end generation. It's worth evaluating if you frequently build editorial or report pages and want your agent to produce visually credible, grid-perfect layouts. The verification harness is a strong differentiator—it turns design rules into testable assertions. Keep an eye on its evolution as CSS subgrid support widens. For more details, check the skill page at https://www.openagentskill.com/skills/danielvm-git-align-grid.