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.

16 stars

Best use case

hig-components-system is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using hig-components-system should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/hig-components-system/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/hig-components-system/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/hig-components-system/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How hig-components-system Compares

Feature / Agenthig-components-systemStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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.

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.

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

test-cotton-components

16
from diegosouzapw/awesome-omni-skill

Guide AI agents on testing Django Cotton components using django-cotton-bs5 pytest fixtures. Covers when to use cotton_render vs cotton_render_soup vs cotton_render_string vs cotton_render_string_soup, best practices for component testing, DOM assertions, context handling, and multi-component testing patterns. Use when writing or reviewing Cotton component tests.

pcf-code-components

16
from diegosouzapw/awesome-omni-skill

Understanding code components structure and implementation Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Next.js App Router & Server Components

16
from diegosouzapw/awesome-omni-skill

Build Next.js 15 applications using App Router, Server Components, Client Components, Server Actions, and streaming. Apply when creating pages, handling data fetching, implementing routes, or optimizing performance.

hig-components-status

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.

hig-components-search

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

hig-components-menus

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure...

hig-components-layout

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for layout and navigation components.

hig-components-dialogs

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.

hig-components-content

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for content display components.

assembling-components

16
from diegosouzapw/awesome-omni-skill

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

architecting-components

16
from diegosouzapw/awesome-omni-skill

Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.

App Components

16
from diegosouzapw/awesome-omni-skill

Your approach to handling app components. Use this skill when working on files where app components comes into play.