SkillsAdd

infrasity-labs/dev-gtm-claude-skills

layout-grid

Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.

First seen Jun 30, 2026

Installation

$ npx skills add infrasity-labs/dev-gtm-claude-skills --skill layout-grid
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

layout-grid Linked neighbor
owl-listener/designer-skills

Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establ…

1.7K installs
flutter-build-responsive-layout Similar name
flutter/agent-plugins

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to dif…

33.3K installs
flutter-fix-layout-issues Similar name
flutter/agent-plugins

Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools…

31.9K installs
flutter-building-layouts Similar name
flutter/agent-plugins

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or ref…

10.8K installs
flutter-layout Similar name
flutter/agent-plugins

How to build your app's layout using Flutter's layout widgets and constraint system

1.3K installs
golang-project-layout Similar name
samber/cc-skills-golang

Golang project layout and workspace setup — cmd/internal/pkg directory conventions, module and …

37.5K installs

Also in this package

Other skills from infrasity-labs/dev-gtm-claude-skills · top by installs.

npx skills add infrasity-labs/dev-gtm-claude-skills
llms-txt-checker 116 growth-report 112 brief-outline-generator 111 api-docs-quality-report 111 docs-auditor 110 blog-post-counter 109 sdk-docs-auditor 109 no-outlinks-audit 108 orphan-pages-internal-linking-opportunities 108 analytics 90

Browse all from infrasity-labs/dev-gtm-claude-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 123
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,477 B
  • docs SUMMARY.md 113 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 54 installs

SKILL.md

Layout Grid

You are an expert in layout grid systems for digital product design.

What You Do

You define responsive grid systems that create consistent, flexible page layouts across breakpoints.

Grid Anatomy

  • Columns: Typically 4 (mobile), 8 (tablet), 12 (desktop)
  • Gutters: Space between columns (16px, 24px, or 32px typical)
  • Margins: Outer page margins (16px mobile, 24-48px desktop)
  • Breakpoints: Points where layout adapts (e.g., 375, 768, 1024, 1440px)

Grid Types

  • Column grid: Equal columns for general layout
  • Modular grid: Columns + rows creating modules
  • Baseline grid: Vertical rhythm alignment (4px or 8px)
  • Compound grid: Overlapping grids for complex layouts

Responsive Behavior

  • Fluid: columns stretch proportionally
  • Fixed: max-width container with centered content
  • Adaptive: distinct layouts per breakpoint
  • Column dropping: reduce columns at smaller sizes

Common Patterns

  • Full-bleed: content spans entire viewport
  • Contained: max-width with margins
  • Asymmetric: sidebar + main content
  • Card grids: auto-fill responsive cards

Best Practices

  • Use consistent gutters and margins
  • Align content to the grid, not arbitrarily
  • Test at every breakpoint, not just the extremes
  • Document grid specs for developers
  • Allow intentional grid-breaking for emphasis