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:

• basic — header, nav, main, footer
• holy-grail — header, left sidebar, main, right sidebar, footer
• dashboard — header with logo/nav/user, sidebar navigation, card grid, data table
• landing — header with nav links, hero section with CTA, features grid, pricing cards, footer

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

• grid — CSS file with .grid-container and numbered __item-N rules
• flex — CSS file with .flex-container and numbered __item-N rules
• responsive — CSS file with min-width and max-width media query blocks
• scaffold — Complete HTML5 document with semantic sections and optional CSS link
• spacing — CSS file with :root custom properties plus .m-*, .mt-*, .p-*, .px-* (etc.) utility classes
• analyze — Stdout report: rule block count, display type breakdown, media queries, grid/flex properties, nesting depth, file stats

Data Storage

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

Requirements

• Bash 4+
• Standard Unix utilities: grep, wc, du, head, sort
• No API keys, no external dependencies

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

• Use --output to write directly to a file; omit it to pipe or preview on stdout
• Combine grid + responsive + spacing to scaffold a complete design system
• The scaffold command produces clean HTML5 — pair it with your generated CSS files
• Run analyze on legacy CSS before refactoring to understand what you're working with

---

Powered by BytesAgain | bytesagain.com | [e-mail]