ios-components

Installation
SKILL.md

iOS components — the rules that make controls feel native (iOS 26)

Source: Apple HIG component pages (read June 2026). iOS 26 floats chrome on Liquid Glass — read ios-liquid-glass-swiftui for the material behavior; this is the per-component rulebook.

Bars

Tab bar — top-level navigation, not actions. Floats on glass at the bottom; content peeks through. 2–5 destinations (more → a "More" tab; avoid). Don't hide/disable tab items when their content is empty — explain the empty state instead. Single-word labels; prefer filled SF Symbols. iOS 26: optional dedicated search tab at the trailing end; optional minimize-on-scroll. Badges (red oval) only for critical info.

Navigation bar = a navigation-specific toolbar at the top. Large title by default, collapses to inline on scroll (keep this). Use the standard Back/Close symbols — don't label them "Back"/"Close". Use inline title on dense utility screens.

Toolbar — horizontal control groups along top/bottom. iOS 26: "Reduce the use of toolbar backgrounds and tinted controls"; let the content layer inform the toolbar's color; use a scroll edge effect to separate it. Standard components get corner radii concentric with the bar — keep custom ones concentric too. Prefer borderless system symbols. .prominent style for the one primary action (Done/Submit), on the trailing side. Aim for ≤3 logical groups; titles <15 chars; never title with the app name. iOS: keep only the most important items in the bar, push the rest to a More menu.

Search — give it a primary position if important (Notes = bottom toolbar; Photos = a Search tab). Make content searchable from a single location; show scope via placeholder/scope bar/title; provide recent + predictive suggestions; let people clear history. .searchable(text:) + .searchToolbarBehavior(.minimize).

Buttons & actions

  • Hit region ≥ 44×44 pt (visionOS 60). Always include a press state for custom buttons.
  • Use style, not size, to mark the preferred action. One or two prominent buttons per view max.
  • Roles: Normal, Primary (accent, responds to Return), Cancel, Destructive (system red). Never assign the primary role to a destructive action — people tap primary without reading.
  • Verb-first title-case labels; familiar SF Symbols for familiar actions (square.and.arrow.up = share). iOS: show an activity indicator for non-instant actions ("Checkout" → "Checking out…").
  • Menus: title-case, drop articles, "…" when more input needed, dim unavailable items. iOS layouts: Small (4 symbol-only), Medium (3 symbol+label), Large (default list). Pull-down = actions / multi-select / submenu (≥3 items feels worthwhile); Pop-up = mutually-exclusive options, button shows current selection.
Installs
1
GitHub Stars
1
First Seen
2 days ago
ios-components — jpoindexter/design-and-ai-skills