Skills
.Work. You
Rest

layout-spatial-structure

Community

Build pixel-perfect, responsive layouts.

Design & Creative#layout#responsive design#spacing#flexbox#css grid#grid system
Authoroborchers
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the challenge of creating visually appealing, consistent, and responsive page layouts by enforcing established grid systems and spacing principles.

Core Features & Use Cases

  • Grid System Enforcement: Guides users to adhere to a 12-column grid for consistent alignment and structure.
  • Responsive Design: Provides strategies for adapting layouts across different screen sizes using CSS Grid and Flexbox.
  • Spacing Consistency: Promotes the use of an 8-point spacing system for predictable visual rhythm.
  • Use Case: When designing a new dashboard, this Skill ensures all elements align to the grid, gutters are consistent, and cards reflow elegantly on mobile devices.

Quick Start

Apply the layout-spatial-structure skill to ensure the main content area uses a 12-column grid with 24px gutters.

Dependency Matrix

Required Modules

None required

Components

referencesassets

💻 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-spatial-structure
Download link: https://github.com/oborchers/fractional-cto/archive/main.zip#layout-spatial-structure

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 223,000+ vetted skills library on demand.