·hig-components-content
{}

hig-components-content

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.

39Installs·3Trend·@raintree-technology

Installation

$npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-content

How to Install hig-components-content

Quickly install hig-components-content AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-content
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: raintree-technology/apple-hig-skills.

SKILL.md

View raw

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

| charts.md | Charts | Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs | | collections.md | Collections | Grid/list layouts, compositional layout, selection, reordering, diffable data sources | | image-views.md | Image Views | Aspect ratio handling, content modes, SF Symbol images, accessibility |

| image-wells.md | Image Wells | Drag-and-drop image selection, macOS-specific, placeholder content | | color-wells.md | Color Wells | Color selection UI, system color picker, custom color spaces | | web-views.md | Web Views | WKWebView, SFSafariViewController, navigation controls, content restrictions |

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. Source: raintree-technology/apple-hig-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-content
Category
{}Data Analysis
Verified
First Seen
2026-02-20
Updated
2026-03-10

Browse more skills from raintree-technology/apple-hig-skills

Quick answers

What is hig-components-content?

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. Source: raintree-technology/apple-hig-skills.

How do I install hig-components-content?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-content Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/raintree-technology/apple-hig-skills