Apple HIG: Platform Design
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Key Principles
Each platform has a distinct identity. Do not port designs between platforms. Respect each platform's conventions, interaction models, and user expectations.
iOS: touch-first. Direct manipulation on a handheld screen. Optimize for one-handed use. Navigation uses tab bars and push/pop stacks.
iPadOS: expanded canvas. Support Split View, Slide Over, and Stage Manager. Use sidebars and multi-column layouts. Support pointer and keyboard alongside touch.
macOS: pointer and keyboard. Dense information display is acceptable. Use menu bars, toolbars, and keyboard shortcuts extensively. Windows are resizable with precise control.
tvOS: remote and focus. Viewed from a distance. Design for the Siri Remote with focus-based navigation. Large text, simple layouts, linear navigation.
visionOS: spatial interaction. 3D environment using windows, volumes, and spaces. Eye tracking for targeting, indirect gestures for interaction. Respect ergonomic comfort zones.
watchOS: glanceable and brief. Information consumable at a glance. Brief interactions. Digital Crown, haptics, and complications for timely content.
Games: own paradigm. Free to define in-game interaction models, but still respect platform conventions for system interactions (notifications, accessibility, controllers).
Reference Index
| Reference |
Topic |
Key content |
| designing-for-ios.md |
iOS |
Touch, tab bars, navigation stacks, gestures, screen sizes, safe areas |
| designing-for-ipados.md |
iPadOS |
Multitasking, sidebars, pointer, keyboard, Apple Pencil, Stage Manager |
| designing-for-macos.md |
macOS |
Menu bars, toolbars, window management, keyboard shortcuts, dense layouts, Dock |
| designing-for-tvos.md |
tvOS |
Focus engine, Siri Remote, lean-back experience, content-forward, parallax |
| designing-for-visionos.md |
visionOS |
Spatial computing, windows/volumes/spaces, eye tracking, hand gestures, depth |
| designing-for-watchos.md |
watchOS |
Glanceable UI, Digital Crown, complications, notifications, haptics |
| designing-for-games.md |
Games |
Controllers, immersive experiences, platform-specific conventions, accessibility |
Decision Framework
Identify the primary use context. On the go (iOS/watchOS), at a desk (macOS), on the couch (tvOS), spatial environment (visionOS)?
Match input to interaction. Touch for direct manipulation, pointer for precision, gaze+gesture for spatial, Digital Crown for quick scrolling, remote for focus navigation.
Adapt, don't replicate. A macOS sidebar becomes a tab bar on iPhone. A visionOS volume has no equivalent on watchOS. Translate intent, not implementation.
Leverage platform strengths. Live Activities on iOS, Desktop Widgets on macOS, complications on watchOS, immersive spaces on visionOS.
Maintain brand consistency while respecting each platform's visual language and interaction patterns.
Output Format
- Platform-specific recommendations citing relevant HIG sections.
- Platform differences table comparing navigation, input, layout, and conventions.
- Implementation notes per platform including recommended APIs and adaptation strategies.
Questions to Ask
- Which platforms are you targeting?
- New app or adapting an existing one? If existing, which platform is the base?
- SwiftUI or UIKit/AppKit?
- Need to support older OS versions?
- Primary use context? (On the go, desk, couch, spatial, glanceable?)
Related Skills
- hig-foundations -- Shared principles (color, typography, accessibility, layout) across platforms
- hig-patterns -- Interaction patterns that manifest differently per platform
- hig-components-layout -- Navigation structures (tab bars, sidebars, split views) that vary by platform
- hig-components-content -- Content display that adapts across platforms
Built by Raintree Technology · More developer tools
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
AGI Framework Integration
Adapted for @techwavedev/agi-agent-kit
Original source: antigravity-awesome-skills
Memory-First Protocol
Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.
# Check for prior frontend/design context before starting
python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Hig Platforms"
Storing Results
After completing work, store frontend/design decisions for future sessions:
python3 execution/memory_manager.py store \
--content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
--type decision --project <project> \
--tags hig-platforms frontend
Multi-Agent Collaboration
Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).
python3 execution/cross_agent_context.py store \
--agent "<your-agent>" \
--action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
--project <project>
Design Memory Persistence
Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.
1---2name: hig-platforms3description: Apple Human Interface Guidelines for platform-specific design.4---56# Apple HIG: Platform Design78Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.910## Key Principles11121. **Each platform has a distinct identity.** Do not port designs between platforms. Respect each platform's conventions, interaction models, and user expectations.13142. **iOS: touch-first.** Direct manipulation on a handheld screen. Optimize for one-handed use. Navigation uses tab bars and push/pop stacks.15163. **iPadOS: expanded canvas.** Support Split View, Slide Over, and Stage Manager. Use sidebars and multi-column layouts. Support pointer and keyboard alongside touch.17184. **macOS: pointer and keyboard.** Dense information display is acceptable. Use menu bars, toolbars, and keyboard shortcuts extensively. Windows are resizable with precise control.19205. **tvOS: remote and focus.** Viewed from a distance. Design for the Siri Remote with focus-based navigation. Large text, simple layouts, linear navigation.21226. **visionOS: spatial interaction.** 3D environment using windows, volumes, and spaces. Eye tracking for targeting, indirect gestures for interaction. Respect ergonomic comfort zones.23247. **watchOS: glanceable and brief.** Information consumable at a glance. Brief interactions. Digital Crown, haptics, and complications for timely content.25268. **Games: own paradigm.** Free to define in-game interaction models, but still respect platform conventions for system interactions (notifications, accessibility, controllers).2728## Reference Index2930| Reference | Topic | Key content |31|---|---|---|32| [designing-for-ios.md](references/designing-for-ios.md) | iOS | Touch, tab bars, navigation stacks, gestures, screen sizes, safe areas |33| [designing-for-ipados.md](references/designing-for-ipados.md) | iPadOS | Multitasking, sidebars, pointer, keyboard, Apple Pencil, Stage Manager |34| [designing-for-macos.md](references/designing-for-macos.md) | macOS | Menu bars, toolbars, window management, keyboard shortcuts, dense layouts, Dock |35| [designing-for-tvos.md](references/designing-for-tvos.md) | tvOS | Focus engine, Siri Remote, lean-back experience, content-forward, parallax |36| [designing-for-visionos.md](references/designing-for-visionos.md) | visionOS | Spatial computing, windows/volumes/spaces, eye tracking, hand gestures, depth |37| [designing-for-watchos.md](references/designing-for-watchos.md) | watchOS | Glanceable UI, Digital Crown, complications, notifications, haptics |38| [designing-for-games.md](references/designing-for-games.md) | Games | Controllers, immersive experiences, platform-specific conventions, accessibility |3940## Decision Framework41421. **Identify the primary use context.** On the go (iOS/watchOS), at a desk (macOS), on the couch (tvOS), spatial environment (visionOS)?43442. **Match input to interaction.** Touch for direct manipulation, pointer for precision, gaze+gesture for spatial, Digital Crown for quick scrolling, remote for focus navigation.45463. **Adapt, don't replicate.** A macOS sidebar becomes a tab bar on iPhone. A visionOS volume has no equivalent on watchOS. Translate intent, not implementation.47484. **Leverage platform strengths.** Live Activities on iOS, Desktop Widgets on macOS, complications on watchOS, immersive spaces on visionOS.49505. **Maintain brand consistency** while respecting each platform's visual language and interaction patterns.5152## Output Format53541. **Platform-specific recommendations** citing relevant HIG sections.552. **Platform differences table** comparing navigation, input, layout, and conventions.563. **Implementation notes** per platform including recommended APIs and adaptation strategies.5758## Questions to Ask59601. Which platforms are you targeting?612. New app or adapting an existing one? If existing, which platform is the base?623. SwiftUI or UIKit/AppKit?634. Need to support older OS versions?645. Primary use context? (On the go, desk, couch, spatial, glanceable?)6566## Related Skills6768- **hig-foundations** -- Shared principles (color, typography, accessibility, layout) across platforms69- **hig-patterns** -- Interaction patterns that manifest differently per platform70- **hig-components-layout** -- Navigation structures (tab bars, sidebars, split views) that vary by platform71- **hig-components-content** -- Content display that adapts across platforms7273---7475*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)*7677## When to Use78This skill is applicable to execute the workflow or actions described in the overview.7980---8182<!-- AGI-INTEGRATION-START -->8384## AGI Framework Integration8586> **Adapted for [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**87> Original source: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)8889### Memory-First Protocol9091Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.9293```bash94# Check for prior frontend/design context before starting95python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Hig Platforms"96```9798### Storing Results99100After completing work, store frontend/design decisions for future sessions:101102```bash103python3 execution/memory_manager.py store \104 --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \105 --type decision --project <project> \106 --tags hig-platforms frontend107```108109### Multi-Agent Collaboration110111Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).112113```bash114python3 execution/cross_agent_context.py store \115 --agent "<your-agent>" \116 --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \117 --project <project>118```119120### Design Memory Persistence121122Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.123124<!-- AGI-INTEGRATION-END -->
techwavedev