Skills
.Work. You
Rest

fd-spacing-layout

Community

Define consistent spacing and responsive layouts.

Design & Creative#tailwind#spacing#responsive-design#design-patterns#8pt-grid#layout-system
Authorandrewle9510
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive framework for building consistent spacing and layout systems in web interfaces, ensuring predictable rhythm and responsive behavior.

Core Features & Use Cases

  • Spacing Scale System: define an 8pt grid and token values for uniform spacing.
  • Layout Grid System: provides column grid structures for mobile, tablet, and desktop with Tailwind-like examples.
  • Responsive Breakpoints & Containers: mobile-first approach and scalable container sizing for predictable layouts.

Quick Start

Use the fd-spacing-layout skill to establish a consistent 8pt spacing system across a new project. Implement a responsive grid using the patterns described here.

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: fd-spacing-layout
Download link: https://github.com/andrewle9510/design-skill-orchestrator/archive/main.zip#fd-spacing-layout

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.