skills.rest
andrewle9510
andrewle9510COMMUNITY
Explore all skills by this author →
GitHub

fd-spacing-layout

Define an 8pt spacing scale and responsive grid layouts for web interfaces.

Updated Jan 17, 2026
Search Tags:#tailwind#spacing#responsive-design#design-patterns#8pt-grid#layout-system
One-click install
npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-spacing-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fd-spacing-layout
Source: https://github.com/andrewle9510/design-skill-orchestrator/tree/main/.opencode/skill/fd-spacing-layout
Command: npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-spacing-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about fd-spacing-layout

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

FAQPage Schema
How do I set up an 8pt spacing system for a responsive web layout?▼

To set up an 8pt spacing system, you define token values based on an 8pt grid to establish uniform spacing across components. This creates a predictable visual rhythm and scalable whitespace for mobile-first dashboards and content grids.

What is the best way to structure a mobile-first column grid with Tailwind?▼

The best way to structure a mobile-first column grid is applying breakpoint-driven layout rules and Tailwind-compatible container behaviors. This defines scalable column structures that adapt predictably from mobile to desktop.

Does this layout system work for both content grids and mobile dashboards?▼

Yes, this layout system works for mobile dashboards and content grids by applying a mobile-first approach with responsive breakpoints. It enables consistent grid behavior and whitespace across different web interface components.

How do I define consistent breakpoints and container rules for web interfaces?▼

You define consistent breakpoints and container rules by applying a scalable layout system with Tailwind-compatible container sizing. This approach ensures predictable responsive behavior across mobile, tablet, and desktop views.

Why does my responsive layout break when scaling between mobile and desktop?▼

Your responsive layout breaks without a defined breakpoint-driven layout system and consistent 8pt spacing scale. Establishing uniform token values and column grid structures ensures predictable grid behavior across all viewports.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

spacing-scale

Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
pohlai88pohlai88

tailwindcss-advanced-layouts

Demonstrate advanced Tailwind CSS grid and flexbox layout patterns.

Community
Advanced