ux-ui-layout_skill

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