Layout

---

name: layout

description: "Generate CSS layouts. Use when building grid or flexbox layouts, creating responsive breakpoints, or scaffolding HTML pages."

version: "3.4.0"

author: BytesAgain

homepage: https://bytesagain.com

source: https://github.com/bytesagain/ai-skills

tags:

- layout

- css

- grid

- flexbox

- responsive

---

# Layout

Generate CSS Grid layouts, Flexbox containers, responsive breakpoint media queries, page scaffold HTML, and spacing utility classes — all from a single shell script. Analyze existing CSS files for layout property usage.

Commands

`grid`

Generate a CSS Grid layout with configurable columns, rows, gap, named areas, and custom templates.

**Options:**

| Flag | Default | Description |

|------|---------|-------------|

| `--columns` | `3` | Number of grid columns |

| `--rows` | `1` | Number of grid rows |

| `--gap` | `1rem` | Gap between grid items |

| `--col-template` | `repeat(N, 1fr)` | Custom `grid-template-columns` value |

| `--row-template` | *(auto)* | Custom `grid-template-rows` value |

| `--areas` | *(none)* | Named grid areas (pipe-separated rows) |

| `--class` | `grid-container` | CSS class name |

| `--output` | *(stdout)* | Write CSS to file |

bash scripts/script.sh grid --columns 4 --rows 2 --gap "2rem" --output grid.css
bash scripts/script.sh grid --areas "header header header|sidebar main main|footer footer footer" --output layout.css

`flex`

Generate a Flexbox layout with direction, wrapping, alignment, and per-item grow factor.

**Options:**

| Flag | Default | Description |

|------|---------|-------------|

| `--direction` | `row` | Flex direction (`row`, `column`, etc.) |

| `--wrap` | *(flag)* | Enable `flex-wrap: wrap` |

| `--nowrap` | *(flag)* | Force `flex-wrap: nowrap` |

| `--justify` | `flex-start` | `justify-content` value |

| `--align` | `stretch` | `align-items` value |

| `--items` | `3` | Number of flex children to generate |

| `--grow` | `0` | `flex-grow` value for children |

| `--class` | `flex-container` | CSS class name |

| `--output` | *(stdout)* | Write CSS to file |

bash scripts/script.sh flex --direction row --wrap --justify space-between --items 5 --output flex.css

`responsive`

Generate mobile-first (`min-width`) and desktop-first (`max-width`) media query breakpoints.

**Options:**

| Flag | Required | Description |

|------|----------|-------------|

| `--breakpoints` | Yes | Comma-separated `name:px` pairs |

| `--prefix` | No (default `screen-`) | Class name prefix |

| `--output` | No | Write CSS to file |

bash scripts/script.sh responsive --breakpoints "sm:640,md:768,lg:1024,xl:1280" --output breakpoints.css

`scaffold`

Generate a complete HTML page skeleton with semantic sections. Supports four layout types:

**Options:**

| Flag | Default | Description |

|------|---------|-------------|

| `--type` | `basic` | Layout type (`basic`, `holy-grail`, `dashboard`, `landing`) |

| `--title` | `Page` | HTML `<title>` value |

| `--css` | *(none)* | Path to CSS file to link |

| `--output` | *(stdout)* | Write HTML to file |

bash scripts/script.sh scaffold --type dashboard --title "Admin Panel" --css styles.css --output dashboard.html

`spacing`

Generate a spacing scale system with CSS custom properties and margin/padding utility classes.

**Options:**

| Flag | Default | Description |

|------|---------|-------------|

| `--base` | `4` | Base spacing unit |

| `--steps` | `8` | Number of scale steps |

| `--unit` | `px` | CSS unit (`px`, `rem`, etc.) |

| `--prefix` | `sp` | CSS variable prefix |

| `--output` | *(stdout)* | Write CSS to file |

bash scripts/script.sh spacing --base 8 --steps 10 --unit px --output spacing.css

`analyze`

Analyze an existing CSS file and report layout property usage including display types, media queries, grid/flex properties, nesting depth, and file stats.

**Options:**

| Flag | Required | Description |

|------|----------|-------------|

| `--input` | Yes | Path to CSS file to analyze |

bash scripts/script.sh analyze --input styles.css

Output

Data Storage

No persistent data. All output goes to stdout or to the file specified by `--output`. No data directory is created.

Requirements

When to Use

1. **Bootstrapping a new web project** — generate grid and flex CSS foundations in seconds instead of writing boilerplate by hand

2. **Creating responsive breakpoints** — produce a consistent set of mobile-first and desktop-first media queries from named breakpoints

3. **Scaffolding HTML pages** — generate semantic page skeletons for dashboards, landing pages, holy-grail layouts, or basic sites

4. **Building a spacing system** — create a uniform spacing scale with margin/padding utility classes like Tailwind but custom-fit

5. **Auditing existing CSS** — analyze a stylesheet to understand its layout property usage, media queries, and nesting complexity

Examples

# Generate a 12-column grid with named areas
bash scripts/script.sh grid --columns 12 --gap "1.5rem" \
  --areas "header header header header header header header header header header header header|sidebar sidebar main main main main main main main main main main|footer footer footer footer footer footer footer footer footer footer footer footer" \
  --output grid.css

# Create a centered flex navbar
bash scripts/script.sh flex --direction row --justify center --align center --items 6 --class navbar --output navbar.css

# Generate responsive breakpoints with custom prefix
bash scripts/script.sh responsive --breakpoints "xs:480,sm:640,md:768,lg:1024,xl:1280,xxl:1536" --prefix "bp-" --output breakpoints.css

# Scaffold a landing page with linked CSS
bash scripts/script.sh scaffold --type landing --title "Product Launch" --css main.css --output index.html

# Analyze an existing stylesheet
bash scripts/script.sh analyze --input existing-styles.css

Tips

---

*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*