Swift Expert
Jeffallan/claude-skills
Builds Swift apps for Apple platforms with SwiftUI, protocol-oriented design, async/await, actors and Sendable checks, verified with swift build and swift test.
SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView…
Install Layout
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rshankras/claude-code-apple-skills layout --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/swiftui/layout .claude/skills/layout && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .claude/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layoutType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rshankras/claude-code-apple-skills layout --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/swiftui/layout .agents/skills/layout && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .agents/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rshankras/claude-code-apple-skills layout --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/swiftui/layout .cursor/skills/layout && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .cursor/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/rshankras/claude-code-apple-skills.git --path skills/swiftui/layout--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rshankras/claude-code-apple-skills layout --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/swiftui/layout .gemini/skills/layout && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .gemini/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install rshankras/claude-code-apple-skills layoutInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/swiftui/layout .github/skills/layout && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .github/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rshankras/claude-code-apple-skills --skill layout -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rshankras/claude-code-apple-skills layout --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/swiftui/layout .opencode/skills/layout && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "layout" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui/layout into .opencode/skills/layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
layout- GitHub stars
- 781
- Token cost
- ~1.8k tokens
- SKILL.md length
- 734 words
- Files
- 1
- Skills in repo
- 46
- Repo updated
- First seen
- Licence
- MIT
At a glance
SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView…
- Building custom layouts
- SKILL.md covers When This Skill Activates, Custom Layout protocol (not…, Grid decisions and Custom containers (Demystify…, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Fixing lazy-stack jank
What it does
Layout is an agent skill from rshankras/claude-code-apple-skills. SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView performance rules (what breaks laziness, prefetch discipline, scroll APIs). Use when building custom layouts or containers, fixing lazy-stack jank or memory growth, or wiring programmatic/snapping scrolling.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Mobile, covering iOS development and Mobile performance. It works with SwiftUI. The repository describes itself as: Claude Code skills for Apple platform development (iOS, macOS, iPadOS) — product validation, code generation, App Store optimization, and more. The licence is MIT.
When your agent uses it
- Building custom layouts
- Fixing lazy-stack jank
- Wiring programmatic/snapping scrolling
Example prompts
- “/layout”
Requirements
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep
What it can do on your machine
Read from SKILL.md and the folder at commit 9ffb831. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditGlobGrep
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
developer.apple.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Layout loads about 1.8k tokens when it runs. Until then it costs about 102 tokens; SKILL.md has 734 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from rshankras/claude-code-apple-skills at commit 9ffb831, republished under its MIT licence (© rshankras). 734 words, ~1,791 tokens.
Download SKILL.mdSave it as
.claude/skills/layout/SKILL.md (or your agent's skills folder).- name
- layout
- description
- SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView performance rules (what breaks laziness, prefetch discipline, scroll APIs). Use when building custom layouts or containers, fixing lazy-stack jank or memory growth, or wiring programmatic/snapping scrolling.
- allowed-tools
- Read, Write, Edit, Glob, Grep
- last_verified
- 2026-07-16
- review_by
- 2027-06-22
SwiftUI Layout & Containers
The layer between "stacks and spacers" and "it scrolls like butter with 100k rows" — Apple's
Layout protocol, container composition, and the lazy-stack rules from the WWDC26 deep dive.
View identity/data-flow questions route to swiftui/data-flow.
When This Skill Activates
- "Make these buttons equal width" / measurement-dependent layout
- Building a reusable container (custom List/board/carousel) that should accept ForEach + sections
- Lazy stack jank, memory growth, scroll-position bugs, broken scroll targeting
- Programmatic scrolling, paging/snapping, scroll-linked effects
- GeometryReader causing layout loops or mangled sizing
Custom Layout protocol (not GeometryReader)
Reach for a custom Layout whenever you must measure subviews and feed the measurement back
into layout — GeometryReader only measures its container and can't influence the engine.
Canonical case: equal-width buttons.
sizeThatFits: propose.unspecifiedto read each subview's ideal size (subviews.map { $0.sizeThatFits(.unspecified) }); guard empty subviews;replacingUnspecifiedDimensions()for nil proposal dimensions.placeSubviews: never assume origin (0,0) — usebounds.minX/midX(non-zero origins are what make layouts composable);place(at:anchor:proposal:)with a proposal that may differ from the ideal size (that's how equal widths happen).- Respect spacing preferences:
subviews[i].spacing.distance(to:along:), taking the larger of conflicting preferences — matching built-in containers. No hardcoded 8s. - Per-subview data via
LayoutValueKey(+ alayoutValueconvenience modifier), read assubview[Key.self]. - Cache only after Instruments shows layout cost — it's an optimization, not a requirement.
- Switch layouts without killing identity:
AnyLayout(HStackLayout())↔ custom layout with.animation(_:value:)— SwiftUI sees one changing view, so state survives and it animates. - Don't build fallbacks into the layout — wrap alternatives in
ViewThatFits.
Grid decisions
| Need | Use |
|---|---|
| Static 2D with cross-row alignment | Grid/GridRow (+ gridCellColumns to span, gridColumnAlignment per column) |
| Scrollable, large content | LazyVGrid/LazyHGrid (only visible views load; one axis fixed up front) |
| "First arrangement that fits" | ViewThatFits |
Custom containers (Demystify Containers)
Make containers that compose like List does:
- API shape: a trailing
@ViewBuilder var content: Content— callers can then mix static views,ForEach, and conditionals. - Iterate resolved children with
ForEach(subviews: content); need the whole collection (count/chunking)?Group(subviews: content) { subviews in … }. - Internalize declared vs resolved: one declared ForEach resolves to N subviews; Group to
its children; EmptyView to zero;
ifconditionally. Counting declared views is a bug. - Sections are opt-in:
ForEach(sections: content), readingsection.header/section.content; checkheader.isEmptybefore rendering the slot. - Per-child customization via container values:
extension ContainerValues { @Entry var … }, set with a convenience modifier, read viasubview.containerValues. Scoping model: Environment flows down · Preferences flow up · container values reach only the direct container. Setting one on aSectionstyles the whole section.
Show full SKILL.md (339 more words)Show less
Lazy stacks & scrolling performance (WWDC26 rules)
LazyVStack builds views only until the viewport fills; totals and offsets are estimated from average placed-view size and corrected as you scroll. Everything below follows from that:
- One subview per ForEach element, always. An
ifinside a row (0-or-1 views) forces the stack to keep off-screen views + their@Statealive to preserve indices — and environment changes then re-evaluate off-screen bodies. Filter at the data layer (@Querypredicate); gate auth-type conditions outside the stack. - Never key logic off absolute scroll offset in a lazy stack (
onScrollGeometryChangesees estimates) — useonScrollTargetVisibilityChange(threshold: 0.8)for visibility triggers. - Set up in
init, notonAppear(_model = State(initialValue:)): body runs during prefetch;onAppearfires only on-screen, throwing prefetch work away and causing post-appearance size jumps. Start async loads ininit/task. - Don't persist meaningful state in row
@State— off-screen views are eventually released. Hoist (@State var highlighted: Set<ID>outside,@Bindingdown). scrollTransitiontransforms must stay inside the original frame (scale ✅; rotations escaping the frame make views vanish early).- Don't drive layout from
onGeometryChangeheight feedback (content shoves, targeting breaks) — that's the customLayoutcase above. - Nest
LazyHStackinsideLazyVStackfreely (unscrolled rows stay unloaded) — but fix child heights (lineLimit, explicit frames) in the horizontal stacks. pinnedViews: [.sectionHeaders]pins headers; infinite scroll = trailingProgressView().onAppear { fetchNextPage() }after the ForEach.
The scroll API map
- Snapping/paging:
scrollTargetLayout()+scrollTargetBehavior(.viewAligned/.paging). - Track/control position:
scrollPositionbinding; programmaticScrollPosition+scrollTo(id:)— works for unloaded targets if IDs map to stable one-subview elements. - Scroll-linked effects:
scrollTransition(enter/leave viewport) andvisualEffect(geometry without GeometryReader) — details indesign/animation-patterns. - Reactions:
onScrollGeometryChange(fine outside lazy estimation),onScrollVisibilityChange(autoplay/analytics). - Performance floor: list/scroll internals were rewritten (WWDC25) — macOS lists ~6× faster at
100k+ rows, and lazy loading works in nested
ScrollView+LazyVStack; profile with the SwiftUI instrument (performance/swiftui-debugging).
Output Format
Layout review: Symptom | Rule violated | Fix — check the one-subview-per-element rule first
in any lazy-stack complaint; it explains most jank, memory growth, and targeting bugs.
References
- https://developer.apple.com/videos/play/wwdc2022/10056/ (Compose custom layouts)
- https://developer.apple.com/videos/play/wwdc2024/10146/ (Demystify SwiftUI containers)
- https://developer.apple.com/videos/play/wwdc2026/321/ (Dive into lazy stacks and scrolling)
- Related skills:
swiftui/data-flow(identity/ForEach IDs),performance/swiftui-debugging,design/animation-patterns(scroll-linked effects)
© rshankras, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/swiftui/layout of rshankras/claude-code-apple-skills.
Open the folder on GitHubat commit 9ffb831
Compare with similar skills
Layout next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Layout this skillrshankras/claude-code-apple-skills | 781 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Swift ExpertJeffallan/claude-skills | 12k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Senior Mobileborghei/Claude-Skills | 874 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Swiftui Protwostraws/SwiftUI-Agent-Skill | 5k | 2 repos | ~1k | Automated safety check: Pass | MIT | |
| Swiftui UI PatternsAFK-surf/OpenBridge | 430 | 4 repos | ~887 | Automated safety check: Pass | MIT | |
| Swiftui Performance Auditharperreed/dotfiles | 334 | 8 repos | ~1.4k | Automated safety check: Pass | None |
Similar skills
Senior Mobile
borghei/Claude-Skills
A skill your agent uses when the user asks to "build a mobile app", "scaffold React Native project", "create SwiftUI views", "set up Jetpack Compose", "optimize mobile performance", "configure Expo…
Swiftui Pro
twostraws/SwiftUI-Agent-Skill
Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.
Swiftui UI Patterns
AFK-surf/OpenBridge
Best practices and example-driven guidance for building SwiftUI views and components.
Swiftui Performance Audit
harperreed/dotfiles
Audit and improve SwiftUI runtime performance from code review and architecture.
Hig Project Context
raintree-technology/hig-doctor
Create or update a shared Apple design context document that other HIG skills use to tailor guidance.
More from rshankras/claude-code-apple-skills
All 46 skills in this repoAccessibility Generator
rshankras/claude-code-apple-skills
Generate accessibility infrastructure for VoiceOver, Dynamic Type, and accessibility features.
Animation Patterns
rshankras/claude-code-apple-skills
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.
App Description Writer
rshankras/claude-code-apple-skills
Generate compelling App Store descriptions that convert browsers into users.
App Icon Generator
rshankras/claude-code-apple-skills
Generates an app icon for macOS or iOS — a fast CoreGraphics placeholder and/or flat layered source art to finish in Icon Composer (the Liquid Glass / iOS 26+ standard).
App Namer
rshankras/claude-code-apple-skills
Turn an app idea into validated, App-Store-ready name candidates.
Bundles And Licensing
rshankras/claude-code-apple-skills
Revenue beyond the single-app price tag — own-app bundles, Family Sharing as a conversion lever, cross-developer bundles & suites, and institutional licensing via Group Purchases / Apple School &…
Related
Works with
Categories
Questions about Layout
What does Layout do?
SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView…. Layout is an agent skill from rshankras/claude-code-apple-skills. SwiftUI layout beyond stacks — the Layout protocol (when custom layout beats GeometryReader), Grid vs lazy grids, custom containers with sections and container values, and lazy-stack/ScrollView performance rules (what breaks laziness, prefetch discipline, scroll APIs).
When should I use Layout?
Layout fits situations like: building custom layouts; fixing lazy-stack jank; wiring programmatic/snapping scrolling.
How do I install Layout in Claude Code?
Run `npx skills add rshankras/claude-code-apple-skills --skill layout -a claude-code`. Or copy the skill folder (skills/swiftui/layout in rshankras/claude-code-apple-skills) into .claude/skills/layout in your project. Claude Code loads it when a task matches its description.
How do I install Layout in Codex?
Run `npx skills add rshankras/claude-code-apple-skills --skill layout -a codex`. Or copy the skill folder (skills/swiftui/layout in rshankras/claude-code-apple-skills) into .agents/skills/layout in your project. Codex loads it when a task matches its description.
Can I use Layout in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rshankras/claude-code-apple-skills --skill layout -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/layout, .gemini/skills/layout, .github/skills/layout and .opencode/skills/layout in your project.
What does Layout need to run?
SKILL.md names no scripts, command-line tools or credentials: Layout is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep.
Does Layout access the network?
SKILL.md names 1 domain. As links in the text: developer.apple.com. This is read from the text; nothing was executed.
Is Layout safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Layout use?
Layout is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Layout use?
About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Layout?
Skills that share tags, products or a category with Layout: Swift Expert (Jeffallan/claude-skills, 12k stars), Senior Mobile (borghei/Claude-Skills, 874 stars), Swiftui Pro (twostraws/SwiftUI-Agent-Skill, 5k stars) and Swiftui UI Patterns (AFK-surf/OpenBridge, 430 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Layout?
rshankras (a GitHub user) maintains it in rshankras/claude-code-apple-skills, which has 781 GitHub stars. The repository holds 46 skills in this directory. The repository was last updated on July 24, 2026.
Source: rshankras/claude-code-apple-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.