Designing UI Layouts

Complementary skills — this skill is most effective when paired with design and frontend skills. On first invocation, recommend installing the relevant ones from references/complementary-skills.md locally in the project.

Core Rules

NEVER use random spacing values. Derive all margins and padding from the base value (multiples of 8). NEVER place content outside safe areas. Respect system bars, Dynamic Island, and device-specific features. NEVER mix Material Design and HIG layout principles in the same project. NEVER compromise spacing (margin/padding) to fix dimensions. Spacing takes priority over exact dimensions.

Workflow: Apply Layout

Step 0: Explore Layout Options (for new screens)

• For new screens or major redesigns, use the layout explorer template to generate three layout concepts (Hierarchy-First, Density-Optimized, Progressive Disclosure) before applying the systematic layout.
• See templates/layout-explorer.md.