@mmerterden/multi-agent-pipeline 20.17.1 → 20.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/docs/facts.json +6 -6
- package/install/_mcp-register.mjs +1 -1
- package/install/_xcode-skills.mjs +263 -0
- package/install/catalog-history.json +1 -1
- package/install/claude.mjs +23 -0
- package/install/codex.mjs +11 -0
- package/install/copilot.mjs +9 -0
- package/manifest.json +85 -45
- package/package.json +1 -1
- package/pipeline/commands/multi-agent/stack/SKILL.md +2 -0
- package/pipeline/lib/xcode-plugin.mjs +131 -0
- package/pipeline/multi-agent-refs/features/doctor.md +10 -0
- package/pipeline/scripts/doctor.mjs +38 -0
- package/pipeline/scripts/uninstall.mjs +57 -1
- package/pipeline/skills/.skill-manifest.json +33 -13
- package/pipeline/skills/.skills-index.json +66 -11
- package/pipeline/skills/shared/README.md +18 -13
- package/pipeline/skills/shared/external/NOTICE-avdlee-swiftui-agent-skill.md +3 -1
- package/pipeline/skills/shared/external/NOTICE-dimillian-skills.md +2 -1
- package/pipeline/skills/shared/external/hig-app-icons/SKILL.md +159 -0
- package/pipeline/skills/shared/external/hig-app-icons/evals/evals.json +48 -0
- package/pipeline/skills/shared/external/hig-app-icons/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/hig-app-icons/references/icon-workflow.md +115 -0
- package/pipeline/skills/shared/external/hig-components-layout/SKILL.md +32 -4
- package/pipeline/skills/shared/external/hig-components-layout/evals/evals.json +47 -0
- package/pipeline/skills/shared/external/hig-components-layout/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/hig-components-layout/references/bars-and-tabs.md +231 -0
- package/pipeline/skills/shared/external/hig-components-layout/references/containers.md +5 -30
- package/pipeline/skills/shared/external/hig-components-status/SKILL.md +1 -1
- package/pipeline/skills/shared/external/hig-foundations/SKILL.md +23 -4
- package/pipeline/skills/shared/external/hig-foundations/evals/evals.json +47 -0
- package/pipeline/skills/shared/external/hig-foundations/evals/trigger-eval.json +21 -0
- package/pipeline/skills/shared/external/hig-foundations/references/foundations-detail.md +34 -26
- package/pipeline/skills/shared/external/hig-foundations/references/type-color-spacing.md +219 -0
- package/pipeline/skills/shared/external/hig-inputs/SKILL.md +5 -4
- package/pipeline/skills/shared/external/hig-patterns/SKILL.md +19 -3
- package/pipeline/skills/shared/external/hig-patterns/references/onboarding-and-states.md +188 -0
- package/pipeline/skills/shared/external/hig-patterns/references/patterns.md +5 -11
- package/pipeline/skills/shared/external/hig-platforms/SKILL.md +17 -5
- package/pipeline/skills/shared/external/hig-platforms/references/ipad-layout.md +218 -0
- package/pipeline/skills/shared/external/ios-accessibility/SKILL.md +4 -1
- package/pipeline/skills/shared/external/ios-accessibility/references/large-content-and-appearance.md +135 -0
- package/pipeline/skills/shared/external/ios-design-review/SKILL.md +146 -0
- package/pipeline/skills/shared/external/ios-design-review/evals/evals.json +48 -0
- package/pipeline/skills/shared/external/ios-design-review/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/ios-design-review/references/appearance-matrix.md +135 -0
- package/pipeline/skills/shared/external/ios-design-review/references/checklist.md +193 -0
- package/pipeline/skills/shared/external/ios-haptics/SKILL.md +191 -0
- package/pipeline/skills/shared/external/ios-haptics/evals/evals.json +49 -0
- package/pipeline/skills/shared/external/ios-haptics/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/ios-haptics/references/core-haptics.md +215 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/NOTICE.md +53 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/SKILL.md +179 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/evals/evals.json +65 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/references/api-map.md +212 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/references/fixed-assumptions.md +202 -0
- package/pipeline/skills/shared/external/ios-iphone-duo/references/poses-and-panes.md +122 -0
- package/pipeline/skills/shared/external/ios-sf-symbols/SKILL.md +177 -0
- package/pipeline/skills/shared/external/ios-sf-symbols/evals/evals.json +49 -0
- package/pipeline/skills/shared/external/ios-sf-symbols/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/ios-sf-symbols/references/effects-and-custom-symbols.md +135 -0
- package/pipeline/skills/shared/external/swiftui-animation/SKILL.md +38 -50
- package/pipeline/skills/shared/external/swiftui-animation/evals/evals.json +47 -0
- package/pipeline/skills/shared/external/swiftui-animation/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/swiftui-animation/references/animation-advanced.md +7 -73
- package/pipeline/skills/shared/external/swiftui-animation/references/scroll-effects.md +185 -0
- package/pipeline/skills/shared/external/swiftui-expert-skill/SKILL.md +6 -6
- package/pipeline/skills/shared/external/swiftui-expert-skill/references/animation-advanced.md +3 -253
- package/pipeline/skills/shared/external/swiftui-expert-skill/references/animation-basics.md +4 -47
- package/pipeline/skills/shared/external/swiftui-expert-skill/references/animation-transitions.md +3 -111
- package/pipeline/skills/shared/external/swiftui-expert-skill/references/liquid-glass.md +11 -381
- package/pipeline/skills/shared/external/swiftui-liquid-glass/SKILL.md +184 -224
- package/pipeline/skills/shared/external/swiftui-liquid-glass/evals/evals.json +47 -0
- package/pipeline/skills/shared/external/swiftui-liquid-glass/evals/trigger-eval.json +22 -0
- package/pipeline/skills/shared/external/swiftui-liquid-glass/references/liquid-glass.md +246 -33
- package/pipeline/skills/shared/external/swiftui-liquid-glass/references/uikit-glass.md +227 -0
- package/pipeline/skills/shared/external/swiftui-patterns/SKILL.md +15 -18
- package/pipeline/skills/shared/external/swiftui-ui-patterns/references/components-index.md +1 -1
- package/pipeline/skills/shared/external/swiftui-ui-patterns/references/haptics.md +6 -68
- package/pipeline/skills/skills-index.md +16 -11
- package/pipeline/skills/shared/external/swiftui-patterns/references/design-polish.md +0 -786
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: hig-app-icons
|
|
3
|
+
description: "iOS app icons: Icon Composer layered icons, default, dark, clear and tinted appearances, asset catalogs, alternate icons and the archive checks icons fail. Use when designing, exporting, wiring up or reviewing an app icon, or diagnosing an icon upload error or rejection."
|
|
4
|
+
metadata:
|
|
5
|
+
source: multi-agent-pipeline
|
|
6
|
+
date_added: "2026-10-08"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# App icons
|
|
10
|
+
|
|
11
|
+
An iOS icon is no longer a stack of PNGs at a dozen sizes. It is a layered
|
|
12
|
+
design that the system renders: it adds the rounded mask, the Liquid Glass
|
|
13
|
+
highlights and refraction, the dark, clear and tinted looks, and every size the
|
|
14
|
+
system needs. The designer's job moves from exporting sizes to giving the
|
|
15
|
+
system good layers.
|
|
16
|
+
|
|
17
|
+
## What the system expects
|
|
18
|
+
|
|
19
|
+
| | iOS, iPadOS |
|
|
20
|
+
|---|---|
|
|
21
|
+
| Canvas | 1024x1024 px, square, unmasked (Apple Watch: 1088x1088 px) |
|
|
22
|
+
| Style | Layered: a background plus foreground layers |
|
|
23
|
+
| Appearances | Default, dark, clear light, clear dark, tinted light, tinted dark |
|
|
24
|
+
| Sizes | Generated by the system from the one design |
|
|
25
|
+
| Colour spaces | sRGB, Gray Gamma 2.2, Display P3 |
|
|
26
|
+
|
|
27
|
+
People choose the Home Screen look (default, dark, clear or tinted). Variants
|
|
28
|
+
you do not design are generated automatically. Provide your own when the
|
|
29
|
+
automatic result loses the idea of the icon, for example when a brand colour
|
|
30
|
+
carries the meaning.
|
|
31
|
+
|
|
32
|
+
## Icon Composer is the default path
|
|
33
|
+
|
|
34
|
+
Icon Composer ships with Xcode (Xcode > Open Developer Tool > Icon Composer)
|
|
35
|
+
and as a download from developer.apple.com/icon-composer. One Icon Composer
|
|
36
|
+
file describes the icon for iPhone, iPad, Mac and Apple Watch, in every
|
|
37
|
+
appearance.
|
|
38
|
+
|
|
39
|
+
1. Draw the layers in any vector tool on the Apple template from Apple Design
|
|
40
|
+
Resources. Separate anything you may want to restyle per appearance.
|
|
41
|
+
Convert text to outlines. Leave out blurs, shadows, highlights, background
|
|
42
|
+
fills and the corner mask; Icon Composer and the system add those.
|
|
43
|
+
2. Export layers as SVG; use PNG only for art SVG cannot express (mesh
|
|
44
|
+
gradients, raster artwork).
|
|
45
|
+
3. In Icon Composer, import the layers, organise them into at most four
|
|
46
|
+
groups (the groups become the depth layers), set the background as a solid
|
|
47
|
+
colour or gradient, and tune Liquid Glass per group: specular, blur,
|
|
48
|
+
translucency, shadow, refraction.
|
|
49
|
+
4. Preview default, dark and mono (mono covers clear and tinted, light and
|
|
50
|
+
dark), on each platform, over real wallpapers. Fix variants under Color in
|
|
51
|
+
the Style inspector.
|
|
52
|
+
5. Add the file to the Xcode project. The App Icon field in the target's
|
|
53
|
+
General tab must match the file name without extension. This file replaces
|
|
54
|
+
any `AppIcon` asset catalog for the build.
|
|
55
|
+
|
|
56
|
+
For deployment targets older than the Liquid Glass releases, Xcode generates
|
|
57
|
+
flat images from the Icon Composer file at build time. If the existing icon
|
|
58
|
+
must keep appearing unchanged on those older releases, keep the asset catalog
|
|
59
|
+
instead. Step-by-step detail and the asset catalog route are in
|
|
60
|
+
`references/icon-workflow.md`.
|
|
61
|
+
|
|
62
|
+
## Design rules worth enforcing
|
|
63
|
+
|
|
64
|
+
Each of these comes from the HIG app icon page; the reason is given so a
|
|
65
|
+
review can argue the point instead of citing a rule.
|
|
66
|
+
|
|
67
|
+
- **Square, unmasked layers.** The system masks the corners; a pre-masked layer
|
|
68
|
+
breaks the specular edge and leaves jagged corners.
|
|
69
|
+
- **Primary content centred.** Masks and corner adjustments crop the edges.
|
|
70
|
+
- **Clean, hard edges on foreground shapes.** System highlights and shadows
|
|
71
|
+
read soft edges as mistakes.
|
|
72
|
+
- **No baked effects.** Your shadows and glows are static; the system's react
|
|
73
|
+
to light and motion, and the two fight.
|
|
74
|
+
- **Simple concept, few shapes.** Detail disappears at small sizes and under
|
|
75
|
+
glass.
|
|
76
|
+
- **Text only when it is essential.** It cannot be localized or read by
|
|
77
|
+
VoiceOver and is usually too small.
|
|
78
|
+
- **Same features in every appearance.** Swapping elements per look makes the
|
|
79
|
+
app hard to find when people change their Home Screen style.
|
|
80
|
+
- **No Apple hardware, no SF Symbols.** Apple product replicas are not allowed
|
|
81
|
+
in icons, and the SF Symbols terms prohibit symbols (or look-alikes) in app
|
|
82
|
+
icons and logos. See `ios-sf-symbols`.
|
|
83
|
+
- **No photos or UI screenshots.** They do not survive layering, small sizes
|
|
84
|
+
or the dark and tinted looks.
|
|
85
|
+
|
|
86
|
+
## Alternate icons
|
|
87
|
+
|
|
88
|
+
People can pick another icon from inside the app (a team colour, a seasonal
|
|
89
|
+
look). Each alternate is its own Icon Composer file with its own dark, clear
|
|
90
|
+
and tinted variants, and each goes through App Review.
|
|
91
|
+
|
|
92
|
+
- List them in the **Alternate App Icon Sets** build setting
|
|
93
|
+
(`ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES`); the primary is the
|
|
94
|
+
**Primary App Icon Set Name**. Xcode writes `CFBundleIcons`,
|
|
95
|
+
`CFBundlePrimaryIcon` and `CFBundleAlternateIcons` into Info.plist from
|
|
96
|
+
those settings, so do not edit those keys by hand.
|
|
97
|
+
- Switch with `UIApplication.setAlternateIconName(_:completionHandler:)`, or
|
|
98
|
+
its `async throws` form. Pass `nil` to return to the primary icon. Check
|
|
99
|
+
`supportsAlternateIcons` first and read the current one from
|
|
100
|
+
`alternateIconName`.
|
|
101
|
+
- The system shows an alert telling the person the icon changed. Trigger the
|
|
102
|
+
change from an explicit choice in the UI, not on launch or on a timer.
|
|
103
|
+
|
|
104
|
+
```swift
|
|
105
|
+
import OSLog
|
|
106
|
+
import UIKit
|
|
107
|
+
|
|
108
|
+
private let logger = Logger(subsystem: "app.icons", category: "alternate")
|
|
109
|
+
|
|
110
|
+
@MainActor
|
|
111
|
+
func applyIcon(named name: String?) async {
|
|
112
|
+
let app = UIApplication.shared
|
|
113
|
+
guard app.supportsAlternateIcons, app.alternateIconName != name else { return }
|
|
114
|
+
do {
|
|
115
|
+
try await app.setAlternateIconName(name)
|
|
116
|
+
} catch {
|
|
117
|
+
logger.error("Icon change failed: \(error.localizedDescription)")
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Before upload
|
|
123
|
+
|
|
124
|
+
Run the archive through `apple-archive-compliance` (the `ios_app_store_audit`
|
|
125
|
+
tool). Its `asset-validation` rule fails an archive with no icon configuration
|
|
126
|
+
or asset catalog. Upload validation (`ios_testflight_validate`) maps the icon
|
|
127
|
+
errors Apple returns:
|
|
128
|
+
|
|
129
|
+
| Code | Meaning | Usual fix |
|
|
130
|
+
|---|---|---|
|
|
131
|
+
| ITMS-90022 | A required iPhone icon size is missing | Use the Icon Composer file or a Single Size 1024 asset |
|
|
132
|
+
| ITMS-90023 | A required iPad icon size is missing | Add iPad to the Icon Composer file's platforms, or use a Single Size 1024 asset that covers iPad |
|
|
133
|
+
| ITMS-90717 | App Store icon has an alpha channel | Supply an opaque image where a flattened icon is used |
|
|
134
|
+
|
|
135
|
+
App Review issues that involve icons:
|
|
136
|
+
|
|
137
|
+
- **2.3.8**: icons, including alternates and in-app purchase icons, must suit
|
|
138
|
+
a 4+ audience even if the app is rated higher.
|
|
139
|
+
- **4.1**: an icon that copies or impersonates another app.
|
|
140
|
+
- **5.2.5**: an icon confusingly similar to an Apple product or app.
|
|
141
|
+
|
|
142
|
+
## Reviewing an icon
|
|
143
|
+
|
|
144
|
+
On a device or in Device Hub, set the Home Screen to dark, clear and tinted
|
|
145
|
+
and look at the icon among system apps and widgets. Ask: is it still
|
|
146
|
+
recognisable in every look, is anything important near the edges, does it
|
|
147
|
+
look crisp at the Settings and notification sizes, and does the dark variant
|
|
148
|
+
keep enough contrast? Coloured backgrounds usually give dark icons the most
|
|
149
|
+
contrast.
|
|
150
|
+
|
|
151
|
+
## References
|
|
152
|
+
|
|
153
|
+
- `references/icon-workflow.md`: Icon Composer steps, asset catalog route, alternate icon setup, review checklist.
|
|
154
|
+
- HIG app icons: https://developer.apple.com/design/human-interface-guidelines/app-icons
|
|
155
|
+
- Creating your app icon using Icon Composer: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
|
|
156
|
+
- Configuring your app icon using an asset catalog: https://developer.apple.com/documentation/xcode/configuring-your-app-icon
|
|
157
|
+
- Alternate app icons sample: https://developer.apple.com/documentation/xcode/configuring-your-app-to-use-alternate-app-icons
|
|
158
|
+
- setAlternateIconName: https://developer.apple.com/documentation/uikit/uiapplication/setalternateiconname(_:completionhandler:)
|
|
159
|
+
- Icon Composer: https://developer.apple.com/icon-composer/
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"skill_name": "hig-app-icons",
|
|
3
|
+
"evals": [
|
|
4
|
+
{
|
|
5
|
+
"id": 0,
|
|
6
|
+
"name": "migrate-legacy-icon-set",
|
|
7
|
+
"prompt": "Our app still ships an AppIcon asset catalog with 18 hand-exported PNG sizes and a separate dark PNG. Design wants the new Liquid Glass look. What exactly do we hand over from the design tool, what happens in Icon Composer, and how do we wire it into Xcode without breaking users on older iOS?",
|
|
8
|
+
"expected_output": "Explains that iOS now uses one layered 1024x1024 design that the system renders at every size and appearance. Design exports square, unmasked layers as SVG (PNG only where needed) with text outlined and no baked blurs, shadows, highlights, background fills or mask. Icon Composer: import, organise into at most four groups, set background, tune Liquid Glass, preview default, dark and mono (clear and tinted). Xcode: add the file and make the App Icon field match its name; it replaces the asset catalog, and Xcode generates flat images for older deployment targets, or keep the asset catalog if the old icon must stay unchanged on older releases.",
|
|
9
|
+
"files": [],
|
|
10
|
+
"expectations": [
|
|
11
|
+
"States sizes are generated from one 1024x1024 design rather than hand-exported",
|
|
12
|
+
"Asks for unmasked square layers exported as SVG without baked effects",
|
|
13
|
+
"Mentions grouping into at most four groups in Icon Composer",
|
|
14
|
+
"Covers default, dark, clear and tinted appearances",
|
|
15
|
+
"Says the App Icon name in the target must match the Icon Composer file",
|
|
16
|
+
"Explains older-release behaviour (generated images, or keeping the asset catalog)"
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": 1,
|
|
21
|
+
"name": "alternate-icons-setup",
|
|
22
|
+
"prompt": "Product wants users to pick between three team-colour icons from our settings screen. How do we set that up in Xcode and Swift, and will App Review care?",
|
|
23
|
+
"expected_output": "One Icon Composer file per alternate, each with its own dark, clear and tinted variants. Lists them in the Alternate App Icon Sets build setting (ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES) and leaves CFBundleIcons keys to Xcode. Calls setAlternateIconName from the person's choice after checking supportsAlternateIcons, passes nil for the primary, reads alternateIconName, handles the error, and notes the system alert. Notes each alternate goes through App Review, must suit 4+ (2.3.8) and must not resemble another app or Apple product.",
|
|
24
|
+
"files": [],
|
|
25
|
+
"expectations": [
|
|
26
|
+
"Uses one Icon Composer file per alternate with its own appearance variants",
|
|
27
|
+
"Names the Alternate App Icon Sets setting or ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES",
|
|
28
|
+
"Warns against editing CFBundleIcons by hand",
|
|
29
|
+
"Uses setAlternateIconName with supportsAlternateIcons and nil for the primary",
|
|
30
|
+
"Mentions that alternate icons are reviewed by App Review"
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"id": 2,
|
|
35
|
+
"name": "upload-error-and-design-critique",
|
|
36
|
+
"prompt": "Upload failed with ITMS-90717 on our App Store icon, and while we are at it, the designer put a gear SF Symbol and the word 'Pro' on the icon with a drop shadow. What is wrong?",
|
|
37
|
+
"expected_output": "Explains ITMS-90717 as an alpha channel in the App Store icon and that a flattened icon must be opaque, and suggests running the archive through apple-archive-compliance or ios_app_store_audit and validation. Critiques the design: SF Symbols terms prohibit symbols in app icons, text should be avoided unless essential, and baked shadows conflict with system effects.",
|
|
38
|
+
"files": [],
|
|
39
|
+
"expectations": [
|
|
40
|
+
"Identifies ITMS-90717 as an alpha channel problem",
|
|
41
|
+
"Points to apple-archive-compliance or ios_app_store_audit for archive checks",
|
|
42
|
+
"Says SF Symbols may not be used in app icons",
|
|
43
|
+
"Advises against nonessential text in the icon",
|
|
44
|
+
"Says to remove the baked drop shadow and let the system apply effects"
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
[
|
|
2
|
+
{ "query": "How do I make our app icon with Icon Composer for iOS 26?", "should_trigger": true },
|
|
3
|
+
{ "query": "Do I still need to export all the app icon sizes by hand?", "should_trigger": true },
|
|
4
|
+
{ "query": "Add dark and tinted variants to our app icon", "should_trigger": true },
|
|
5
|
+
{ "query": "Let users choose an alternate app icon from settings", "should_trigger": true },
|
|
6
|
+
{ "query": "setAlternateIconName returns an error, what's wrong with our setup?", "should_trigger": true },
|
|
7
|
+
{ "query": "App Store upload failed with ITMS-90022 missing icon size", "should_trigger": true },
|
|
8
|
+
{ "query": "Review our new app icon design against Apple guidelines", "should_trigger": true },
|
|
9
|
+
{ "query": "What does the clear app icon appearance look like and do we need to design it?", "should_trigger": true },
|
|
10
|
+
{ "query": "Our icon looks jagged at the corners after the Liquid Glass update", "should_trigger": true },
|
|
11
|
+
{ "query": "Where do I set the alternate app icon names in build settings?", "should_trigger": true },
|
|
12
|
+
{ "query": "Which SF Symbol should I use for the settings tab?", "should_trigger": false },
|
|
13
|
+
{ "query": "Make our toolbar buttons use Liquid Glass", "should_trigger": false },
|
|
14
|
+
{ "query": "Generate App Store screenshots in five languages", "should_trigger": false },
|
|
15
|
+
{ "query": "Our archive fails privacy manifest checks before submission", "should_trigger": false },
|
|
16
|
+
{ "query": "Create a custom SF Symbol and annotate its layers", "should_trigger": false },
|
|
17
|
+
{ "query": "Design a launch screen storyboard", "should_trigger": false },
|
|
18
|
+
{ "query": "Improve our App Store listing keywords and subtitle", "should_trigger": false },
|
|
19
|
+
{ "query": "Add images with dark mode variants to the asset catalog", "should_trigger": false },
|
|
20
|
+
{ "query": "Design review of the home screen layout in dark mode", "should_trigger": false },
|
|
21
|
+
{ "query": "Show a badge count on the app icon for unread messages", "should_trigger": false }
|
|
22
|
+
]
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# Icon workflow
|
|
2
|
+
|
|
3
|
+
Steps for building, wiring and checking an iOS app icon, with the asset
|
|
4
|
+
catalog route for projects that cannot move to Icon Composer yet.
|
|
5
|
+
|
|
6
|
+
## Contents
|
|
7
|
+
|
|
8
|
+
1. Preparing artwork
|
|
9
|
+
2. Building the icon in Icon Composer
|
|
10
|
+
3. Adding it to Xcode
|
|
11
|
+
4. The asset catalog route
|
|
12
|
+
5. Alternate icons end to end
|
|
13
|
+
6. Review checklist
|
|
14
|
+
|
|
15
|
+
## 1. Preparing artwork
|
|
16
|
+
|
|
17
|
+
- Start from the app icon template in Apple Design Resources, or set the
|
|
18
|
+
canvas to 1024x1024 px (1088x1088 px for Apple Watch).
|
|
19
|
+
- Draw layers back to front. Give them names with increasing numbers so they
|
|
20
|
+
import in order.
|
|
21
|
+
- Split colours, text and graphics you may want to adjust per appearance or
|
|
22
|
+
platform into their own layers.
|
|
23
|
+
- Convert text to outlines; SVG does not keep fonts.
|
|
24
|
+
- Remove blurs, shadows, specular and opacity effects, background colours and
|
|
25
|
+
gradients. These are set in Icon Composer, where their interaction with
|
|
26
|
+
Liquid Glass can be previewed.
|
|
27
|
+
- Export SVG. Use PNG for content SVG cannot represent. Do not export the
|
|
28
|
+
canvas mask.
|
|
29
|
+
|
|
30
|
+
Fully opaque layers with transparency adjusted later in Icon Composer give the
|
|
31
|
+
most control over how glass and transparency combine.
|
|
32
|
+
|
|
33
|
+
## 2. Building the icon in Icon Composer
|
|
34
|
+
|
|
35
|
+
1. Open Icon Composer (Xcode > Open Developer Tool > Icon Composer, or the
|
|
36
|
+
standalone download) and save the file with the name the project will use,
|
|
37
|
+
for example `AppIcon`.
|
|
38
|
+
2. In the Document inspector, limit platforms to the ones the app ships on;
|
|
39
|
+
unused platform controls disappear.
|
|
40
|
+
3. Drag the exported files into the sidebar. Folders become groups. Arrange
|
|
41
|
+
them into no more than four groups; the system renders groups as the depth
|
|
42
|
+
layers, bottom to top in sidebar order.
|
|
43
|
+
4. Background: under Color, choose Solid or Gradient for the icon itself.
|
|
44
|
+
Importing a background image is rarely needed; if used, it must be
|
|
45
|
+
full-bleed and opaque.
|
|
46
|
+
5. Liquid Glass per group: Mode (Individual or Combined), Specular
|
|
47
|
+
(Automatic, Inside, Outside, Off), then Blur, Refraction, Translucency and
|
|
48
|
+
Shadow. A layer can opt out with the Effects toggle.
|
|
49
|
+
6. Appearances: use the canvas controls to preview Default, Dark and Mono.
|
|
50
|
+
Mono's options preview clear and tinted, light and dark, with any tint
|
|
51
|
+
colour. Use Vary for appearance on a setting to give one look its own
|
|
52
|
+
value; everything else inherits.
|
|
53
|
+
7. Platforms: Composition settings (position, scale) can vary per platform
|
|
54
|
+
while colour and glass stay consistent.
|
|
55
|
+
8. Preview against your own backgrounds (Background Image in the toolbar) and
|
|
56
|
+
compare rendering across system generations with the Effects controls.
|
|
57
|
+
|
|
58
|
+
## 3. Adding it to Xcode
|
|
59
|
+
|
|
60
|
+
- Drag the Icon Composer file into the target's folder in the Project
|
|
61
|
+
navigator.
|
|
62
|
+
- In the target's General tab, under App Icons and Launch Screen, set App
|
|
63
|
+
Icon to the file name without its extension.
|
|
64
|
+
- Several Icon Composer files can live in a project (alternates); only the one
|
|
65
|
+
named in App Icon is the primary.
|
|
66
|
+
- When the deployment target includes releases without Liquid Glass icons,
|
|
67
|
+
Xcode generates look-alike flat images for them at build time. To keep the
|
|
68
|
+
previous icon on those releases, stay on the asset catalog.
|
|
69
|
+
|
|
70
|
+
## 4. The asset catalog route
|
|
71
|
+
|
|
72
|
+
Used for tvOS and visionOS image stacks, and for iOS projects that keep their
|
|
73
|
+
existing icon on older releases.
|
|
74
|
+
|
|
75
|
+
- Asset catalog, add OS variant > App Icon.
|
|
76
|
+
- In the Attributes inspector choose **Single Size** for iOS: one 1024x1024 px
|
|
77
|
+
image, and Xcode generates the rest. Choose All Sizes only when a size truly
|
|
78
|
+
needs hand-tuned detail.
|
|
79
|
+
- Appearance: Any, Dark, Tinted. Provide the dark icon with a transparent
|
|
80
|
+
background (the system draws the backdrop) and the tinted icon as a
|
|
81
|
+
grayscale image. Leaving them empty uses the system's automatic treatment.
|
|
82
|
+
|
|
83
|
+
## 5. Alternate icons end to end
|
|
84
|
+
|
|
85
|
+
1. Create one Icon Composer file per alternate, each with its own dark, clear
|
|
86
|
+
and tinted treatment, and add them to the target.
|
|
87
|
+
2. Build settings, Asset Catalog Compiler - Options: set **Alternate App Icon
|
|
88
|
+
Sets** to the alternates' names, or in an `.xcconfig`:
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES = AppIcon-Night AppIcon-Mono
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
3. Leave `CFBundleIcons`, `CFBundlePrimaryIcon` and `CFBundleAlternateIcons`
|
|
95
|
+
to Xcode; it generates them from those settings.
|
|
96
|
+
4. Offer the choice in the app's own settings UI with a preview of each icon,
|
|
97
|
+
and call `setAlternateIconName(_:)` from the person's selection. Handle the
|
|
98
|
+
error, and reflect `alternateIconName` as the current selection.
|
|
99
|
+
5. Each alternate is reviewed by App Review like the primary icon.
|
|
100
|
+
|
|
101
|
+
In visionOS, compatible iPhone and iPad apps can still switch icons; apps
|
|
102
|
+
built with the visionOS SDK cannot, and the call has no effect there.
|
|
103
|
+
|
|
104
|
+
## 6. Review checklist
|
|
105
|
+
|
|
106
|
+
- [ ] Layers are square and unmasked; nothing important near the edges.
|
|
107
|
+
- [ ] No baked shadows, glows, bevels or highlights.
|
|
108
|
+
- [ ] Recognisable in default, dark, clear and tinted looks, light and dark.
|
|
109
|
+
- [ ] Same core features in every appearance.
|
|
110
|
+
- [ ] No text unless essential; no Apple hardware; no SF Symbols.
|
|
111
|
+
- [ ] Crisp at small sizes (Settings, notifications, Spotlight).
|
|
112
|
+
- [ ] App Icon name in General matches the Icon Composer file.
|
|
113
|
+
- [ ] Alternates listed in Alternate App Icon Sets, each with its variants.
|
|
114
|
+
- [ ] Archive passes `ios_app_store_audit` asset-validation.
|
|
115
|
+
- [ ] Icons, alternates and in-app purchase icons suit a 4+ audience.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: hig-components-layout
|
|
3
|
-
description: "Apple HIG
|
|
3
|
+
description: "Apple HIG app structure mapped to SwiftUI: tab bars, sidebars, split views, toolbars, sheets and popovers, including the iOS 26 and 27 tab and toolbar APIs. Use when choosing navigation structure or laying out tab bars and toolbars."
|
|
4
4
|
metadata:
|
|
5
5
|
risk: safe
|
|
6
6
|
source: multi-agent-pipeline
|
|
@@ -30,9 +30,32 @@ A tab bar switches context and never navigates within one; do not use a tab
|
|
|
30
30
|
to trigger an action like "new note". A sidebar-adaptable `TabView` gives a
|
|
31
31
|
tab bar on iPhone and a sidebar on iPad and Mac from one declaration.
|
|
32
32
|
|
|
33
|
+
## Bars on iOS 26 and 27
|
|
34
|
+
|
|
35
|
+
Tab bars, toolbars, navigation bars and sidebars float in a Liquid Glass layer
|
|
36
|
+
over the content. Keep destinations and actions in that layer and content
|
|
37
|
+
underneath, and remove custom bar backgrounds: they cover the glass and the
|
|
38
|
+
scroll edge effect.
|
|
39
|
+
|
|
40
|
+
| Need | API (since) |
|
|
41
|
+
|---|---|
|
|
42
|
+
| Tab bar recedes while reading | `.tabBarMinimizeBehavior(.onScrollDown)` (iOS 26) |
|
|
43
|
+
| Persistent mini player or status above the tab bar | `.tabViewBottomAccessory { }` (iOS 26), `isEnabled:` form (iOS 26.1) |
|
|
44
|
+
| Search as its own tab, set apart at the trailing end | `Tab(role: .search)` (iOS 18; placement iOS 26) |
|
|
45
|
+
| One emphasized tab | `role: .prominent` (iOS 27) |
|
|
46
|
+
| Separate toolbar groups | `ToolbarSpacer(.fixed)` (iOS 26) |
|
|
47
|
+
| Actions that always sit in overflow | `ToolbarOverflowMenu { }` (iOS 27) |
|
|
48
|
+
| Which items survive a narrow bar | `.visibilityPriority(.high)` (iOS 27) |
|
|
49
|
+
| An item that never leaves the trailing edge | `.topBarPinnedTrailing` (iOS 27) |
|
|
50
|
+
| Navigation bar recedes on scroll | `.toolbarMinimizationBehavior(.onScrollDown, for: .navigationBar)` (iOS 27) |
|
|
51
|
+
|
|
33
52
|
## Details on demand
|
|
34
53
|
|
|
35
|
-
|
|
54
|
+
- `references/bars-and-tabs.md`: the APIs above with code, search
|
|
55
|
+
placement, toolbar grouping rules, overflow and minimization, and a
|
|
56
|
+
checklist.
|
|
57
|
+
- `references/containers.md`: sidebars, navigation stacks, scroll views,
|
|
58
|
+
windows and size adaptation, with SwiftUI examples.
|
|
36
59
|
|
|
37
60
|
## Modality: sheets, popovers, alerts
|
|
38
61
|
|
|
@@ -60,7 +83,9 @@ happen now, and always give an obvious way out.
|
|
|
60
83
|
- Is the top-level structure chosen from the number and use of peer areas?
|
|
61
84
|
- Does every tab keep its own state, and is no tab used as an action?
|
|
62
85
|
- Do modals have a clear cancel, and is unsaved work protected?
|
|
63
|
-
- Does content run under glass bars
|
|
86
|
+
- Does content run under glass bars, with no custom bar backgrounds (iOS 26)?
|
|
87
|
+
- Are iOS 27 bar APIs gated with `#available`, and is at most one tab
|
|
88
|
+
prominent?
|
|
64
89
|
- Are toolbar items declared with semantic placements?
|
|
65
90
|
- Does the layout adapt across size classes, windows and orientations?
|
|
66
91
|
|
|
@@ -69,7 +94,10 @@ happen now, and always give an obvious way out.
|
|
|
69
94
|
- `hig-components-content` for lists, grids, charts inside these containers.
|
|
70
95
|
- `hig-patterns` for flows such as first launch, search and settings.
|
|
71
96
|
- `hig-platforms` for per-platform differences.
|
|
72
|
-
- `swiftui-navigation`
|
|
97
|
+
- `swiftui-navigation` for navigation implementation.
|
|
98
|
+
- `swiftui-liquid-glass` for the glass material itself.
|
|
99
|
+
- `hig-platforms` (`references/ipad-layout.md`) for iPad windowing and size
|
|
100
|
+
classes.
|
|
73
101
|
|
|
74
102
|
## References
|
|
75
103
|
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"skill_name": "hig-components-layout",
|
|
3
|
+
"evals": [
|
|
4
|
+
{
|
|
5
|
+
"id": 0,
|
|
6
|
+
"name": "music-style-tab-bar",
|
|
7
|
+
"prompt": "Podcast app, SwiftUI, deployment target iOS 26. Tabs: Home, Library, Downloads, Search, plus a 'Record' tab that opens the recorder sheet. We paint the tab bar with a purple UITabBarAppearance background and want a mini player like Apple Music that stays above the tab bar and shrinks when you scroll. How should we set this up?",
|
|
8
|
+
"expected_output": "Removes the custom tab bar background so the floating Liquid Glass tab bar and scroll edge effect work. Uses Tab with Tab(role: .search) for search, set apart at the trailing end. Moves 'Record' out of the tab bar because a tab is not an action (toolbar button or other entry point). Uses .tabViewBottomAccessory for the mini player and .tabBarMinimizeBehavior(.onScrollDown), and adapts the accessory with the tabViewBottomAccessoryPlacement environment value (.inline vs .expanded).",
|
|
9
|
+
"files": [],
|
|
10
|
+
"expectations": [
|
|
11
|
+
"Removes the custom purple tab bar background",
|
|
12
|
+
"Uses Tab(role: .search) for the search tab",
|
|
13
|
+
"Says the Record tab should not be a tab because tabs are not actions",
|
|
14
|
+
"Uses .tabViewBottomAccessory for the mini player",
|
|
15
|
+
"Uses .tabBarMinimizeBehavior(.onScrollDown) and adapts the accessory via tabViewBottomAccessoryPlacement"
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"id": 1,
|
|
20
|
+
"name": "crowded-toolbar-ios27",
|
|
21
|
+
"prompt": "Our document editor's navigation bar on iPhone has Undo, Redo, Share, Comment, Format, Export, Print and Done buttons and half of them get clipped. We can require iOS 27 for this redesign. What should the toolbar look like in SwiftUI?",
|
|
22
|
+
"expected_output": "Reduces and groups items (aim for at most three groups) with ToolbarSpacer, keeps one primary Done action on the trailing side using Button(role: .confirm) or confirmationAction placement, moves rarely used actions such as Export and Print into ToolbarOverflowMenu, ranks the rest with .visibilityPriority so important items stay, and may pin a key item with .topBarPinnedTrailing. Uses symbols with accessibility labels and avoids a hand-made overflow Menu and custom bar backgrounds.",
|
|
23
|
+
"files": [],
|
|
24
|
+
"expectations": [
|
|
25
|
+
"Uses ToolbarOverflowMenu for rarely used actions such as Export and Print",
|
|
26
|
+
"Uses .visibilityPriority to control which items move to overflow first",
|
|
27
|
+
"Keeps a single primary Done/confirm action on the trailing side",
|
|
28
|
+
"Groups related items with ToolbarSpacer and keeps the number of groups small",
|
|
29
|
+
"Mentions .topBarPinnedTrailing or explains that iOS 27 APIs need iOS 27 availability"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"id": 2,
|
|
34
|
+
"name": "structure-choice-ipad",
|
|
35
|
+
"prompt": "Field-service app: Jobs, Map, Inventory, Messages, Reports, Settings, Team, Timesheets and Documents. iPhone and iPad. Each job has a detail with parts and photos. Should this be tabs, a sidebar or something else, and how do we present 'Log time' and the job detail?",
|
|
36
|
+
"expected_output": "With nine peer areas recommends a sidebar-adaptable TabView (tab bar on iPhone with five or fewer primary tabs, sidebar on iPad) or NavigationSplitView, keeps Settings out of the main tabs or in a sidebar section, uses NavigationSplitView or NavigationStack for job list to detail, presents 'Log time' as a sheet with Cancel and Save and protects unsaved input with interactiveDismissDisabled, and avoids stacking modals.",
|
|
37
|
+
"files": [],
|
|
38
|
+
"expectations": [
|
|
39
|
+
"Recommends .tabViewStyle(.sidebarAdaptable) or a NavigationSplitView sidebar for the many areas on iPad",
|
|
40
|
+
"Keeps the iPhone tab bar to about five tabs and moves the rest",
|
|
41
|
+
"Uses a list-detail structure (NavigationSplitView or NavigationStack) for jobs",
|
|
42
|
+
"Presents Log time as a sheet with Cancel and a confirming action",
|
|
43
|
+
"Protects unsaved input or warns against stacking modals"
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
[
|
|
2
|
+
{"query": "how do I get a mini player above the tab bar like Apple Music in SwiftUI on iOS 26", "should_trigger": true},
|
|
3
|
+
{"query": "tab bar should shrink when the user scrolls down a feed, ios 26", "should_trigger": true},
|
|
4
|
+
{"query": "iOS 27: can I make the middle 'Create' tab look prominent like the new Photos app?", "should_trigger": true},
|
|
5
|
+
{"query": "navigation bar has 8 buttons and they get cut off on iphone, how do I decide what goes into the overflow menu", "should_trigger": true},
|
|
6
|
+
{"query": "our designer wants a solid brand-colored tab bar background on iOS 26, is that still ok?", "should_trigger": true},
|
|
7
|
+
{"query": "tabs or sidebar for an app with 9 sections on iPad and iPhone?", "should_trigger": true},
|
|
8
|
+
{"query": "ToolbarSpacer vs Spacer in toolbar - how do i split the buttons into separate glass groups", "should_trigger": true},
|
|
9
|
+
{"query": "should 'edit profile' be a sheet, a push or a full screen cover? and where do cancel and save go", "should_trigger": true},
|
|
10
|
+
{"query": "keep the Add button always visible on the trailing side of the nav bar even when search is open, iOS 27", "should_trigger": true},
|
|
11
|
+
{"query": "nav bar should collapse when scrolling an article on iOS 27", "should_trigger": true},
|
|
12
|
+
{"query": "make my custom floating button use liquid glass with a tint", "should_trigger": false},
|
|
13
|
+
{"query": "deep link into the third tab and push a detail screen with NavigationPath", "should_trigger": false},
|
|
14
|
+
{"query": "what font sizes and contrast ratios should my list rows use", "should_trigger": false},
|
|
15
|
+
{"query": "empty state for the downloads tab when nothing is saved yet", "should_trigger": false},
|
|
16
|
+
{"query": "support iPadOS 26 free-form window resizing and Stage Manager in my layout", "should_trigger": false},
|
|
17
|
+
{"query": "bottom sheet with medium and large detents and a grabber - how to implement the drag", "should_trigger": false},
|
|
18
|
+
{"query": "Compose Material 3 NavigationBar with badges", "should_trigger": false},
|
|
19
|
+
{"query": "tab bar icon: which SF Symbol variant should be used for the selected state", "should_trigger": false},
|
|
20
|
+
{"query": "React Native bottom tabs library recommendation", "should_trigger": false},
|
|
21
|
+
{"query": "animate the transition when switching tabs with a matched geometry effect", "should_trigger": false}
|
|
22
|
+
]
|