Skip to content
AI Primer

swiftui-ui-patterns

Dimillianby Dimillian3 months ago3.9k

Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.

Install

npx skills add https://github.com/dimillian/skills --skill swiftui-ui-patterns
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/dimillian--skills--swiftui-ui-patterns/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

First 3 tasks to try

  1. 1Identify the feature or screen and the primary interaction model (list, detail, 
    Identify the feature or screen and the primary interaction model (list, detail, editor, settings, tabbed).
  2. 2Find a nearby example in the repo with rg "TabView\(" or similar, then read th
    Find a nearby example in the repo with `rg "TabView\("` or similar, then read the closest SwiftUI view.
  3. 3Apply local conventions:
    prefer SwiftUI-native state, keep state local when possible, and use environment injection for shared dependencies.

Related skills

💻 Developer Tools

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra · 27 days ago266.1k
💻 Developer Tools

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra · 27 days ago266.1k
💻 Developer Tools

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

by obra · 14 days ago266.1k
💻 Developer Tools

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

by obra · 14 days ago266.1k