Skills
.Work. You
Rest

uiux-layout-advisor

Community

Create clearer, balanced, and accessible UI layouts

Design & Creative#ui#accessibility#layout#ux#spacing#design-review#visual-hierarchy
AuthorToXMon
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Many designs suffer from inconsistent spacing, unclear visual hierarchy, and accessibility oversights that reduce usability and conversion. This Skill eliminates guesswork by inspecting layouts and providing concrete, pixel-level recommendations to improve readability, interaction targets, and compliant contrast for diverse devices.

Core Features & Use Cases

  • Layout reviews for pages, components, and wireframes with rationale tied to user goals.
  • Spacing system guidance recommending base grids (4px/8px), specific padding and gap values, and mobile-first adjustments.
  • Accessibility checks against WCAG 2.1 AA including contrast ratios, touch target sizes, text sizing, and keyboard/focus behavior.
  • Use Case: Audit a mobile onboarding screen to prioritize CTAs, adjust spacing for tappability, and fix color contrast issues for users with low vision.

Quick Start

Ask the advisor to review this interface for spacing, hierarchy, and WCAG AA accessibility issues and provide specific pixel-based changes and quick wins.

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: uiux-layout-advisor
Download link: https://github.com/ToXMon/tolu/archive/main.zip#uiux-layout-advisor

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 471,000+ vetted skills library on demand.