Ux Spacing Layout
Automatically adjusts element spacing and layout to improve user experience based on design principles.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add ux-spacing-layout npx -- -y @trustedskills/ux-spacing-layout
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"ux-spacing-layout": {
"command": "npx",
"args": [
"-y",
"@trustedskills/ux-spacing-layout"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The ux-spacing-layout skill allows AI agents to intelligently adjust spacing and layout in user interfaces. It can automatically add padding, margins, or whitespace around elements based on context and design principles. This ensures a more visually appealing and user-friendly experience by optimizing the arrangement of UI components.
When to use it
- Creating prototypes: Quickly generate layouts with consistent spacing for mockups and initial designs.
- Responsive design adjustments: Automatically adapt spacing rules across different screen sizes and devices.
- Improving accessibility: Ensure sufficient whitespace around interactive elements for better readability and usability.
- Refining existing interfaces: Identify and correct inconsistent or poorly-spaced UI components in an established application.
Key capabilities
- Automatic padding adjustments
- Margin calculations
- Whitespace management
- Responsive layout adaptation
Example prompts
- "Add 20 pixels of padding around all buttons on this page."
- "Increase the margin between these two sections to create more visual separation."
- "Make sure there's at least 16px of whitespace around interactive elements for accessibility."
Tips & gotchas
The skill’s effectiveness relies on clear instructions and a well-defined UI structure. It may require some initial setup or configuration depending on the specific application or design system being used.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.