lyra-grid-system

Create responsive 12-column CSS grid layouts with 8pt spacing.

1|Updated Mar 24, 2026

Search Tags:#layout #css #design-principles #ux #responsive-design #grid #grid-system

Ready to run

npx skills add https://github.com/nikglavin/lyra --skill lyra-grid-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lyra-grid-system
Source: https://github.com/nikglavin/lyra/tree/main/skills/lyra-grid-system
Command: npx skills add https://github.com/nikglavin/lyra --skill lyra-grid-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill helps product design teams quickly create, critique, and optimize grid-based layouts across web interfaces, ensuring consistency and responsiveness.

Core Features & Use Cases

Create and modify CSS grid or flexbox layouts with a 12-column foundation for desktop, adapting to tablet and mobile breakpoints.
Review and critique existing pages for grid usage, spacing, and responsive behavior.
Provide actionable guidance to implement an 8pt spacing system and modular grid patterns in design systems.

Quick Start

Propose and implement a responsive 12-column grid layout with 8-point spacing for the current page and deliver a wireframe-ready HTML/CSS example.

Frequently Asked Questions about lyra-grid-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a responsive CSS grid layout for web interfaces?▼

Create responsive CSS grid layouts by applying a 12-column foundation with 8pt spacing, adapting to tablet and mobile breakpoints. This approach ensures consistent, modular grid patterns while supporting semantic HTML and accessibility across different screen sizes.

What's the best way to audit existing grid usage across responsive breakpoints?▼

Audit grid usage by reviewing existing pages for grid structure, spacing consistency, and responsive behavior across breakpoints. This process identifies layout inconsistencies and provides actionable guidance to optimize modular grid patterns and 8pt spacing systems.

Can I use Flexbox instead of CSS grid for a 12-column layout?▼

Flexbox can be used alongside CSS grid to build 12-column layouts with 8pt spacing. The approach supports both CSS grid and Flexbox implementations, ensuring responsive behavior and accessibility while maintaining a consistent modular grid foundation.

How does an 8pt spacing system improve web layout design?▼

An 8pt spacing system improves layout design by enforcing consistent vertical and horizontal rhythm across grid components. It standardizes spacing values in design systems, ensuring visual harmony and predictable scaling across desktop, tablet, and mobile breakpoints.

Do I need semantic HTML to implement a responsive grid system?▼

Semantic HTML is supported and emphasized when implementing responsive grid systems. Using semantic elements ensures accessibility and proper document structure while applying a 12-column CSS grid or Flexbox foundation with 8pt spacing.

Why does my responsive grid layout break on mobile breakpoints?▼

Responsive grid layouts break on mobile when the 12-column foundation fails to adapt or spacing rules are inconsistent. Auditing grid usage across breakpoints identifies structural issues, ensuring the layout properly adjusts with 8pt spacing and modular grid patterns.