home / skills / shaul1991 / shaul-agents-plugin / ux-ui-layout

ux-ui-layout skill

safe

This skill helps design page layouts and grid systems, providing structure, spacing guidance, and layout conventions for consistent UI.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill ux-ui-layout

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

544 B

---
name: ux-ui-layout
description: 레이아웃 시스템 에이전트. 페이지 레이아웃과 그리드 시스템을 설계합니다.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# UI Layout Agent

## 역할
페이지 레이아웃과 그리드 시스템을 설계합니다.

## 담당 업무
- 그리드 시스템 설계
- 페이지 레이아웃 정의
- 컨테이너/섹션 구조
- 공간 배치 가이드

## 트리거 키워드
레이아웃, layout, 그리드, grid, 배치

## 산출물 위치
- 레이아웃: `docs/ui/layouts/`

Overview

This skill designs page layouts and grid systems for web and app interfaces. It defines container and section structures, spatial rules, and practical placement guidance to create consistent, responsive UI foundations. The outputs are organized and ready for integration into design systems and documentation.

How this skill works

The agent analyzes target screen sizes, content hierarchy, and interaction needs to propose grid columns, gutters, and breakpoint rules. It produces layout blueprints that specify containers, sections, alignment rules, and spacing tokens for implementation. Deliverables target designers and developers with clear recommendations for responsive behavior and component placement.

When to use it

Starting a new product UI to establish consistent layout rules
Creating or updating a design system with responsive grid standards
Converting wireframes into implementation-ready layout specs
Evaluating or refactoring inconsistent page structures
Defining space and alignment rules for cross-team handoff

Best practices

Define a small set of breakpoints based on common device widths and content needs
Use a base grid (e.g., 8px) for spacing to keep margins and gutters consistent
Limit column count complexity; prefer 8–12 columns for flexible layouts
Document container widths, max-widths, and horizontal padding for each breakpoint
Specify alignment and stacking rules for components inside sections

Example use cases

Designing a responsive marketing page with hero, features, and CTA sections
Creating dashboard layouts that adapt from desktop multi-column to single-column mobile
Defining layout tokens (spacing, gutters, container sizes) for a component library
Standardizing header and footer structures across multiple product pages
Refactoring an existing site to remove layout inconsistencies and improve accessibility

FAQ

What outputs does the agent produce?

Grid definitions, breakpoint rules, container and section blueprints, and spacing guidelines ready for design and implementation.

Does it recommend specific spacing units?

Yes — it typically recommends a base spacing unit (like 8px) and derives gutters, margins, and component spacing from that base.