layout

Analyze UI layouts and outline concrete spacing, grid, and hierarchy improvements.

Updated Apr 11, 2026

Search Tags:#layout #responsive #design-system #spacing #hierarchy #grid #visual rhythm

Ready to run

npx skills add https://github.com/wukangcheng2944/claude-skills --skill layout-wukangcheng2944

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/wukangcheng2944/claude-skills/tree/main/layout
Command: npx skills add https://github.com/wukangcheng2944/claude-skills --skill layout-wukangcheng2944

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout spacing and visual rhythm to transform monotonous grids and misaligned UIs into clear, balanced designs.

Core Features & Use Cases

Assess current layout to identify spacing, hierarchy, grid structure, and rhythm issues.
Plan and implement a spacing system, rhythm, and layout approach guided by grid and flexbox principles.
Refine depth, elevation, and visual hierarchy for readability and design polish.

Quick Start

Audit the current UI layout and generate a concrete 3-step plan to improve spacing, grid structure, and visual hierarchy.

Frequently Asked Questions about layout

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

FAQPage Schema

How do I fix inconsistent spacing and misaligned grids in my UI layout?▼

To fix inconsistent spacing and misaligned grids in your UI layout, audit the current visual hierarchy and apply a structured spacing scale. This process identifies rhythm issues and generates concrete grid improvements for a balanced design.

What is visual rhythm in design systems and why does it matter for readability?▼

Visual rhythm in design systems is the consistent application of spacing scales to create predictable patterns. It matters for readability because uniform spacing and grid structure reduce visual clutter and guide user focus effectively.

How do I create a responsive layout spacing system using grid and flexbox?▼

To create a responsive layout spacing system using grid and flexbox, plan your approach guided by their principles to define consistent spacing scales. Document layout rules to ensure visual hierarchy adapts correctly across screen sizes.

Can I audit an existing crowded UI and get a concrete plan to improve visual hierarchy?▼

Yes, you can audit an existing crowded UI to assess its spacing, grid structure, and rhythm issues. This generates a concrete three-step plan to refine depth, elevation, and visual hierarchy for better readability.

What's the best way to document design-system elements for layout spacing and responsive rules?▼

The best way to document design-system elements is to outline the required spacing scale, grid principles, and responsive layout rules. This provides measurable criteria for success and ensures consistent visual rhythm across screens.