AgentSkillsCN

hig-components-content

Apple 人机界面指南中关于内容展示组件的指导。当用户询问“图表组件”“集合视图”“图像视图”“Web 视图”“颜色池”“图像池”“活动视图”“锁定布局”“数据可视化”“内容展示”“图像显示”“Web 内容渲染”“颜色选择器”或“在 Apple 应用中呈现物品集合”时，可选用此技能。此外，当用户说“我该如何展示图表？”“展示图像的最佳方式是什么？”“我该使用 Web 视图吗？”“如何构建物品网格？”“哪个组件可以展示媒体？”“我该如何呈现分享表单？”时，亦可灵活运用。交叉参考：HIG 基础——色彩/排版/无障碍设计；HIG 数据可视化模式；HIG 组件布局——结构化容器；HIG 平台——针对不同平台的组件行为。

SKILL.md
--- frontmatter
name: hig-components-content
version: 1.0.0
description: >
  Apple Human Interface Guidelines for content display components. Use this skill when the user asks about
  "charts component", "collection view", "image view", "web view", "color well", "image well",
  "activity view", "lockup", "data visualization", "content display", displaying images, rendering
  web content, color pickers, or presenting collections of items in Apple apps.
  Also use when the user says "how should I display charts", "what's the best way to show images",
  "should I use a web view", "how do I build a grid of items", "what component shows media",
  or "how do I present a share sheet".
  Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data
  visualization patterns, hig-components-layout for structural containers, hig-platforms for
  platform-specific component behavior.

Apple HIG: Content Components

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

Key Principles

  1. •

    Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.

  2. •

    Make content accessible. Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions.

  3. •

    Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.

  4. •

    Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.

  5. •

    Respect platform conventions. A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects.

  6. •

    Handle empty states. Show a meaningful empty state with guidance on how to populate it, not a blank screen.

  7. •

    Optimize for performance. Use lazy loading, cell reuse, pagination, and prefetching for large datasets.

Reference Index

ReferenceTopicKey content
charts.mdChartsSwift Charts, bar/line/area/point marks, chart accessibility, audio graphs
collections.mdCollectionsGrid/list layouts, compositional layout, selection, reordering, diffable data sources
image-views.mdImage ViewsAspect ratio handling, content modes, SF Symbol images, accessibility
image-wells.mdImage WellsDrag-and-drop image selection, macOS-specific, placeholder content
color-wells.mdColor WellsColor selection UI, system color picker, custom color spaces
web-views.mdWeb ViewsWKWebView, SFSafariViewController, navigation controls, content restrictions
activity-views.mdActivity ViewsShare sheets, activity items, custom activities, action extensions
lockups.mdLockupsImage+text elements, tvOS card layouts, focus effects, shelf layouts

Component Selection Guide

Content NeedRecommended ComponentPlatform Notes
Visualizing quantitative dataCharts (Swift Charts)iOS 16+, macOS 13+, watchOS 9+
Browsing a grid or list of itemsCollection ViewCompositional layout for complex arrangements
Displaying a single imageImage ViewSupport aspect ratio fitting; provide accessibility description
Selecting an image via drag or browseImage WellmacOS primarily; use image pickers on iOS
Selecting a colorColor WellTriggers system color picker; macOS, iOS 14+
Showing web content inlineWeb View (WKWebView)Use SFSafariViewController for external browsing
Sharing content to other appsActivity ViewSystem share sheet with configurable activity types
Content card (image + text)LockupPrimarily tvOS; adaptable to other platforms

Output Format

  1. •Component recommendation with rationale, referencing the relevant HIG reference file.
  2. •Configuration guidance -- key properties and setup.
  3. •Accessibility requirements for the recommended component.
  4. •Platform-specific notes for targeted platforms.

Questions to Ask

  1. •What type of content? (Quantitative data, images, web content, browsable collection, share action?)
  2. •Which platforms?
  3. •Static or dynamic content?
  4. •How much content? (Few items vs hundreds/thousands affects component choice and optimization.)

Related Skills

  • •hig-foundations -- Color, typography, accessibility, and image guidelines
  • •hig-patterns -- Data visualization, sharing, and loading patterns
  • •hig-components-layout -- Structural containers (scroll views, lists, split views) hosting content
  • •hig-platforms -- Platform-specific component behavior (lockups on tvOS, web views on macOS)

Built by Raintree Technology · More developer tools