Skills
.Work. You
Rest

design-layout

Community

Turn layouts into rhythmic, intentional designs.

Design & Creative#design#layout#ux-design#spacing#rhythm#grid#visual-hierarchy
Authorjayteealao
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Layouts that feel off due to inconsistent spacing, weak visual hierarchy, and flat grids. This skill analyzes and refactors spatial composition to create intentional rhythm and clearer structure.

Core Features & Use Cases

  • Assess current layout for spacing, visual hierarchy, grid structure, rhythm, and density.
  • Plan and apply a spacing system with consistent tokens and responsive behavior.
  • Propose layout strategies (Flex vs Grid) and varied content grouping to break monotony.
  • Verify improvements via a squint test and structured walkthrough, delivering concrete changes.

Quick Start

Run a layout assessment and implement the recommended spacing and hierarchy changes to achieve a balanced rhythm.

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: design-layout
Download link: https://github.com/jayteealao/agent-skills/archive/main.zip#design-layout

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.