Skills
.Work. You
Rest

grid-and-spacing

Community

Master grid and spacing systems for consistent design layouts.

Design & Creative#responsive design#design system#Flexbox#CSS Grid#grid systems#spacing scales
Authorjpoindexter
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive reference for grid and spacing systems, ensuring consistent and precise design layouts across different platforms and devices.

Core Features & Use Cases

  • Grid Systems: Offers detailed guidance on soft, hard, and baseline grids for layout design.
  • Spacing Scale: Provides a geometric scale for spacing tokens on an 8pt grid.
  • Responsive Breakpoints: Defines responsive breakpoints for mobile-first design.
  • CSS Grid & Flexbox: Offers implementation strategies using CSS Grid and Flexbox.
  • Density and Units: Explains how to design and apply units across different platforms.
  • Applying Spacing: Provides patterns for applying spacing in various design scenarios.
  • Use Case: A designer can use this Skill to create a consistent and responsive design system for a new web application.

Quick Start

Use the grid-and-spacing skill to implement a responsive 12-column grid system for your web design.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: grid-and-spacing
Download link: https://github.com/jpoindexter/design-and-ai-skills/archive/main.zip#grid-and-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 620,000+ vetted skills library on demand.