hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
About this skill
The "hig-components-status" skill equips an AI agent with comprehensive knowledge of Apple's Human Interface Guidelines specifically concerning how to design and implement status and progress user interface components. This includes detailed principles for: - **Progress Indicators:** Guidance on when to use determinate (e.g., progress bars for known durations like downloads) versus indeterminate (e.g., spinners for unknown durations) indicators. - **Status Bars:** Best practices for communicating system status effectively. - **Activity Rings:** Principles for their effective use in providing feedback, particularly in contexts like watchOS. By leveraging this skill, an AI agent can provide accurate, context-aware design advice, ensuring that UI elements for communicating status and progress align with Apple's recommended best practices for iOS, macOS, watchOS, and tvOS applications. It functions as a specialized knowledge base, allowing the agent to answer design-related queries and offer critiques based on established HIG principles.
Best use case
A UI/UX designer or developer is creating an application for Apple platforms and needs immediate, reliable guidance on how to properly implement status and progress feedback mechanisms that adhere to Apple's Human Interface Guidelines.
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
The user receives clear, actionable, and HIG-compliant recommendations and principles for designing status and progress UI components specific to Apple platforms, enhancing the usability and aesthetic consistency of their application.
Practical example
Example input
What are the Apple HIG recommendations for using progress indicators? Should I use a determinate or indeterminate one for a file upload?
Example output
According to Apple's Human Interface Guidelines: 1. **Show progress for operations longer than a second or two.** If an operation takes less time, consider other feedback methods or complete it instantly. 2. **Determinate progress indicators** should be used when the duration or percentage of an operation is known. For a file upload where you can track progress (e.g., 25% complete), a determinate indicator like a filling progress bar is ideal. It gives users a clear sense of how much work remains. 3. **Indeterminate progress indicators** (like a spinner) are appropriate when the duration of an operation is unknown. These communicate that work is happening without promising a specific timeline. For a file upload where you typically know the progress, a **determinate progress indicator** would be the recommended choice.
When to use this skill
- When a designer is prototyping or iterating on UI designs that include progress feedback (e.g., loading screens, download indicators).
- During a design review, to verify that existing status components comply with Apple HIG.
- To educate oneself or a team on Apple's specific recommendations for progress indicators, status bars, and activity rings.
- When generating design specifications or documentation where HIG compliance is critical.
When not to use this skill
- When seeking general design principles that are not specific to Apple's ecosystem.
- When attempting to generate actual UI code or assets; this skill provides guidance, not implementation.
- For querying real-time application status or operational data (this skill is about design standards, not live metrics).
- If the design task is for platforms other than Apple's (e.g., Android, Web general).
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/hig-components-status/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How hig-components-status Compares
| Feature / Agent | hig-components-status | 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 status and progress UI components including progress indicators, status bars, and activity rings.
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.
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
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
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-controls
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
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.
hig-components-dialogs
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
hig-components-content
Apple Human Interface Guidelines for content display components.
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
networkx
NetworkX is a Python package for creating, manipulating, and analyzing complex networks and graphs.
network-engineer
Expert network engineer specializing in modern cloud networking, security architectures, and performance optimization.