skills.rest
ToXMon
ToXMonCOMMUNITY
Explore all skills by this author →
GitHub

uiux-layout-advisor

Provide layout, spacing, hierarchy, and WCAG 2.1 AA accessibility recommendations for UI/UX designs.

Updated Apr 11, 2026
Search Tags:#ui#accessibility#layout#ux#spacing#design-review#visual-hierarchy
One-click install
npx skills add https://github.com/ToXMon/tolu --skill uiux-layout-advisor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-layout-advisor
Source: https://github.com/ToXMon/tolu/tree/main/agent-zero-backup/workdir/memory-palace/skills/agentic-skills/uiux-layout-advisor
Command: npx skills add https://github.com/ToXMon/tolu --skill uiux-layout-advisor

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about uiux-layout-advisor

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

FAQPage Schema
How do I check my UI layout for WCAG 2.1 AA accessibility issues?▼

A UI layout accessibility check evaluates contrast ratios, touch target sizes, text scaling, and focus indicators against WCAG 2.1 AA criteria. This review identifies specific pixel-level adjustments needed to ensure compliance for users with visual or motor impairments.

What is the best way to fix inconsistent spacing and visual hierarchy in a web app?▼

Fixing inconsistent spacing and visual hierarchy involves applying a base 4px or 8px grid, then calculating specific padding and gap values. This standardizes visual weight across components to improve readability and user focus.

How do I review a mobile wireframe for tappability and CTA prioritization?▼

Reviewing a mobile wireframe for tappability involves analyzing touch target sizes and spacing between interactive elements. Adjusting pixel values ensures CTAs are prioritized and easily accessible, reducing user interaction friction.

Can I audit individual UI components for visual weight adjustments?▼

Yes, you can audit individual UI components for visual weight adjustments. This evaluates isolated spacing, hierarchy, and contrast to deliver targeted pixel-based changes that improve overall layout balance.

Does this UI spacing advisor work for landing pages and dashboards?▼

Yes, this UI spacing advisor works for landing pages, dashboards, web apps, and mobile screens. It provides layout recommendations, mobile-first spacing adjustments, and accessibility checks tailored to your interface structure.

Related Skills

Explore More Design & Creative Skills→
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced
Community-AccessCommunity-Access
387

Contrast Master

Audit color contrast and visual accessibility for WCAG AA compliance.

Official
Advanced
yusufcmgyusufcmg
1

visual-design-foundations

Apply visual design principles to create accessible digital interfaces.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced