hig-components-status

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

16 stars

Best use case

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

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

Teams using hig-components-status 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-status/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/hig-components-status/SKILL.md"

Manual Installation

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

How hig-components-status Compares

Feature / Agenthig-components-statusStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

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: Status Components

Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.

## Key Principles

### Progress Indicators

1. **Show progress for operations longer than a second or two.**

2. **Determinate when duration/percentage is known.** A filling progress bar gives users a clear sense of remaining work. Use for downloads, uploads, or any measurable process.

3. **Indeterminate when duration is unknown.** A spinner communicates work is happening without promising a timeframe. Use for unpredictable network requests.

4. **Prefer progress bars over spinners.** Determinate progress feels faster and more trustworthy.

5. **Place indicators where content will appear.** Inline progress near the content area, not modal or distant.

6. **Don't stack multiple indicators.** Aggregate simultaneous operations into one representation or show the most relevant.

### Status Bars

7. **Don't hide the status bar without good reason.** Reserve hiding for immersive experiences (full-screen media, games, AR).

8. **Match status bar style to your content.** Light or dark for adequate contrast.

9. **Respect safe areas.** No interactive content behind the status bar.

10. **Restore promptly** when exiting immersive contexts.

### Activity Rings

11. **Activity rings are for Move, Exercise, and Stand goals.** Don't repurpose the ring metaphor for unrelated data.

12. **Respect ring color conventions.** Red (Move), green (Exercise), blue (Stand) are strongly associated with Apple Fitness.

13. **Use HealthKit APIs** for activity data rather than manual tracking.

14. **Celebrate completions** with animation and haptics when rings close.

## Reference Index

| Reference | Topic | Key content |
|---|---|---|
| [progress-indicators.md](references/progress-indicators.md) | Progress bars and spinners | Determinate, indeterminate, inline placement, duration |
| [status-bars.md](references/status-bars.md) | iOS/iPadOS status bar | System info, visibility, style, safe areas |
| [activity-rings.md](references/activity-rings.md) | watchOS activity rings | Move/Exercise/Stand, HealthKit, fitness tracking, color |

## Output Format

1. **Indicator type recommendation** with rationale (determinate vs indeterminate).
2. **Timing and animation guidance** -- duration thresholds, animation style, transitions.
3. **Accessibility** -- VoiceOver progress announcements, live region updates.
4. **Platform-specific behavior** across targeted platforms.

## Questions to Ask

1. Is the duration known or unknown?
2. Which platforms?
3. How long does the operation typically take?
4. System-level or in-app indicator?

## Related Skills

- **hig-components-system** -- Widgets and complications displaying progress or status
- **hig-inputs** -- Gestures triggering progress states (pull-to-refresh)
- **hig-technologies** -- HealthKit for activity ring data; VoiceOver for progress announcements

---

*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-system

16
from diegosouzapw/awesome-omni-skill

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.

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.