skills.rest
ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

layout

Analyze UI layouts and prescribe spacing scales, hierarchy, and grid recommendations.

Updated Apr 12, 2026
Search Tags:#layout#spacing#responsive-design#rhythm#visual-hierarchy#spacing-system#grid-system
One-click install
npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill layout-zaineldeen-ashraf-ibrahim-ibrahim-samak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT/tree/main/.cursor/skills/layout
Command: npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill layout-zaineldeen-ashraf-ibrahim-ibrahim-samak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill diagnoses and fixes layouts that feel monotonous, crowded, or hierarchically weak by prescribing intentional spacing, rhythm, and structural changes so interfaces read clearly and feel balanced.

Core Features & Use Cases

  • Layout assessment: Analyze spacing consistency, visual hierarchy (squint test), grid structure, rhythm, and density to pinpoint what makes a layout feel "off".
  • Practical prescriptions: Provide a spacing scale, hierarchy strategy, grid vs. flex recommendations, responsive spacing rules, and tactics to break repetitive card grids.
  • Use case: Improve a marketing site hero and section spacing to create a clearer focal point, or tighten a data-dense dashboard to increase information density without feeling cramped.

Quick Start

Ask the layout skill to review a screen and produce a spacing scale, hierarchy adjustments, and concrete grid or flex layout recommendations to implement.

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 weak visual hierarchy in a crowded UI?▼

A spacing system establishes consistent intervals between elements to create visual rhythm. Using a standardized spacing scale fixes monotonous card grids and density problems by applying intentional spacing rules across web and mobile screens.

What is the best way to create a responsive spacing system for web and mobile screens?▼

The best way to create a responsive spacing system is defining a spacing scale with responsive spacing rules. This approach adjusts density and rhythm across screen sizes, ensuring layouts maintain structural balance without feeling cramped or crowded.

How do I increase information density in a dashboard without making the layout feel cramped?▼

To increase information density in a dashboard without feeling cramped, apply targeted rhythm adjustments and a structured spacing scale. Tightening visual hierarchy while using grid recommendations allows you to fit more data while maintaining readability.

When should I use grid vs flex recommendations to break repetitive card layouts?▼

Use grid recommendations for two-dimensional alignment and flex for one-dimensional spacing adjustments to break repetitive card layouts. Choosing the correct structural approach resolves monotonous density problems and establishes a stronger visual hierarchy.

Can I apply a layout assessment to both marketing site heroes and data-dense component grids?▼

Yes, you can apply layout assessment to both marketing site heroes and data-dense component grids. The assessment analyzes spacing consistency, grid structure, and rhythm to pinpoint layout issues and prescribe actionable hierarchy strategies for any screen.

Related Skills

Explore More Design & Creative Skills→
chuan-khunachuan-khuna
3

arrange

Assess UI layouts and create a spacing and rhythm improvement plan.

Community
Intermediate
cshyangcshyang

arrange

Apply consistent spacing scales and grid rhythm to UI layouts.

Community
Advanced
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
KrismithReddy12KrismithReddy12

design-review

Audit web interfaces for visual inconsistencies, spacing issues, and hierarchy problems.

Community
Advanced