Skills
.Work. You
Rest

layout-spacing

Community

Generate CSS layouts with spacing and grids.

Design & Creative#layout#patterns#design-system#spacing#responsive-design#css-grid
Author47network
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: layout-spacing
Download link: https://github.com/47network/Sven/archive/main.zip#layout-spacing

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.