Skills
.Work. You
Rest

ui-spacing-and-cushioning

Community

Polish UI spacing while preserving hierarchy.

Design & Creative#ui#accessibility#layout#css#tailwind#design-system#spacing
Authortippyentertainment
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Normalize spacing, padding, and whitespace across web UI while preserving visual hierarchy and aesthetics. Detects each project’s spacing patterns or tokens, cleans up ad‑hoc gaps, and fixes cramped vs. blown‑out sections across frameworks (React, Next.js, Vue, Svelte, plain HTML/CSS, Tailwind, shadcn/ui, MUI, Chakra, etc.).

Core Features & Use Cases

  • Infer and align to the project’s spacing system (tokens, scales, or patterns).
  • Remove inconsistent padding, margins, and gaps that cause cramped or blown‑out layouts.
  • Fix misaligned elements and uneven “cushioning” between related UI blocks.
  • Preserve or improve visual hierarchy and readability while cleaning whitespace.
  • Keep the site aesthetically pleasing and on‑brand, not just mechanically uniform.

Quick Start

Scan the project for spacing inconsistencies and apply project-aligned padding and margins.

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: ui-spacing-and-cushioning
Download link: https://github.com/tippyentertainment/skills/archive/main.zip#ui-spacing-and-cushioning

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.