mcpField
H
hig-components-content

hig-components-content

github.com/sickn33设计与 UI48.7k56 次安装今天更新
代码仓库

关于 hig-components-content

hig-components-content 面向设计 Apple 平台内容界面的开发者，协助选择和配置图表、集合、图像视图、网页视图及分享界面等组件，并关注无障碍和平台规范。

主要功能

  1. 01内容组件选择指导
  2. 02布局与视觉层级建议
  3. 03组件无障碍要求
  4. 04平台特定的组件注意事项
  5. 05Apple HIG 主题参考索引

适用场景

  1. 01为图表或集合选择组件
  2. 02设计易于访问的图像和网页内容
  3. 03规划跨平台分享界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill hig-components-content

安装后在 Claude Code 中输入/hig-components-content确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
activity-views.md
charts.md
collections.md
color-wells.md
image-views.md
image-wells.md
lockups.md
web-views.md

详细介绍

Apple HIG：内容组件

提问前，请先检查 .claude/apple-design-context.md。使用已有上下文，仅询问其中尚未涵盖的信息。

关键原则

  1. 适配不同尺寸和使用场景。 内容组件必须适用于不同屏幕尺寸、方向和多任务配置。使用适合相应框架的布局系统（SwiftUI 布局或 Auto Layout），并在可用时使用尺寸类别。

  2. 确保内容易于访问。 提供图表摘要和适当的无障碍数据导航；Swift Charts 包含默认的 Audio Graphs 实现。为有意义的图像提供描述性无障碍标签，并隐藏装饰性或重复的图像。集合需要符合逻辑的 VoiceOver 导航顺序。

  3. 保持视觉层次。 通过间距、尺寸和分组建立清晰的信息层次。主要内容应在视觉上突出。

  4. 优先使用系统组件。 在构建自定义组件之前，先评估 UICollectionView、SwiftUI Charts 和 WKWebView。系统组件提供无障碍和适配默认行为；仍需测试标签、交互方式和支持的平台版本。

  5. 遵循平台惯例。 tvOS 上的集合使用带视差效果的大型锁定式布局。同一集合在 iOS 上使用紧凑单元格和触控目标。在 visionOS 上，内容会增加景深和悬停效果。

  6. 处理空状态。 显示有意义的空状态，并说明如何填充内容，而不是显示空白屏幕。

  7. 优化性能。 对大型数据集使用延迟加载、单元格重用、分页和预取。

参考索引

参考资料主题主要内容
charts.md图表Swift Charts、条形／折线／面积／点标记、图表无障碍功能、音频图表
collections.md集合网格／列表布局、组合布局、选择、重新排序、可差异化数据源
image-views.md图像视图宽高比处理、内容模式、SF Symbol 图像、无障碍功能
image-wells.md图像井拖放图像选择、macOS 专属、占位内容
color-wells.md颜色井颜色选择界面、系统颜色选择器、自定义颜色空间
web-views.mdWeb 视图WKWebView、SFSafariViewController、导航控件、内容限制
activity-views.md活动视图分享表单、活动项目、自定义活动、操作扩展
lockups.md锁定式布局图像＋文本元素、tvOS 卡片布局、焦点效果、搁架布局

组件选择指南

内容需求推荐组件平台说明
可视化定量数据图表（Swift Charts）iOS 16+、macOS 13+、watchOS 9+
浏览网格或列表中的项目集合视图复杂布局可使用组合布局
显示单张图像图像视图支持宽高比适配；提供无障碍描述
通过拖放或浏览选择图像图像井主要用于 macOS；在 iOS 上使用图像选择器
选择颜色颜色井会触发系统颜色选择器；适用于 macOS、iOS 14+
内嵌显示 Web 内容Web 视图（WKWebView）在支持的 UIKit 平台上，可考虑使用 SFSafariViewController；在 macOS 上，外部链接使用默认浏览器
将内容分享至其他应用活动视图可配置活动类型的系统分享表单
内容卡片（图像＋文本）锁定式布局TVUIKit 锁定式布局仅适用于 tvOS；其他平台使用原生组件实现内容卡片模式

输出格式

  1. 组件推荐及理由，并引用相关的 HIG 参考文件。
  2. 配置指南——关键属性和设置。
  3. 推荐组件的无障碍要求。
  4. 平台特定说明，针对目标平台。

要提出的问题

  1. 内容类型是什么？（量化数据、图像、网页内容、可浏览的集合、分享操作？）
  2. 目标平台有哪些？
  3. 内容是静态还是动态的？
  4. 内容量有多少？（少量条目还是数百／数千条，这会影响组件选择和优化方式。）

相关技能

  • hig-foundations ——颜色、排版、无障碍和图像指南
  • hig-patterns ——数据可视化、分享和加载模式
  • hig-components-layout ——承载内容的结构容器（滚动视图、列表、分栏视图）
  • hig-platforms ——特定平台的组件行为（tvOS 上的组合布局、macOS 上的网页视图）

由 Raintree Technology 构建 · 更多开发者工具

适用场景

当需要执行概述中描述的工作流或操作时，可使用此技能。

示例

用户请求：

在此任务中使用 @hig-components-content：Apple 人机界面指南中的内容展示组件。

局限性

  • 随附的 HIG 页面是参考快照，并非实时兼容性矩阵。请根据目标 SDK 和部署版本确认 API 是否可用。macOS 使用原生分享 API，而非 UIActivityViewController；请勿根据共享的视觉模式推断 API 可移植性。
  • 仅当任务明确符合上述范围时，才使用此技能。
  • 不要将输出视为对环境特定验证、测试或专家审查的替代。
  • 如果缺少必要输入、权限、安全边界或成功标准，请停止并请求澄清。

评论

支持 Markdown