skills.rest
47network
47networkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

layout-spacing

Generate spacing scales, grid systems, and layout patterns via TypeScript.

5|Updated Apr 15, 2026
Search Tags:#layout#patterns#design-system#spacing#responsive-design#css-grid
One-click install
npx skills add https://github.com/47network/Sven --skill layout-spacing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout-spacing
Source: https://github.com/47network/Sven/tree/main/skills/design/layout-spacing
Command: npx skills add https://github.com/47network/Sven --skill layout-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing UI layouts with consistent spacing, grid systems, and responsive breakpoints is time-consuming and error-prone; this Skill automates spacing, grids, and layout patterns to ensure consistency across projects.

Core Features & Use Cases

  • Generate a spacing scale from a base unit (default 4px)
  • Build responsive CSS grid systems with configurable columns and gaps
  • Provide production-ready layout patterns (dashboard, sidebar, card grid, holy grail)
  • Apply patterns and breakpoints for responsive design in real-world apps

Quick Start

Generate a 12-column grid with a 16px gap and a base unit of 4px.

Frequently Asked Questions about layout-spacing

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

FAQPage Schema
How do I generate a consistent spacing scale for my UI design system?▼

Generate a consistent spacing scale by defining a base unit, defaulting to 4px, to ensure uniform spacing across your UI design system. This automates scale creation for consistent web and mobile app layouts.

What's the best way to build a responsive CSS grid system with configurable columns?▼

The best way to build a responsive CSS grid system is using configurable columns and gaps, such as a 12-column layout with a 16px gap. This provides production-ready grid structures for consistent UI patterns.

Can I generate production-ready layout patterns like dashboards and sidebars?▼

Yes, you can generate production-ready layout patterns including dashboards, sidebars, card grids, and holy grail layouts. These patterns provide standardized structures to ensure consistent responsive design.

Does this layout tool support responsive breakpoints for web and mobile apps?▼

Yes, the tool supports responsive breakpoints for web and mobile apps. It applies patterns and breakpoints to ensure your UI design adapts correctly across different screen sizes.

Why does manual CSS layout design lead to inconsistent spacing and grids?▼

Manual CSS layout design is time-consuming and error-prone, leading to inconsistent spacing and grid systems. Automating layout generation with defined spacing scales ensures consistency and reduces errors across projects.

What z-index and layout pattern actions are available for consistent UI design?▼

Available actions include spacing, grid, auto_grid, breakpoints, z_index, pattern, and all_patterns. These actions generate specific layout configurations to ensure consistent UI design across your application.

Related Skills

Explore More Design & Creative Skills→
Lev-itLev-it

typed-service-contracts

Define type-safe TypeScript service contracts using Spec and Handler patterns.

Official
Advanced
jpoindexterjpoindexter
1

grid-and-spacing

Guide grid and spacing systems with 8pt scales and CSS Grid/Flexbox.

Community
Advanced
DevXojeDevXoje

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Community
Basic
ProfPowellProfPowell
4

layout-grid

Implements fluid, resolution-independent web page grids using clamp() and container queries.

Community
Intermediate