What is horizontal-first layouting?

It is a methodology that treats a UI screen as a series of horizontal slices or rows, making it easier to manage Auto Layout constraints and stack view logic.

Why is the ASCII preview mandatory?

The ASCII preview ensures the layout structure is correctly understood and approved by the developer before generating complex Swift code, preventing logic errors.

Does this work with SwiftUI?

This specific skill is optimized for pure UIKit development, particularly for teams using programmatic UI and Clean Architecture (VIP+W).

How does it handle flexible content?

The methodology explicitly identifies 'Flexible Content Areas' (usually spacers or scrolling regions) to ensure vertical compression and hugging priorities are set correctly.

UIKit Horizontal-First Layouting

Name: UIKit Horizontal-First Layouting
Author: arimunandar

byarimunandar

0•

Mobile Development

Streamlines iOS interface development using a systematic horizontal-slicing methodology and mandatory ASCII layout previews.

This skill enforces a structured, architectural approach to building UIKit interfaces by requiring a 'horizontal-first' slicing strategy. Before any Swift code is generated, the skill produces a detailed ASCII diagram of the screen layout to identify rows, content bands, and height constraints (fixed vs. flexible). This methodology ensures that programmatic Auto Layout implementation is logical, maintainable, and verified by the user, significantly reducing layout bugs and trial-and-error during iOS development.

Key Features

01Top-to-bottom sequential row implementation

02Clean programmatic UIKit code generation in Swift

03Horizontal-first UI slicing methodology

04Explicit mapping of fixed vs. flexible height constraints

050 GitHub stars

06Mandatory ASCII layout visualization before code generation

Use Cases

01Prototyping mobile UI layouts with immediate visual confirmation

02Designing complex programmatic iOS screens without Storyboards

03Refactoring messy Auto Layout code into structured vertical stacks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arimunandar/claude-code-ios-plugin uikit-layouting

For use in Claude.ai and ChatGPT

Download Skill