AgentSkillsCN

hig-components-status

Apple HIG 指南中关于状态与进度 UI 组件的指导，包括进度指示器、状态栏以及活动圆环。当用户询问“进度指示器”“进度条”“加载旋转图标”“状态栏”“活动圆环”“进度显示”、确定性进度与不确定性进度的区别、加载状态，或健身追踪圆环时，可选用此技能。此外，当用户说“我该如何展示加载状态？”“我应该使用旋转图标还是进度条？”“状态栏里该放什么？”或者询问活动指示器时，亦可灵活运用。交叉参考：HIG 组件系统——用于小部件与复杂功能、HIG 输入——用于手势驱动的进度控制、HIG 技术——用于 HealthKit 与活动圆环数据的整合。

SKILL.md
--- frontmatter
name: hig-components-status
version: 1.0.0
description: >
  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.

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

  1. •

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

  2. •

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

  3. •

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

  4. •

    Restore promptly when exiting immersive contexts.

Activity Rings

  1. •

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

  2. •

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

  3. •

    Use HealthKit APIs for activity data rather than manual tracking.

  4. •

    Celebrate completions with animation and haptics when rings close.

Reference Index

ReferenceTopicKey content
progress-indicators.mdProgress bars and spinnersDeterminate, indeterminate, inline placement, duration
status-bars.mdiOS/iPadOS status barSystem info, visibility, style, safe areas
activity-rings.mdwatchOS activity ringsMove/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 · More developer tools