swiftui
Use when building SwiftUI interfaces for iOS, iPadOS, macOS, or visionOS. Triggers on Liquid Glass adoption, SwiftUI animation/transitions, layout patterns, state management, design tokens, performance optimization, accessibility in SwiftUI, or creating "Apple-level" UI quality.
- Installs
- 46
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/petekp/claude-code-setup --skill swiftui- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads swiftui automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
SwiftUI Excellence Playbook
Tactical guide for designing and building world-class SwiftUI interfaces—the kind that feel at home next to Apple's own apps.
Six Non-Negotiables
- Content first — UI is a frame, not the painting
- System components unless measured reason not to — buy accessibility, platform behavior, design updates for free
- Design for states, not screens — every screen handles: loading, empty, error, offline, partial, permission denied
- Accessibility is a constraint — Dynamic Type, VoiceOver, Reduce Motion/Transparency, Increased Contrast
- Performance is a feature — "feels instant" interactions, instrument when hitches occur
- Coherence over cleverness — best interfaces feel inevitable
Quick Reference: ADA Rubric
| Category | Requirement |
|---|---|
| Delight | Micro-delight at success moments only, never reduces clarity |
| Innovation | In discovery, state communication, simplifying complexity |
| Interaction | Predictable, direct, forgiving, platform-appropriate |
| Inclusivity | Dynamic Type XXL+, VoiceOver, no color-only meaning, reduced motion |
| Visuals | Consistent rhythm, coherent materials, restrained tint |
Design Workflow (Step-by-Step)
- Define experience — 10-line spec: goal, primary action, states, edge cases, platforms
- Sketch IA — TabView vs NavigationSplitView vs deep navigation
- Design hierarchy — one hero, one primary CTA per moment, progressive disclosure
- Build tokens first — spacing, radius, typography, motion, colors
- Build components — cards, rows, buttons, empty states, filters
- Integrate structure — NavigationStack, NavigationSplitView, TabView, Sheets
- Add motion — only what improves comprehension and causality
- Accessibility + performance pass — Dynamic Type, VoiceOver, Instruments
Liquid Glass Quick Rules (iOS 26+)
Do:
- Use glass for navigation/control layer floating above content
- Group nearby glass in
GlassEffectContainer - Use
glassEffect(.interactive)for custom controls - Use
glassEffectIDfor morphing transitions
Don't:
- Glass on content layer (tables, documents)
- Glass on glass stacking
- Tint everything — only primary actions/meaning
- Custom backgrounds behind toolbars (let system handle scroll edge effects)
Layout Essentials
| Container | Use For |
|---|---|
List | Large datasets, selection, swipe actions, edit mode |
ScrollView + LazyVStack | Custom surfaces, cards, mixed content |
Grid | Forms, settings, dense structured layouts |
LazyVGrid | Responsive galleries |
NavigationSplitView | iPad/Mac hierarchical apps |
NavigationStack | Deep navigation flows |
Animation Principles
- Motion communicates causality, hierarchy, continuity
- State-driven animation, not imperative choreography
- Springs for organic UI, ease-in/out for fades
- Custom transitions for signature moments only
- Always provide Reduce Motion fallback
Performance Rules
| Rule | Implementation |
|---|---|
| Body must be cheap | No sorting, filtering, formatting, I/O in body |
| Stable identity | ForEach(items, id: \.id) not \.self, no UUID() in body |
| Dependency hygiene | Keep @State local, pass Binding not whole model |
| Instrument | Use SwiftUI instrument (Instruments 26) for hitches |
Accessibility Checklist
- System text styles, no clipping at XXL+
- Layout adapts (stacks turn vertical, rows multi-line)
- VoiceOver labels/hints on non-obvious controls
- Focus order matches reading order
- 44×44pt minimum touch targets
- Reduced Motion removes parallax, uses opacity
- Reduced Transparency increases separation
Component Primitives (Build These)
- Screen scaffold
- Section header
- Card surface
- List row
- Primary/secondary/icon buttons
- Empty state
- Loading skeleton
- Error banner
- Form field row
- Chip/tag/pill
Full Reference
For complete implementation patterns, code recipes, design tokens, Liquid Glass details, and the full ADA review checklist:
See: swiftui-playbook.md
FAQ
What does the swiftui skill do?
Use when building SwiftUI interfaces for iOS, iPadOS, macOS, or visionOS. Triggers on Liquid Glass adoption, SwiftUI animation/transitions, layout patterns, state management, design tokens, performance optimization, accessibility in SwiftUI, or creating "Apple-level" UI quality.
How do I install swiftui?
Run npx skills add https://github.com/petekp/claude-code-setup --skill swiftui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/swiftui/ (personal) or .claude/skills/swiftui/ (project).
Which AI agents can use swiftui?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is swiftui safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains swiftui?
It is published by petekp in petekp/claude-code-setup. It has 46 recorded installs.
More from petekp/claude-code-setup
code-comments
petekp/claude-code-setup
Write, review, or remove code comments. Use when adding comments or doc comments, reviewing the comments in a diff, or cleaning up or removing comments.
deep-research
petekp/claude-code-setup
Investigate a question that requires sustained research across sources and produce cited findings. Use for deep research requests; skip ordinary lookups and single-document reviews.
exhaustive-systems-analysis
petekp/claude-code-setup
Open the skill to read its SKILL.md instructions.
typography
petekp/claude-code-setup
Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure, typographic hierarchy, variable fonts, font loading, or OpenType features.
claude-code-audit
petekp/claude-code-setup
Forensic audit of the user's recent Claude Code sessions to surface step-change workflow improvements — not marginal ones. Use when the user asks to "audit my Claude Code sessions", "analyze how I use Claude Code", "find patterns in my usage", "improve my Claude Code workflow", "review my sessions", "find leverage in my setup", or wants to understand where their Claude Code setup is leaking time. Samples dozens of real transcripts, extracts quantitative signal via scripts, uses parallel subagents for deep reads, then synthesizes into a short prioritized report with drafted implementations (new skills, CLAUDE.md rules, hooks, settings diffs) that the user can install directly. Trigger even when the user doesn't say the word "audit" — if they're asking about improving or reviewing their Claude Code habits at scale, use this skill.
literate-guide
petekp/claude-code-setup
Create a narrative guide to a codebase or feature in the style of Knuth's Literate Programming — code and prose interwoven as a single essay, ordered for human understanding rather than compiler needs. Use when the user asks to 'explain this codebase as a story', 'write a literate guide', 'create a narrative walkthrough', 'tell the story of this code', 'Knuth-style documentation', 'weave a guide for this feature', or when they want deep, readable documentation that treats the program as literature. Also trigger when someone wants a document that a thoughtful reader could follow from start to finish and come away understanding both WHAT the code does and WHY every design choice was made.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.