hig-components-system
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
About this skill
This skill equips an AI agent with a rich knowledge base of Apple's Human Interface Guidelines specifically focused on system experience components. It enables the AI to provide expert design guidance for elements such as Home Screen widgets, Lock Screen Live Activities, notifications, watchOS complications, Home Screen Quick Actions, tvOS Top Shelf content, custom watch faces, App Clips, and App Shortcuts. The guidelines emphasize core principles like providing immediate value, designing for brief user attention, and respecting platform-specific constraints, allowing the AI to offer contextually aware and compliant design advice. The skill is designed to ensure the AI leverages existing internal context (`.claude/apple-design-context.md`) before seeking new information.
Best use case
An AI agent can leverage this skill to answer specific questions about Apple HIG for system components, critique design proposals against Apple's best practices, generate design recommendations for new app features involving widgets or notifications, or educate users/developers on Apple's design philosophy for system integrations.
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
The AI agent will provide accurate, relevant, and detailed advice or information based on Apple's Human Interface Guidelines for system experiences. Responses will be tailored to the specific component or design principle requested, reflecting an understanding of key HIG tenets such as glanceability, immediate value, and platform context.
Practical example
Example input
I'm designing a new Home Screen widget for my productivity app. What are the key Apple HIG principles I should focus on to make it effective and user-friendly?
Example output
To design an effective and user-friendly Home Screen widget for your productivity app, Apple's Human Interface Guidelines (HIG) emphasize several key principles: 1. **Glanceable, Immediate Value:** Widgets should deliver timely, relevant, and easily digestible information. Users should be able to get key updates or insights at a glance, without needing to open your app. For a productivity app, this might mean showing upcoming tasks, a quick progress overview, or a shortcut to frequently used actions. 2. **Respect Platform Context:** While Home Screen widgets offer more space than, say, a Lock Screen widget, they still operate in a constrained environment. Design for quick interactions, not complex tasks. Avoid interactive elements like scrolling lists unless absolutely necessary; focus on displaying essential information clearly. 3. **Personalization:** Widgets are most useful when they can be personalized. Allow users to configure what content appears in your widget to make it most relevant to their workflow. 4. **No Scrolling Content:** For Home Screen widgets, avoid scrollable areas. The content should be fully visible within the widget's bounds. 5. **Focus on Current Information:** Widgets are excellent for showing dynamic, up-to-date information. For a productivity app, this could be the next item on a to-do list, a countdown to a deadline, or a summary of daily achievements. 6. **Avoid App Launch Redundancy:** Tapping a widget typically launches the app to a specific context related to the widget's content. Ensure the widget itself provides value *before* the app launch and that the app launch provides a logical continuation. Remember, the primary goal is to bring your app's most important content to the surface, allowing users to quickly gain value without fully engaging with your application.
When to use this skill
- Use this skill when designing new features for iOS, watchOS, or tvOS that integrate with system-level experiences (e.g., creating a new widget, planning Live Activities, implementing push notifications). It's also ideal when seeking to understand the core principles behind Apple's system experience design, evaluating existing app designs for HIG compliance, or needing quick, authoritative answers on Apple's recommendations for specific system components.
When not to use this skill
- Avoid using this skill when the query is unrelated to Apple's design guidelines or system components. It is not suitable for tasks involving code generation or debugging without a specific design context, or for seeking information about Android, web, or other non-Apple platform design guidelines. It's also not for general UI/UX principles not specifically tied to Apple's ecosystem.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/hig-components-system/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How hig-components-system Compares
| Feature / Agent | hig-components-system | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
SKILL.md Source
# Apple HIG: System Experiences Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. ## Key Principles ### General 1. **Glanceable, immediate value.** System experiences bring your app's most important content to surfaces the user sees without launching your app. Design for seconds of attention. 2. **Respect platform context.** A Lock Screen widget has different constraints than a Home Screen widget. A complication is far smaller than a top shelf item. ### Widgets 3. **Show relevant information, not everything.** Display the most useful subset, updated appropriately. 4. **Support multiple sizes with distinct layouts.** Each size should be a thoughtful design, not a scaled version of another. 5. **Deep-link on tap.** Take users to the relevant content, not the app's root screen. ### Live Activities 6. **Track events with a clear start and end.** Deliveries, scores, timers, rides. Design for both Dynamic Island and Lock Screen. 7. **Stay updated and timely.** Stale data undermines trust. End promptly when the event concludes. ### Notifications 8. **Respect user attention.** Only send notifications for information users genuinely care about. No promotional or low-value notifications. 9. **Actionable and self-contained.** Include enough context to understand and act without opening the app. Support notification actions. Use threading and grouping. ### Complications 10. **Focused data on the watch face.** Design for the smallest useful representation. Support multiple families. Budget updates wisely. ### Home Screen Quick Actions 11. **3-4 most common tasks.** Short titles, optional subtitles, relevant SF Symbol icons. ### Top Shelf 12. **tvOS showcase.** Feature content that entices: new episodes, featured items, recent content. ### App Clips 13. **Instant, focused functionality within a strict size budget.** Load quickly without App Store download. Only what's needed for the immediate task, then offer full app install. ### App Shortcuts 14. **Surface key actions to Siri and Spotlight.** Define shortcuts for frequent tasks. Use natural, conversational trigger phrases. ## Reference Index | Reference | Topic | Key content | |---|---|---| | [widgets.md](references/widgets.md) | Widgets | Glanceable info, sizes, deep linking, timeline | | [live-activities.md](references/live-activities.md) | Live Activities | Real-time tracking, Dynamic Island, Lock Screen | | [notifications.md](references/notifications.md) | Notifications | Attention, actions, grouping, content | | [complications.md](references/complications.md) | Complications | Watch face data, families, budgeted updates | | [home-screen-quick-actions.md](references/home-screen-quick-actions.md) | Quick actions | Haptic Touch, common tasks, SF Symbols | | [top-shelf.md](references/top-shelf.md) | Top shelf | Featured content, showcase | | [app-clips.md](references/app-clips.md) | App Clips | Instant use, lightweight, focused task, NFC/QR | | [watch-faces.md](references/watch-faces.md) | Watch faces | Custom complications, face sharing | | [app-shortcuts.md](references/app-shortcuts.md) | App Shortcuts | Siri, Spotlight, voice triggers | ## Output Format 1. **System experience recommendation** -- which surface best fits the use case. 2. **Content strategy** -- what to display, priority, what to omit. 3. **Update frequency** -- refresh rate including system budget constraints. 4. **Size/family variants** -- which to support and how layout adapts. 5. **Deep link behavior** -- where tapping takes the user. ## Questions to Ask 1. What information needs to surface outside the app? 2. Which platform? 3. How frequently does the data update? 4. What is the primary glanceable need? ## Related Skills - **hig-components-status** -- Progress indicators in widgets or Live Activities - **hig-inputs** -- Interaction patterns for system experiences (Digital Crown for complications) - **hig-technologies** -- Siri for App Shortcuts, HealthKit for complications, NFC for App Clips --- *Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* ## When to Use This skill is applicable to execute the workflow or actions described in the overview.
Related Skills
memory-systems
Design short-term, long-term, and graph-based memory architectures. Use when building agents that must persist across sessions, needing to maintain entity consistency across conversations, or implementing reasoning over accumulated knowledge.
hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
hig-components-menus
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
hig-components-layout
Apple Human Interface Guidelines for layout and navigation components.
hig-components-dialogs
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
hig-components-controls
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
hig-components-content
Apple Human Interface Guidelines for content display components.
filesystem-context
Use for file-based context management, dynamic context discovery, and reducing context window bloat. Offload context to files for just-in-time loading.
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
nft-standards
Master ERC-721 and ERC-1155 NFT standards, metadata best practices, and advanced NFT features.
nextjs-app-router-patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
new-rails-project
Create a new Rails project