spacing-system

Name: spacing-system
Availability: InStock
Author: thrillmade

Enforce a two-unit primitive model and generate spacing ladders for UI design systems.

1|Updated May 15, 2026

Search Tags:#accessibility #design system #UI design #spacing #grid system

Ready to run

npx skills add https://github.com/thrillmade/agent-skills --skill spacing-system-thrillmade

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: spacing-system
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/spacing-system
Command: npx skills add https://github.com/thrillmade/agent-skills --skill spacing-system-thrillmade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that spacing in UI design systems is consistent and accessible, providing a standardized way to create and maintain a two-unit primitive model for padding, gaps, icon sizes, component heights, and border radii.

Core Features & Use Cases

Two-Unit Primitive Model: Defines a minor and major unit for spacing, ensuring consistency across design elements.
Spacing Ladders: Generates ladders for padding, gaps, icon sizes, component heights, and border radii.
Density Modes: Supports dense, balanced, and spacious density modes with predefined unit primitives.
Accessibility: Ensures interactive controls meet WCAG 2.5.8 AA Pointer Target floor for accessibility.

Quick Start

Apply the spacing-system Skill to your design system to define and maintain a consistent spacing scale.

Frequently Asked Questions about spacing-system

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

FAQPage Schema

How do I create a consistent spacing scale for a UI design system?▼

Generate spacing ladders for padding, gaps, icon sizes, component heights, and border radii by enforcing a two-unit primitive model. This approach standardizes your UI design system spacing scale to maintain visual consistency across all interface elements.

What is a two-unit primitive model in UI design spacing?▼

A two-unit primitive model in UI design spacing defines a minor and major unit to calculate all padding, gaps, and dimensions. This standardizes element sizing and prevents arbitrary spacing values across your design system components.

How do I ensure my UI spacing meets WCAG accessibility requirements?▼

Ensure your UI spacing meets WCAG accessibility requirements by enforcing the WCAG 2.5.8 AA Pointer Target floor for interactive controls. This standard guarantees that touch targets are large enough for accessible user interaction.

Can I use different density modes for my UI grid system?▼

You can apply different density modes to your UI grid system by selecting from dense, balanced, and spacious options. Each mode provides predefined unit primitives to adjust the visual density of your design system components.

What is the best way to manage component heights and border radii in a design system?▼

The best way to manage component heights and border radii in a design system is to derive them from a standardized spacing ladder. Generating these values from a two-unit primitive model ensures proportional scaling across your UI.