group-related-elements
CommunityMake relationships obvious with smarter spacing
Design & Creative#ui design#proximity#spacing system#information hierarchy#form layout#visual grouping
Authorgnurio
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Poor proximity makes related UI elements feel disconnected and unrelated elements feel grouped, harming clarity and scan speed.
Core Features & Use Cases
- Proximity-based grouping: Brings label-input pairs and other related components closer while increasing space between distinct groups.
- Spacing hierarchy: Enforces tight spacing within components, looser spacing between components, and the loosest spacing between sections to create a clear visual rhythm.
- Pass/Fail assessment: Flags common issues like uniform spacing, label drift, section smushing, and border dependency, then recommends concrete spacing adjustments.
Quick Start
Run the skill on a UI draft by listing the elements and their current gaps, then ask it to recommend spacing changes and report whether the grouping passes or fails.
Dependency Matrix
Required Modules
None requiredComponents
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: group-related-elements Download link: https://github.com/gnurio/refactoring-ui-plugin/archive/main.zip#group-related-elements Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.