hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state," "should I use a spinner or progress bar," "what goes in the status bar," or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.
- Installs
- 643
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/raintree-technology/hig-doctor --skill hig-components-status- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads hig-components-status automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
-
Show progress for operations longer than a second or two.
-
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.
-
Indeterminate when duration is unknown. A spinner communicates work is happening without promising a timeframe. Use for unpredictable network requests.
-
Prefer progress bars over spinners. Determinate progress feels faster and more trustworthy.
-
Place indicators where content will appear. Inline progress near the content area, not modal or distant.
-
Don't stack multiple indicators. Aggregate simultaneous operations into one representation or show the most relevant.
-
Don't hide the status bar without good reason. Reserve hiding for immersive experiences (full-screen media, games, AR).
-
Match status bar style to your content. Light or dark for adequate contrast.
-
Respect safe areas. No interactive content behind the status bar.
-
Restore the status bar promptly when exiting immersive contexts.
-
Activity rings are for Move, Exercise, and Stand goals. Don't repurpose the ring metaphor for unrelated data.
-
Respect ring color conventions. Red (Move), green (Exercise), blue (Stand) are strongly associated with Apple Fitness.
-
Use HealthKit APIs for activity data rather than manual tracking.
-
Celebrate completions with animation and haptics when rings close.
Reference Index
| Reference | Topic | Key content |
|---|---|---|
| progress-indicators.md | Progress bars and spinners | Determinate, indeterminate, inline placement, duration |
| status-bars.md | iOS/iPadOS status bar | System info, visibility, style, safe areas |
| activity-rings.md | watchOS activity rings | Move/Exercise/Stand, HealthKit, fitness tracking, color |
Output Format
- Indicator type recommendation with rationale (determinate vs indeterminate).
- Timing and animation guidance -- duration thresholds, animation style, transitions.
- Accessibility -- VoiceOver progress announcements, live region updates.
- Platform-specific behavior across targeted platforms.
Questions to Ask
- Is the duration known or unknown?
- Which platforms?
- How long does the operation typically take?
- 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 · More developer tools
FAQ
What does the hig-components-status skill do?
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state," "should I use a spinner or progress bar," "what goes in the status bar," or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.
How do I install hig-components-status?
Run npx skills add https://github.com/raintree-technology/hig-doctor --skill hig-components-status in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/hig-components-status/ (personal) or .claude/skills/hig-components-status/ (project).
Which AI agents can use hig-components-status?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is hig-components-status safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains hig-components-status?
It is published by raintree-technology in raintree-technology/hig-doctor. It has 643 recorded installs.
More from raintree-technology/hig-doctor
hig-foundations
raintree-technology/hig-doctor
Apple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. Also use when the user says "my colors look wrong in dark mode", "what font should I use", "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", "how do I pick system colors", or "my icons don't match the system style". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.
hig-components-layout
raintree-technology/hig-doctor
Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", "list view", "table view", "column view", "outline view", "navigation structure", "app layout", "boxes", "ornaments", or organizing content hierarchically in Apple apps. Also use when the user says "how should I organize my app", "what navigation pattern should I use", "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", or "my app doesn't adapt to different screen sizes". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.
hig-patterns
raintree-technology/hig-doctor
Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about "onboarding flow", "user onboarding", "app launch", "loading state", "drag and drop", "search pattern", "settings design", "notifications", "modality", "multitasking", "feedback pattern", "haptics", "undo redo", "file management", data entry, sharing, collaboration, full screen, audio, video, haptic feedback, ratings, printing, help, or account management in Apple apps. Also use when the user says "how should onboarding work", "my app takes too long to load", "should I use a modal here", "how do I handle errors", "when should I ask for permissions", "how to show progress", or "what's the right way to confirm a delete". Cross-references: hig-foundations for underlying principles, hig-platforms for platform specifics, hig-components-layout for navigation, hig-components-content for data display.
hig-platforms
raintree-technology/hig-doctor
Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about "designing for iOS", "iPad app design", "macOS design", "tvOS", "visionOS", "watchOS", "Apple platform", "which platform", platform differences, platform-specific conventions, or multi-platform app design. Also use when the user says "should I design differently for iPad vs iPhone", "how does my app work on visionOS", "what's different about macOS apps", "porting my app to another platform", "universal app design", or "what input methods does this platform use". Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, hig-components-layout for navigation structures, hig-components-content for content display.
hig-components-controls
raintree-technology/hig-doctor
Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says "picker or segmented control," "how should my form look," "what keyboard type should I use," "toggle vs checkbox," or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.
hig-components-dialogs
raintree-technology/hig-doctor
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says "should I use an alert or a sheet," "how do I show a confirmation dialog," "when should I use a popover," "my modals are annoying users," or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.